Help with Ultimate Fade-in slide show v1.5.1

**Jim Weinberg** · 04-09-2014, 12:10 PM

I'm using Ultimate Fade-in slide show v1.5.1 to display graphics on various pages and it works perfectly.

However, I would now like to have it display the array graphics only once and then display graphics in another array in the same space as the first array.

The code I'm using to display the first array is pretty straight forward:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Show Scenes Page</title>
<script src="Script_Files/build_array1.php?folder=Graphics/ShowPics/&array=ShowPics&usefilenames=no"></script>
<script type="text/javascript" src="Script_Files/slideshow.js"></script>  

<script type="text/javascript">
var fadebgcolor="#FEF4E4"
var caption_adjust="100%"
var caption_size=2
</script>

</head>

<body>
<center><p>&nbsp;<p>&nbsp;<p><table border=5 bordercolor="red">
<tr><td>
<!-- new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder: "R") -->
<script>new fadeshow(ShowPics, 650, 490, 3, 4000, 0, "R")</script>
</td></tr></table>
</body>
</html>

I've tried a couple of different ways to display the second array, but it always displays below the first.

I would appreciate any suggestions on how to modify the fadeshow script to only display once, and to then display the second array.

BTW, I know that my first problem could be solved by using v2.4, but I've used the fadeshow script on a lot of pages and don't really wont to have to recode them.

Thanks for any help.

**jscheuer1** · 04-09-2014, 01:05 PM

That is an old script, but still requires the credit notice:

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

That said, in the code in your post ShowPics is the global name of the array of images. You can use a for or while loop to change each line in it to that of another array. The only question would be when.

However, that slideshow is dated and will not work properly in recent IE (9 and later). And it has no convenient way to to tell when it has reached the end of the first array. The current version (2.4) has neither of these limitations. And instead of requiring an array change to change the images - since it populates the DOM with all the image elements instead of writing to the page as the old script does, you would be able to empty the div that contains it and reinit it with the new images, much simpler coding.

I'd suggest first updating to it:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

**Jim Weinberg** · 04-10-2014, 12:28 PM

John.

First, let me apologize for the violation. I thought the credit lines had to be left in the script file, not transferred to the source page. I will make that correction.

Second, thank you for the info. As much as I don't want to change all the pages that use the slideshow script, I guess it's about time I dragged them into the present and used the new version.

Best regards.

**Jim Weinberg** · 04-10-2014, 01:20 PM

Hi again, John.

I've tried the new 2.4 version and it definitely solves the cycling problem. I have 2 question, though: 1)how do I get it to display the second array after the first is finished and in the same space that the first one used? 2)I'm currently using a PHP routine to build the array dynamically from the contents of a directory and then passing the array name to the slideshow script. Can I do that with this new version?

Here's the code I'm using:

