View Full Version : Combining scripts

03-01-2012, 04:44 AM
1) Script Title: drilldown menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/drilldownmenu.htm

3) Describe problem: This script is working fine and is what I want for my photo gallery site. The problem begins when I try to incorporate another sript on the called page. On the caleld page, I want to have thumbnails, and the large phot is called via the lightbox script. What I get, is the large photo opens in an entirely new page.
I have put the lightbox script on both pages with the same result.
I have played around with where the files are placed with the same results.

Maybe I should say it's kind of like 3 scripts in one. I'm using the ajax scipt that changes content of the div from another page.
That menu was replaced with the drilldown menu.

Can anyone help me so I can use the scripts as intended?

After some further experimentation, I have concluded that including script on the called page just ain't possible the way it is.
Apparently, the original script for swapping the content negates the other script.
Now if some kind soul just figure out how to make an external page use script, that would make an awesome script.

03-01-2012, 07:34 PM
I always called it 'Cross Contamination'...it's where two or more scripts collide by using the same variable or function names but both handle the action differently.
To adjust each variables and functions need to be renamed to match the script they work with.

Image Rotation Script:
function IR_rotator()

Banner Rotation Script:
function BR_rotator()

also please post an example...

03-01-2012, 09:00 PM
Quite possibly but I don't think so in this case.
I tried it with one page and I noticed that what should have been functional, was not. Like the called page javascript had been turned off.
I just tried it with the ajaxcontent script alone and called a page with JS on it. The called page script had been turned off.
But I'll play with your idea and see what happens.

03-01-2012, 09:12 PM
Get rid of the lightbox scripts and styles completely. But keep your rel="lightbox" links just the way they are. Download and install Slimbox2:


on the 'top' page before the menu script and get rid of:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

from the head code of the menu script.

So in the head of the 'top' page, you have (plus whatever you already have for the AJAX script):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" href="drilldownmenu.css" />

<script type="text/javascript" src="drilldownmenu.js">

* Drill Down Menu script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more


<script type="text/javascript">

var mymenu=new drilldownmenu({
menuid: 'drillmenu1',
menuheight: 'auto',
breadcrumbid: 'drillcrumb',
persist: {enable: true, overrideselectedul: true}


Using a text only editor like NotePad, in the slimbox2.js file, replace this:

if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));


// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
$('*[href][rel^=lightbox]').live('click', function(e){
var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
if(rel === 'lightbox'){
$.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
} else {
$('*[href][rel="' + rel + '"]').each(function(){
if($.inArray(this.href, hrefs) < 0){
if(t.href === this.href){index = hrefs.length;}
links.push([this.href, this.getAttribute('rev') || '']);
$.slimbox(links, index, {loop: true /* , Aditional Options */ });

Your rel="lightbox" links will now work on the imported page. The only difference is that instead of the title attribute being used for the caption, the rev attribute will be.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

03-01-2012, 09:15 PM
An idea for the brilliant writers at DD.
Take the ajaxcontent script and make it so that we can use images instead of html files.
While the idea is simple and sweet, it could also use a collapsing folding tree menu.
Would make a nice photo gallery.

03-01-2012, 09:18 PM
Thanks for the information John.
I'll do that in a few minutes and put up a sample of what I want to do.

03-02-2012, 10:20 AM
Here is a working sample of my problem with the scripts.
Just read the text.

note that your modification does not work.


03-02-2012, 01:16 PM
Works here, what's the problem?

The menu works, the AJAX import works, and when you get the rambler image and click it, the lightbox comes up. What else do you want?

Incidentally, you didn't exactly follow the instructions. Get rid of the highlighted:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="drilldownmenu.css" >
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

<script type="text/javascript" src="drilldownmenu.js">

* Drill Down Menu script- (c) Dynami . . .

Those don't appear to be harming anything - still they should be removed as they're not being used.