www.webdeveloper.com
Results 1 to 3 of 3

Thread: Slideshow that automatically shows all images existing in a given folder

  1. #1
    Join Date
    Jul 2006
    Posts
    373

    Slideshow that automatically shows all images existing in a given folder

    Hi,

    I made a gallery that works pretty much the way i want except for one thing, the images displayed must be replaced by new ones every week and there is no fixed number of images either. Sometimes can be 10 images, some times more or less. So this requires me to constantly modify the html code in order to include the paths to the images in folder at that time. The idea is then have javascript automatically detect the images in the folder and generate the html code to display them. HEre is my code:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> galerry</title>
      <script type='text/javascript' src='jquery.js'></script>
      <style type='text/css'>
        #fader {
        position: relative; 
        width: 100%;
        height: 400px;
        }
     .button {
        background-color:gold;
        width: 50px;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        top: 30px;
        display:block;  
       }
      #next {
        right: 850px;
        top:500px;    
       }
      #prev {
        left: 840px;
        top:500px;   
       }
      #pause {
        left: 900px;
        top:500px;
        color:orange;
       }
     #inicio {
        left: 960px;
        top:500px;
        color:green;  
       }
      </style>
     <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $(function() {
        $('#fader img:not(:first)').hide();
        $('#fader img').css('position', 'absolute');
        $('#fader img').css('top', '0px');
        $('#fader img').css('left', '50%');
        $('#fader img').each(function() {
            var img = $(this);
            $('<img>').attr('src', $(this).attr('src')).load(function() {
                img.css('margin-left', -this.width / 2 + 'px');
            });
        });
    
        var pause = false;
        
        function fadeNext() {
            $('#fader img').first().fadeOut().appendTo($('#fader'));
            $('#fader img').first().fadeIn();
        }
    
        function fadePrev() {
            $('#fader img').first().fadeOut();
            $('#fader img').last().prependTo($('#fader')).fadeIn();
        }
    
        $('#fader, #next').click(function() {
            fadeNext();
        });
    
        $('#prev').click(function() {
            fadePrev();
        });
    
        $('#pause').click(function() {
            pause = true;
        });
    
       $('#inicio').click(function() {
            pause = false;
        });
    
        function doRotate() {
            if(!pause) {
                fadeNext();
            }    
        }  
        var rotate = setInterval(doRotate, 10000);
    });
    });//]]>  
    </script>
    </head>
    <body>
      <div id="fader">
        <img src="http://dummyimage.com/600x400/000/fff.png&text=Image1"/>
        <img src="http://dummyimage.com/200x400/f00/000.jpg&text=Image2"/>
        <img src="http://dummyimage.com/100x100/0f0/000.png&text=Image3"/>
        <img src="http://dummyimage.com/400x400/0ff/000.gif&text=Image4"/>
        <img src="http://dummyimage.com/350x250/ff0/000.png&text=Image5"/>
     </div>
     <div class="button" id="next">►►</div>
     <div class="button" id="pause">▌▌</div>
    <div class="button" id="inicio"></div>
     <div class="button" id="prev">◄◄</div>
    </body>
    </html>
    And this is the part of the code i want to automatically generate:

    HTML Code:
      <div id="fader">
        <img src="http://dummyimage.com/600x400/000/fff.png&text=Image1"/>
        <img src="http://dummyimage.com/200x400/f00/000.jpg&text=Image2"/>
        <img src="http://dummyimage.com/100x100/0f0/000.png&text=Image3"/>
        <img src="http://dummyimage.com/400x400/0ff/000.gif&text=Image4"/>
        <img src="http://dummyimage.com/350x250/ff0/000.png&text=Image5"/>
     </div>
    How can i do this?

    Thank you.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    you need php for that. put all your images into one directory then do the following

    Code:
    <?php
    function scd($dir){$files=scandir($dir);sort($files);reset($files);return $files;}
    
    $output='<div id="fader">';
    $dir='here_goes_the_directory_with_images';
    $files=scd($dir);
    foreach($files as $file){
    if($file==='.'||$file==='..'){continue;}
    $output.='<img src="'.$dir.'/'.$file.'" alt="" />';
    }
    echo $output.'</div>';
    ?>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jul 2006
    Posts
    373
    Thanks for the code, but are you sure it cant be done with jquery only or json? Because i have found this:

    https://gist.github.com/aslan144/2047603
    http://jqfaq.com/how-to-load-all-fil...-using-jquery/
    http://www.justinwhall.com/directory-jquery-slider/

    im not sure how to apply it though. I would prefer to do it with a client side language rather than php because i would need to setup a server for that.

    Thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles