Results 1 to 3 of 3

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

  1. #1
    Join Date
    Oct 2008
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

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

    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"],

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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));
    Last edited by jscheuer1; 09-26-2010 at 03:01 PM. Reason: Thought about it
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •