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/dynamici...nslideshow.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.

Code:

<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:

Code:

<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

Code:

<!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

Code:

["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 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:

Code:

    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));

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

Thread Tools

Search Thread

Ultimate Fade-in slideshow (v2.4) - Multiple slideshows, same images

Bookmarks

Bookmarks

Posting Permissions