Results 1 to 10 of 10

Thread: Ultimate Fade-in slideshow (v2.1)-preload images

  1. #1
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v2.1)-preload images

    1) Script Title: Ultimate Fade-in slideshow (v2.1)

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

    3) Describe problem: preload images

    Hi, I love the script however

    1) like the DHTML Slide Show Script i would like to have it preload the images...im assuming it doesnt since you dont mention it in its key features

    2) i dont know if this is possible but I WOULD LOVE YOU GUYS if you could make the slide show AUTO LOAD images from a folder on a server...see this script which i think is flash based for what im talking about http://www.flashnifties.com/flash_gallery.php
    ie for the images to display in the slideshow instead of having to type a long list of images, the script would just know to look for all images within a folder on your server and automatically create the slideshow from it...

  2. #2
    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

    The script already preloads the images. This is such a basic requirement for most slide shows that I imagine the author chose not to mention it. As for importing the array of images from a folder, this would require PHP or another server side language, or it could be done via javascript if certain naming conventions were observed for the image files.

    The easiest is PHP if you have that available, do you?
    - John
    ________________________

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

  3. #3
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ive never used PHP but am looking at a site with tutorials and looking for auto load scripts...so if i should find one...do i need to mess with the .js file or will i just need to mess with the script in the header

  4. #4
    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

    At first, it really doesn't matter. If your server doesn't provide you with a PHP interface, you can't use it anyway. That's why I asked if you have it available. I suppose I should have been more specific:

    Does your live host provide PHP?

    If so, although my knowledge in this area is rather limited compared to my knowledge of javascript, grabbing a list of files from a directory is pretty simple in PHP and I can guide you through setting it up.

    The main issue is whether or not your server provides you with PHP. Does it?

    If you don't know, copy this code to a plain text editor:

    PHP Code:
    <?php
    phpinfo
    ();
    ?>
    Save it as info.php and upload it to the main folder of your live site. Navigate to it. If your host supports PHP for your use, you will see a panoply of statistics, if not - you will see little or nothing.
    - John
    ________________________

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

  5. #5
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yes it supporsts PHP Version 4.4.7

  6. #6
    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

    OK, we are half way home on the PHP support front. There may still be issues with your host not allowing folder reads and filename retrieval, but that is unusual, so let's not worry about that unless it happens. That said, here is the PHP file to use:

    PHP Code:
    <?php
    Header
    ("content-type: application/x-javascript");

    function 
    returnimages($dirname="./images/") {
       
    $pattern="\.(jpg|jpeg|png|gif|bmp)$";
       
    $files = array();
       
    $curimage=0;
       if(
    $handle opendir($dirname)) {
           while(
    false !== ($file readdir($handle))){
                   if(
    eregi($pattern$file)){
                     echo 
    'galleryarray[' $curimage .']=["' $dirname $file '"];' "\n";
                     
    $curimage++;
                   }
           }

           
    closedir($handle);
       }
       return(
    $files);
    }

    echo 
    "var galleryarray=new Array();" "\n";
    returnimages();
    ?>
    Save it as - say, getpics.php and notice this line:

    Code:
    function returnimages($dirname="./images/") {
    the . represents the folder that your page is in, the /images/ is the folder off of the folder where your page is that contains the images. Edit that if need be to reflect the actual folder name (it must be a folder off of the folder in which your page is located), and upload the getpics.php file to the same folder as your page. Place this tag in the head of your page before the slide show's initialization:

    Code:
    <script type="text/javascript" src="getpics.php"></script>
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [470, 502], //width . . .
    Then for the init, use:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [470, 502], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: galleryarray,
    	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: ""
    })
    - John
    ________________________

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

  7. #7
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    outstanding, this will greatly reduce my updating ...however

    1. when it loads it doesnt load the first image and display it first, then the next so that viewer can start looking at gallery rather then wait for entire thing to load and have a blank space there.

    2. for some reason it loads the next button, then instead of displaying image 1 of xxx, it displays some other number 42 of 76, then it renders the back button.

    i got it working for two galleries right now
    http://www.engagedesign.com/web2/fashion.html

    http://www.engagedesign.com/web2/interiors.html

    thanks a million

  8. #8
    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

    For your first page, you have persistence set to true, so it will always load the last viewed image, if you want it to always start with the first image, change:

    Code:
    <script type="text/javascript">
    
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [461, 377], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: galleryarray,
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
    	persist: true, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "fadeshow1toggler"
    })
    
    
    </script>
    to false.

    As for the order in which images load on the page (your next/previous buttons), you can try preloading them in the head of the page before the scripts for the slide show:

    Code:
    <script type="text/javascript">
    (function(){
    	var ims = ['http://www.engagedesign.com/web2/images/back.png', 'http://www.engagedesign.com/web2/images/fwd.png'], pims = [];
    	for(var i = 0; i < ims.length; ++i){
    		pims[i] = new Image();
    		pims[i].src = ims[i];
    	}
    })();
    </script>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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" src="fashion.php"></script>
    <script type="text/javascript">
    
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [461, 377], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: galleryarray,
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "fadeshow1toggler"
    })
    
    
    </script>
    As for having to load all the images, see:

    http://www.dynamicdrive.com/forums/s...ad.php?t=50185

    One of the two strategies in that thread should allow you to at least show an image while the others are loading.

    For your second page:

    http://www.engagedesign.com/web2/interiors.php

    is a 404 not found.
    - John
    ________________________

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

  9. #9
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    something weird is happening...i didnt touch the interiors stuff and when i went to click on it later the gallery wasnt displaying...but then i periodically reloaded the page and it reappeared.

    also i then went to do this for headshot section and i only had two images in a folder and i kept getting a broken image icon and no images where loading, then for some reason i thought maybe this php script needs more then 2 images in a folder to work so i uploaded more images into that folder and the gallery appeared?

  10. #10
    Join Date
    Sep 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks it worked...shouldve caught the first issue myself

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
  •