Results 1 to 9 of 9

Thread: Slideshow images in chronological order

  1. #1
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slideshow images in chronological order

    1) Script Title: Ultimate Fade-In Slideshow

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

    3) Describe problem: I learned from Mr. Scheuer how to call slideshow images from a folder, but I was wondering if they could be arranged by the date on the file rather than alphabetical order. Preferably, they would show in order from newest to oldest. I'm a rank amateur at these, so please be gentle.

  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

    We can probably do that. There are at least several ways to get the filenames though, and how we go about doing it would depend upon that. What method are you using?
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I've used imagearray: galleryarray to call the images, which currently places them in alphabetical order, and the server-side scripting is PHP. I hope that's what you meant.

  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

    Well yes and I meant the exact code. And now that I'm thinking about it, is the PHP code on the page or is it a separate file?

    The reasons I ask are I already have it worked out for PHP, so I wanted to know that part, that means the answer is yes, we can do this. But if I have the exact code I might be able to just tweak it for you rather than make you change over to something completely different and/or change where the code is located.
    - John
    ________________________

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

  5. #5
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The code is in a slideshow page in the root directory. The code as I have it on the page:

    Code:
    <script type="text/javascript" src="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="slidepics.php"></script>
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "picshow",
    	dimensions: [500, 500],
    	imagearray: galleryarray(),
    	sortby: ["file", "asc"],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false,
    	fadeduration: 200,
    	descreveal: "always",
    	togglerid: "picshowtoggler"
    })
    
    </script>

    It's called in the HTML like so:

    HTML Code:
    		<div id="picshowtoggler" style="width: 900px; margin: 0">
    
    <a href="#" class="prev" style="height: 50px; float: left; border: 0; margin: 220px 0 0 60px"><img src="altprev.png" style="border: 0" alt="Previous"/></a>
    
    <a href="#" class="next" style="height: 50px; float: right; border: 0; margin: 220px 60px 0 0"><img src="altnext.png" style="border: 0" alt="Next" /></a>
    
    	<div id="slideshowtoggler">
    
    <a href="#" class="prev" style="height: 50px; float: left; border: 0; margin: 220px 0 0 60px"></a>
    
    <a href="#" class="next" style="height: 50px; float: right; border: 0; margin: 220px 60px 0 0"></a>
    
    <div id="picshow"></div><br />

    And as you can see, it calls a separate PHP file called "slidepics" (also in the root directory), which looks like this:

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

    function 
    returnimages($dirname="./images/Slides/") {
       
    $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();
    ?>

    It calls all the images in the "Slides" folder of the "images" directory. Not sure if any of this is helpful, but if possible, a good tweaking would be best.
    Last edited by jscheuer1; 07-27-2011 at 03:21 PM. Reason: format code

  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

    I see several issues with that code. The only one that I'm like 99% certain would cause an error (galleryarray is not a function, or something like that) is here:

    Code:
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "picshow",
    	dimensions: [500, 500],
    	imagearray: galleryarray(),
    	sortby: ["file", "asc"],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false,
    	fadeduration: 200,
    	descreveal: "always",
    	togglerid: "picshowtoggler"
    })
    
    </script>
    Those red parentheses should not be there.

    So fix that and use this PHP file in place of your current slidepics.php file:

    PHP Code:
    <?php
    Header
    ("content-type: application/x-javascript");
    function 
    returnimages(){
        
    $photovar = isset($_GET['var'])? $_GET['var'] : 'galleryarray';
        if (!
    preg_match('#^[a-z_][a-z0-9_]+$#i'$photovar)){
            echo 
    'alert("var name must be at least two characters and contain only letters, numbers, or underscore, and cannot start with a number")';
            die();
        }
        
    $dirname './images/Slides/';
        
    $odir getcwd();
        
    chdir($dirname);
        
    $path str_replace(' ''%20'str_replace($_SERVER['DOCUMENT_ROOT'], ''str_replace('\\''/'getcwd())));
        
    $base 'http://' preg_replace('#/{2,}#''/'"{$_SERVER["SERVER_NAME"]}/$path/");
        
    $dirname '.';
        
    $pattern '#\.(jpg|jpeg|png|gif|bmp)$#i';
        
    $files = array();
        if(
    $handle opendir($dirname)){
            
    clearstatcache();
            while(
    false !== ($file readdir($handle))){
                if(
    preg_match($pattern$file)){
                    
    $files[$file] = filemtime($file);
                }
            }
            
    closedir($handle);
        }
        
    chdir($odir);
        
    arsort($filesSORT_NUMERIC);
        
    $files array_keys($files);
        return 
    "var $photovar = [\n    ['$baseimplode("'],\n    ['$base"$files) . "']\n];";
    }

    echo 
    returnimages();
    die();
    ?>
    - John
    ________________________

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

  7. #7
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, John. The first time I tried it, however, the photos from images/Slides didn't load; the slideshow was there, but without any images. I ran into this problem reloading the original code, too, and fixed it by uploading a code template I saved and plugging in the values for what I wanted to call. Therefore, it must be a problem on my end. I'll try this again and post back with the results.

  8. #8
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quick update: I tried the code as written a second time and got the same error - the slideshow container shows up, as do the navigational arrows, but no images are loaded. The counter also doesn't show until I click one of the arrows. I even renamed all the images to make sure they didn't have any illegal characters, but no go. I copied and pasted the code into the new slidepics.php, but I'm clueless as to what's wrong. Sorry about all this.

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

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - 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
  •