Scripting while using SSI calls 2 versions of jQuery

[peterdv]

1) Script Title: MegaMenu
1a)Script Title: Ultimate fade slide show.

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ddmegamenu.htm
2a)http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:
MegaMenu uses jQuery 1.5.2
Fadeinslideshow uses jQuery 1.4.2
I've been using both of the above scripts on static web pages, both work fine when using either version as the jQuery source.
I am in the middle of converting the web site to SSI separating out my pages and headers, etc.
If I use 1.5.2, only the menu will work. If I use 1.4.2, only the slide show will work. If I use both, neither work.

How can I use both or do I need to use both? I do very little java scripting, but can modify as needed. I really like both of these script results!

[jscheuer1]

You don't need both. The menu and the slideshow should work fine together on the same page.

I'd suggest updating to jQuery 1.6.4. Place that before the script tags for the menu and the slideshow. So in the head you would have something like:

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

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

<script src="ddmegamenu.js">

/***********************************************
* DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (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>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})


var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

</script>
<script type="text/javascript">

ddmegamenu.docinit({
	menuid:'solidmenu',
	dur:200 //<--no comma after last setting
})

	
ddmegamenu.docinit({
	menuid:'megaanchorlink',
	dur:500,
	easing:'easeInOutCirc' //<--no comma after last setting
})

</script>

The only difference being that in place of the highlighted parts you would use your own initializations for the slideshow(s) and menu(s) you're actually using.

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.

[peterdv]

John;
Thanks for the input. It did not seem to work. Two pages to reference, first using SSI calls

http://www.ewarbirds.org/automotive/...risminor.shtml
This will not work correctly, the slide show does not display.

This is the older version I was using for the same page and it works, but I need use the SSI calls.
http://www.ewarbirds.org/automotive/...rrisminor.html

Thanks in advance!

peter

[jscheuer1]

You've included the fadeslideshow.js file twice. Get rid of one of them. From the page's source code as viewed in the browser:

 . . . ify-v1" content="ePApIkQw+GoYBX3/s7+CP2dnCzTAOTIUp7cSJHWDyqM=">
<meta name="verify-v1" content="NLzsSx/FL7Tqx5g+5z611IkoloPvjZieji4WIz+AzgQ=">
<link rel="stylesheet" type="text/css" href="../style/emx_nav_new.css">
<link rel="stylesheet" type="text/css" href="../style/ddfiles/ddmegamenu.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (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>
<script type="text/javascript" src="../scripts/ddmegamenu.js">

/***********************************************
* DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script type="text/javascript">

ddmegamenu.docinit({
	menuid:'solidmenu',
	dur:200 //<--no comma after last setting
})

</script>


<!--banner_top closes out the HEADER-->
<!--add individual page javascript here-->
<script type="text/javascript" src="../scripts/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (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>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [400, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/morris/morris.1.jpg","","",""],
		["images/morris/morris.2.jpg","","",""],
		["images/m . . .

That's probably due to its being on two includes or its being on the main page and on an include. There could also be other problems. But best to fix this and see.

Edit: I did some testing and it's not the only problem:

You do need to get rid of that duplicate call to fadesliseshow.js but that's not enough. Once you get rid of it, this is how things need to be organized in the head:

 . . . fy-v1" content="ePApIkQw+GoYBX3/s7+CP2dnCzTAOTIUp7cSJHWDyqM=">
<meta name="verify-v1" content="NLzsSx/FL7Tqx5g+5z611IkoloPvjZieji4WIz+AzgQ=">
<link rel="stylesheet" type="text/css" href="../style/emx_nav_new.css">
<link rel="stylesheet" type="text/css" href="../style/ddfiles/ddmegamenu.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (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>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [400, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/morris/morris.1.jpg","","",""],
		["images/morris/morris.2.jpg","","",""],
		["images/morris/morris.3.jpg","","",""],
		["images/morris/morris.4.jpg","","",""],
		["images/morris/morris.5.jpg","","",""],
		["images/morris/morris.6.jpg","","",""]

	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})

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

/***********************************************
* DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script type="text/javascript">

ddmegamenu.docinit({
	menuid:'solidmenu',
	dur:200 //<--no comma after last setting
})

</script>


</head>

Well, it can be any order as long as jQuery comes first, the two other external scripts come before the on page script code that use them, and the on page script code for the menu comes after the on page script code for the slideshow.

BTW, this is not used:

ddmegamenu.docinit({
	menuid:'megaanchorlink',
	dur:500,
	easing:'easeOutBack' //<--no comma after last setting
})

So I got rid of it.

[peterdv]

John;
Been working too many late nights on this. Thanks for your expertise! The order of the script calls on the page did the trick. Once I moved the mega menu page script to AFTER the fade slideshow, it works just great! Thanks for a wonderful resource!
Peter