Log in

View Full Version : Ultimate Fade-in slideshow (v2.4) - Multiple slideshows, same images


spook_man
09-24-2010, 07:05 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:
I'm using this to rotate all the same images in three different fadeSlideShows; they're small images (60x27). So I end up having three new fadeSlideShows with different wrapperid's, all pointing to the same images. Since there are roughly 300 images, this adds a lot of code to my page.

Is there a way to set the imagearray for the different wrapperids to point to an xml file or something to get the list of images?

Thanks.. -Jeff

E.g.

<script type="text/javascript">
var mygallery = new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [60, 27], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["PicturesList.xml"]

...yadda-yadda-yadda...

var mygallery = new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [60, 27], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["PicturesList.xml"]

...yadda-yadda-yadda...

var mygallery = new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [60, 27], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["PicturesList.xml"]

Instead of current:

<script type="text/javascript">
var mygallery = new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [60, 27], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["<%=PortalSettings.ActiveTab.SkinPath%>/images/headerrandomimages/1.jpg"],
["<%=PortalSettings.ActiveTab.SkinPath%>/images/headerrandomimages/2.jpg"],

...yadda-yadda-yadda...

var mygallery = new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [60, 27], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["<%=PortalSettings.ActiveTab.SkinPath%>/images/headerrandomimages/1.jpg"],
["<%=PortalSettings.ActiveTab.SkinPath%>/images/headerrandomimages/2.jpg"],

...yadda-yadda-yadda...

var mygallery = new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [60, 27], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["<%=PortalSettings.ActiveTab.SkinPath%>/images/headerrandomimages/1.jpg"],
["<%=PortalSettings.ActiveTab.SkinPath%>/images/headerrandomimages/2.jpg"],
azoomer
09-26-2010, 12:45 AM
Hi, i've been trying to figure out how it could be done. I don't know how to do it with xml, but i found that it will work with php include. Here's the markup on the test php page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</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: [
<?php include("imgarray.php"); ?>

],
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 mygallery=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: [
<?php include("imgarray.php"); ?>

],
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: ""
})

</script>
</head>

<body>

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

</body>
</html>
In the same folder I put the fadeslideshow.js and then a second php page called imgarray.php only containing the imagearray like this


["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."]

Of course it will only work on a server with php installed.
Here is a DEMO (http://azoomer.com/ufisphp/) of the above in action.
Even though I don't know if it's correct to do it this way, it seems to work and it could give you a cleaner main page, just remember to save at least the main page with the php extension.
jscheuer1
09-26-2010, 02:28 AM
What does PicturesList.xml look like? The reason I ask is that jQuery (the script library used to power the slideshow) also has advanced AJAX routines included. It can import an xml file and parse it. But I would need to know the structure of the xml file in order to tell you how to do it in anything other than general terms.

Added Later:

I thought about this some more. Adding in the image array via an AJAX import of xml isn't particularly efficient, and neither is the code you currently have, could you live with:


var mygalleries = {
dimensions: [60, 27], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["<%=PortalSettings.ActiveTab.SkinPath%>/images/headerrandomimages/1.jpg"],
["<%=PortalSettings.ActiveTab.SkinPath%>/images/headerrandomimages/2.jpg"],

...yadda-yadda-yadda...
};

new fadeSlideShow(jQuery.extend(true, {wrapperid: "fadeshow1"}, mygalleries));
new fadeSlideShow(jQuery.extend(true, {wrapperid: "fadeshow2"}, mygalleries));
new fadeSlideShow(jQuery.extend(true, {wrapperid: "fadeshow3"}, mygalleries));