Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Image gallery display and slideshow viewer

    Hi all,
    This is my first snippet posting, so apologies in advance if I miss something.
    Here are two pieces of code that when used together make for a very simple website picture gallery:
    1) If you haven't already done so, create a folder on your web server to keep all of your images in.
    2) Copy the following code to a new page in your images folder and name it gallerytable.php:
    PHP Code:
    <?php 
    $filelist 
    explode("\n",`find .|sort`); 

    $dircount 1
    $imgcount 0;

        
    //start the table(ok to change the table style)
    $display_block .= "<div style=\"text-align:right\">";    
    $display_block .= "<table style=\"width:600px\">"
    $display_block .= "<tr> \n"

        
    //for each item in the array.... 
         
        
    for ($count=0;$count<count($filelist);$count++) { 
         
        
    // get the file names.... 
         
        
    $filename $filelist[$count]; 
         
        
    // get the directories.... 
         
        
    if (is_dir($filename) && (!eregi("_vti_cnf",$filename)) && (!eregi("_overlay",$filename)) && (!eregi("_derived",$filename)) && ($filename!=".") && ($filename!="..")) { 
                    
    $currdir = array(); 
                    
    $gallery opendir($filename); 
                    
    $imgcount 0;  
                    
    $gallerytitle $filename "/gallery.txt";
                     
        
    //loop to count number of images.... 
         
        
    while($f readdir($gallery)){ 
        
           if((
    $f != ".") && ($f != "..")&& (eregi("(\.jpg|\.gif|\.png)$"$f))){ 
                
           
    //get a random image to display.... 
            
           
    array_push($currdir,"$f"); 
           
    $d $currdir[(array_rand($currdir))]; 
           
    $displayimg sprintf($d,s); 
                  
    $imgcount++;  
                } 
            } 
        
    closedir($gallery); 
            
    //If the photo folder has a file named 'gallery.txt'
            //This will read the first line and stick that text
            //into the "alt" of the image (displays on mouseover)
            
            // read title of gallery from gallery.txt
           
        
    if (file_exists($gallerytitle)) { 
        
    $title_file file($gallerytitle); 
        
    $title $title_file[0];
        }
        
    // if no gallery.txt file was found; show user through $title on webpage
        
    else {
         
    $title "No description for this gallery was provided";
         }

        
    //build our table... 
         
        
    $display_block .= "<td><center><a href=\"galleryslideshow.php?dir=" $filename "\"><img src=\"" $filename "/" $displayimg "\" alt=\"" $title "\" width=\"275\"/><br>";
        
    $display_block .= "There are [" .  $imgcount "] images in this directory</a></center></td>\n";  
        
    $dircount $dircount 1
        if (
    $dircount 2) { 
        
    $display_block .= "</tr>\n<tr>\n"
        } else { 
        
    $display_block .= ""
                    } 
        
    $imgid 1
            } 
        } 
         
        
    //close our table when done... 
         
        
    $display_block .="</tr></table></div>"
         
        
    //show our work! 
         
        
    echo $display_block
    ?>
    3) copy the following code into a new page in your image gallery and name it slideshow.php:
    PHP Code:
    <?php

         
     
    *******************************************************************************
                                    
    MODIFY YOUR HTML
     
    *******************************************************************************
     
     
    You'll want to use your own markup in the "PRINT HTML" section (see below) so 
     that it corresponds to your site design preferences. It should be fairly simple
     to figure out the variables used in the markup and their meanings:
     
        $title    = the title of the slideshow (found in title.txt; see above)
        $num_pics = the total number of images in the current directory
        $photos   = array containing the names of the images
        $image    = index into photos array
        $prev     = the previous displayed image
        $next     = the next image to be displayed
                    also used to specify the number of the current image displayed
        
     *******************************************************************************
                                      CODE SECTION
     ******************************************************************************/

    // look for picture files in current directory and add them to photos array
    $dir = $_GET['
    dir'];
    $current_dir = opendir("$dir");
    while ($file = readdir($current_dir)) {
        if (eregi("(\.jpg|\.gif|\.png)$", $file)) $photos[] = $file;
    }
    closedir($current_dir);
    // check to see if images were found in directory; if no images were found,
    // alert user through $title on webpage
    if ($photos == null) $title = "There are no pictures in this directory!  ";
    // images were found; sort them
    else sort($photos);

    // read title of slideshow from title.txt
    if (file_exists('
    title.txt')) { 
        $title_file = file('
    title.txt'); 
        $title = $title.$title_file[0];
    }
    // no title.txt file was found; alert user through $title on webpage
    else $title = $title."You did not supply a title.txt file!";
       
    // get total number of pictures 
    $num_pics = count($photos);

    // if image number is not specified, set it to the first image
    if (empty($image)) $image = '
    0';

    // if user is on the last image or if the image number specified is greater than
    // the number of pics available in the directory, start user at first image
    if (($image == $num_pics) || ($image > $num_pics)) $image = '
    0';

    // setup the link for the next image
    $next = $image + 1;

    // setup the link for the previous image
    if ($image == '
    0$prev $num_pics 1;
    else 
    $prev $image 1;

    /*******************************************************************************
                                       PRINT HTML
     ******************************************************************************/

    print <<< PRINT_PAGE
    <!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" xml:lang="en" lang="en">
    <head>
    <link rel="stylesheet" type="text/css" media="screen" href="PUT_YOUR_HOME_PAGE_HERE" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="PUT_YOUR_HOME_PAGE_HERE" />
    <meta name="description" content="PUT_YOUR_CONTENT_HERE" />
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <title>PUT_YOUR_COMPANY_NAME_HERE | Customer Installs | $title</title>
    </head>
    <body>
    <div id="container">
    <div id="photos">
    <h3>$title <span class="tiny">($next of $num_pics)</span></h3>
    <a href="?dir=$dir&image=$image"><img src="$dir/$photos
    [$image]"></a>
    <br />
    <p><a href="?dir=$dir&image=$prev">&laquo; prev</a> &middot; <a href="PUT_YOUR_HOME_PAGE_HERE">NAME_YOUR_LINK_HERE</a> &middot; <a href="?dir=$dir&image=$next">next &raquo;</a></p>
    </div>
    </div>
    </body>
    </html>
    PRINT_PAGE;
    ?>
    4) Last, create folders in your gallery folder for each set of images, and upload your pics. Then edit or include the gallerytable and slideshow code to match your website. The gallerytable.php code will search your image directory and build a nice table with an image from each folder and a link to launch slideshow.php with the correct folder of images. If you make a simple gallery.txt file for each folder, you can insert a description that will show on mouseover of the gallery images, and if you make a title.txt file in each folder you can have a picture description for each photo as well (one description per line; make sure your images are named in a way to preserve the order eg: img1,img2,etc) DON'T PUT ANY OTHER FILES IN THE ROOT IMAGE DIRECTORY THAT ARE IMAGES!
    I have found that the code works very nicely if you add the gallerytable.php code to the top of my regular web page template and just move the
    PHP Code:
     echo $display_block 
    down to the body portion, and then do the same with the slideshow.php code, only this time echo the <BODY> portion of the "PRINT HTML" section in the body.
    Looks good and works quick! If you come across an issue I would love to know; certainly not posting junk on purpose!
    Happy viewing!
    Andy
    (Management+Coworkers)<>Logic

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    OOOPS!!
    In the instructions I advise you to name the slideshow portion slideshow.php, and this is wrong. It should be galleryslideshow.php
    Sorry!
    Andy
    (Management+Coworkers)<>Logic

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    u can just edit your original post, would avoid ppl not reading your reply.

  • #4
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can you link to an example of this slideshow online?

    I have never done a php website slideshow before and am trying to apply your solution. However it would be great to see what the solution produces. Thank you, ami

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Sure Ami,
    http://michaelsappliance.com/gallery/gallery.php
    This is the code at work, nested inside one of our website templates. the code itself will produce a white page with the photos on it, and you can integrate it into a web page very easily. if you need help just let me know.
    Andy
    (Management+Coworkers)<>Logic

  • #6
    New to the CF scene
    Join Date
    Dec 2008
    Location
    Gold Coast OZ
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi
    I have tried to impliement your PHP slide show however I cannot get it to function correctly...I am missing something?? Have followed your instructions but slide show will not load. may I please have more detailed instructions as this piece of code looks really good and would greatly assist me...
    Cheers

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Good morning!
    did you catch the piece about naming the slideshow galleryslideshow.php instead of slideshow.php? That was an error in the original post, and everything else should be fine. If the naming doesn't do it, post back with what it is doing and I'll help you sort it out. This code works really well and is easy to implement...
    (Management+Coworkers)<>Logic

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    84
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Has anyone follow this code?

    I'd copy and created to files

    galleryslideshow.php

    and

    gallerytable.php

    both files are in the same folder as my pictures.
    I just got lost in trying to modify it to my webpage.

    I have to be honest, my comprehension is not too good.

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    This code has at least a minor security gap. To illustrate:

    Try to visit this link:
    http://michaelsappliance.com/images/

    You will get an access forbidden page. The author does not want you to browse through his images directory.

    Now, try to visit this link:
    http://michaelsappliance.com/gallery...dir=../images/

    This allows us to browse every image file contained within /images/ folder which the author clearly did not intend.

    Just a word to the wise that you may want to restrict the filepaths available to this script to be ONLY those in which the file exists (and the subfolders in that directory).
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hey Rowsdower!
    Ah, the code isn't the issue; it's my lazy-@$$ed CHMODS!
    Thanks for pointing that out!
    Actually, we would normally allow a user to browse all of the images, so the first restriction is wrong. But to be clear you are correct if you want to restrict browsing then the code will need a little tweak...
    Andy
    (Management+Coworkers)<>Logic

  • #11
    New Coder
    Join Date
    Feb 2010
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    does anyone know what kind of .tpl coding I have to do to get this to show up? I've uploaded the php files, did name change, but it still isn't showing up because I need to code it for my .tpl file.

    thanks

  • #12
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Dobber,
    changing the .php extension to .tpl is not a good idea, as page will show the source code and that is not good. See http://www.webmasterworld.com/forum88/11899.htm for some more on this...
    Andy
    (Management+Coworkers)<>Logic

  • #13
    New Coder
    Join Date
    Dec 2009
    Posts
    32
    Thanks
    1
    Thanked 3 Times in 3 Posts
    The code is great but when your at the end of the slide show there is no proper handling for the redirect or return to gallery as stated in this error from the example website
    http://michaelsappliance.com/gallery...l_NY__&image=5

    Code:
     
    Warning: Division by zero in /data/14/1/92/67/1255067/user/1338746/htdocs/gallery/galleryslideshow.php on line 292
    Otherwise this code is great.

  • Users who have thanked dominicdinada for this post:

    steamngn (04-12-2010)

  • #14
    Regular Coder
    Join Date
    May 2004
    Location
    Hudson Valley, NY
    Posts
    147
    Thanks
    6
    Thanked 0 Times in 0 Posts
    dominic,
    thanks for pointing that out; actually, the code on the website is being improved, and I did have image checking in there, just in the wrong place!
    When I finish fixing this up the rest of the way I will post the new and improved code. I'm adding the ability to pull photo group and individual image text for descriptions and mouseovers.
    Andy
    (Management+Coworkers)<>Logic

  • #15
    New Coder
    Join Date
    Dec 2009
    Posts
    32
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by steamngn View Post
    dominic,
    thanks for pointing that out; actually, the code on the website is being improved, and I did have image checking in there, just in the wrong place!
    When I finish fixing this up the rest of the way I will post the new and improved code. I'm adding the ability to pull photo group and individual image text for descriptions and mouseovers.
    Andy
    Well I must first off say that I did not realize that this post was from 2007 and someone bumped it. I felt dumb after I realized it was from way back. No problem in reporting errors encountered to you and I look forward to the updated script.


  •  

    Posting Permissions

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