Code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="Script_Files/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 ShowPics=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: [
		["Graphics/ShowPics/100_0466-A.jpg"],
		["Graphics/ShowPics/100_0467-A.jpg"],
		["Graphics/ShowPics/100_0469-A.jpg"],
		["Graphics/ShowPics/100_0470-A.jpg"],
		["Graphics/ShowPics/100_0471-A.jpg"],
		["Graphics/ShowPics/100_0472-A.jpg"]
	],
	displaymode: {type:'auto', pause:2000, cycles:1, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

var ShowPics=new fadeSlideShow({
	wrapperid: "fadeshow2", //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: [
		["Graphics/ShowPics/100_0466-A.jpg"],
		["Graphics/ShowPics/100_0467-A.jpg"],
		["Graphics/ShowPics/100_0469-A.jpg"],
		["Graphics/ShowPics/100_0470-A.jpg"],
		["Graphics/ShowPics/100_0471-A.jpg"],
		["Graphics/ShowPics/100_0472-A.jpg"]
	],
	displaymode: {type:'auto', pause:2000, cycles:1, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

</script>
</head>

<body bgcolor="#FEF4E4">
<center>
<table cellspacing=1 border=0 width=100%>
<tr>
<td colspan=3 valign="top" align="center"><font size="4" color="Navy"><b>The Buckeye State Button Society<br>presents</b></td></tr>
<tr>
<td align="center" valign="middle"><p><font size="6" color="Green" face="Arial"><center>Spring Show 2014</font>
<p><font size=4 color="Navy"><b>April 9-10, 2011</b></font></td>
</tr><tr>
<td align="center">
<table border=0>
<td align="center" valign="top">

<div id="fadeshow1"></div>

</td>
</tr></table>
</tr></table>
</center>
</body>
</html>

**jscheuer1** · 04-10-2014, 02:10 PM

Since what you have there are two identical sets of images (I'm guessing just as a mock up), what do you want to have happen when the second batch of images has cycled through once? Are there the same number of images in both sets?

In any case, those things can be tweaked. But if you're just going to go through the second set once (as your current code implies), you could simply include them in the first set.

But say you want the second set to be continuous. Then you could do like so:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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 ShowPics=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/1.png"],
		["images/2.png"],
		["images/3.png"],
		["images/4.png"],
		["images/5.png"],
		["images/6.png"]
	],
	displaymode: {type:'auto', pause:2000, cycles:1, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	oninit: function(){++this.setting.currentstep},
	onslide: function(){
		if(this.setting.currentstep === this.setting.imagearray.length){
			setTimeout(ShowPics2, this.setting.displaymode.pause);
		}
	},
	togglerid: ""
})

var ShowPics2 = function(){
	Showpics=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/7.png"],
			["images/8.png"],
			["images/9.png"],
			["images/10.png"],
			["images/11.png"],
			["images/12.png"]
		],
		displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false},
		persist: false, //remember last viewed slide and recall within same session?
		fadeduration: 500, //transition duration (milliseconds)
		descreveal: "ondemand",
		togglerid: ""
	});
}
</script>
</head>
<body>
This page for demonstration purposes only. All images &copy; Bistro Don Giovanni or their respective copyright holders.
<div id="fadeshow1"></div>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/s...ith2ndshow.htm

**Jim Weinberg** · 04-10-2014, 02:19 PM

Hi John.

Yes, it's just a mock up until I can get it the way I want it. To answer your question: when the second batch is done, it can just stop (to be honest, there are so many pics in the second batch, I doubt anyone will view it all the way through

; No, the number of images will be different in each array.

**jscheuer1** · 04-10-2014, 02:48 PM

I just updated my previous post to show how this can be done. But if the second set of images also ends when it's done, virtually the same effect can be achieved by simply adding its images to the first set and having only one slideshow. They are going to play out in the same amount of time and order anyway, and that would be more efficient.

**Jim Weinberg** · 04-10-2014, 08:36 PM

Hi John.

Your right about the second set. Actually, there are 7 sets (one for each year). They each have different number of files and, in some cases, the files in different sets have the same name. That said, I'm assuming that I simply add the oninit and onslide code to each of the set definitions, replacing the setTimeout target to the next set (except for the last one).

Thanks for all your help. One problem down and one to go.

I'm currently using a PHP routine to build the arrays when the page loads, and then passing the array name to the (current) slideshow script. Can I simply use the array name as the argument for the imagearray parameter?

Thread: Help with Ultimate Fade-in slide show v1.5.1

Thread Tools

Search Thread

Help with Ultimate Fade-in slide show v1.5.1

Similar Threads

Set Slide Duration for Ultimate Fade-In Slide Show Ver. 1.51

Ultimate Fade-In Slide Show - Audio file with each slide

Ultimate Fade-In Slide Show - Advance slide on mouse click

Ultimate Fade-in slide show- show text descriptions?

Ultimate Fade-In slide show slide limit

Bookmarks

Bookmarks

Posting Permissions