Switch between multiple slideshows

**slimbo** · 06-20-2010, 09:40 AM

1) Script Title: Ultimate Fade-in slide show v2.4

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

3) Describe problem: I'm trying to run several slideshows on one page, but with only one showing at a time. I want to switch between them by clicking on buttons or image icons.
I have tried this using a javascript script that manipulates the show/hide div of css, using both the visibility (hidden/visible) and the block (show/hide) , and placing the slideshow scripts within divs with unique ids but positioned in the same place.

This works except as soon as a link is clicked to switch to showing a different slideshow, the slideshows all stop running. Is there a way to modify this to keep each slideshow running, or start it when it's div is made visible?

To clarify, here is the complete code of my test page;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></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:5, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "never",
	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:'auto', pause:2500, cycles:5, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "never",
	togglerid: ""
})

</script>

<script language=javascript type='text/javascript'> 
function showdiv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){//if they are 'see' divs 
if (document.getElementById) // DOM3 = IE5, NS6 
divs[i].style.display="block";// show/hide 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'block'; 
else // IE 4 
document.all.divs[i].display = 'block'; 
} else { 
if (document.getElementById) 
divs[i].style.display="none"; 
else 
if (document.layers) // Netscape 4 
document.divs[i].display = 'none'; 
else // IE 4 
document.all.divs[i].display = 'none'; 
} 
} 
} 

</script> 
</head>
<body>
<a href="javascript:showdiv('fadeshow1')">show ss1 div hide rest</a> 
<a href="javascript:showdiv('fadeshow2')"> show ss2 div hide rest</a> 

<div id="fadeshow1" style="position:absolute; left:100px; top:100px;">
</div>


<br >

 
<div id="fadeshow2" style="display:none; position:absolute; left:100px; top:100px;">
</div>

</body>
</html>

Any help with this would be much appreciated.

**jscheuer1** · 06-20-2010, 01:58 PM

You have two identical slide shows there. So, even if you were successful, there would be nothing to notice. Replacing one identical slide show with another makes no perceptual change to the page.

You have to use visibility. With display, the one(s) you cannot see at first will not initialize properly because display none element's offsets (used to calculate positioning of the images by the script) are unavailable to the browser and javascript.

You cannot hide all divisions. If you do, the divisions inside the slide show (yes they are there, generated by the script) will also be hidden.

The script takes control of the division with the wrapperid, making it visible and relatively positioned. If you want to override that, you must use either overriding styles or edit the script. I chose overriding styles.

So, except for the fact that they are two identical slide shows so you can't tell that they are switching, this works:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
.fadeshow {
	position: absolute!important;
	left: 100px;
	top: 100px;
}
.fadshow_hidden {
	visibility: hidden!important;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></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:5, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "never",
	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:'auto', pause:2500, cycles:5, wraparound:true},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "never",
	togglerid: ""
})

</script>

<script type='text/javascript'> 
jQuery(function($){
	var divs = $('.fadeshow');
	$('a[rel^=fadeshow]').click(function(e){
		divs.css({visibility: 'hidden'}).removeClass('fadshow_hidden');
		document.getElementById(this.rel).style.visibility = '';
		e.preventDefault();
	});
});
</script> 
</head>
<body>
<a href="javascript:showdiv('fadeshow1')" rel="fadeshow1">show ss1 div hide rest</a> <br>
<a href="javascript:showdiv('fadeshow2')" rel="fadeshow2"> show ss2 div hide rest</a> 

<div class="fadeshow" id="fadeshow1">
</div>
 
<div class="fadeshow fadshow_hidden" id="fadeshow2">
</div>

</body>
</html>

If you remove the !important keyword here:

Code:

.fadeshow {
	position: absolute!important;
	left: 100px;
	top: 100px;
}

They will revert to the scripted relative position and you will more clearly see that they are indeed switching, best though to get your own images and stock each slide show with different images.

**slimbo** · 06-20-2010, 09:11 PM

Hi jscheuer1,

Thanks for that.

I realise the slideshows have identical images - I was just trying to get the code working before I substituted my own images.

That is totally excellent, you are a wizard.

Regards
Simon

**jason_21218** · 01-18-2011, 08:48 PM

Can you post link to the finished page? I need to see an example of switching between multiple slideshows on same page

**slimbo** · 01-20-2011, 12:10 AM

jason_21218, I'm afraid I abandoned that project - the client changed her mind about what she wanted. I suggest you follow the instructions given in the previous post by jscheuer1.

Thread: Switch between multiple slideshows

Thread Tools

Search Thread

Switch between multiple slideshows

finished example of this thread

Bookmarks

Bookmarks

Posting Permissions