Simple Photo Album / Slide Show Generator

I need a script or html coding that will enable me or my users to have a slide show of images. …there is a single image on the home page, that I would like to rotate like a banner - I expect the script here would do that, but inside there are albums. I want visitors to be able to watch a slide show in any album.

webranger

OK. The main issue is to gather images from your server folder. Javascript can’t do this. So we have to use a PHP-script to scan your server folder and generate a slide-show Javascript.


How to install this script

1) Download this ssg-album.php script, unzip and upload it onto your site beside your main page (index.php).
2) Insert a PHP-code like below into your page in place where you would like to see the slide-show:

<p align=”center”>
<?
$ssg_album_idle = 5;
$ssg_album_dir = "images";
$ssg_album_shuffle = true;

include("ssg-album.php");
?>
</p>

The $ssg_album_idle variable defines the slide delay in seconds.
The $ssg_album_dir variable defines your album folder with images (relative to the main page).

How it works

Let’s look into the script you’ve downloaded above.

This code below scans the specified folder and collects JPG, PNG and GIF images.

<?php

  chdir($ssg_album_dir);
  $imgList = array_merge(glob("*.jpg"), glob("*.png"), glob("*.gif"));

This code generates a Javascript array with all images of your folder.


$i = 0;
foreach ($imgList as $img) {
 $size = getimagesize($img);
 print "SSG_IMG_LIST[$i] = new Array();"
  . " SSG_IMG_LIST[$i][0] = \"$ssg_album_dir/$img\";"
  . " SSG_IMG_LIST[$i][1] = {$size[0]};"
  . " SSG_IMG_LIST[$i][2] = {$size[1]};\n";

}

Finally, this Javascript code is a slide show engine.


var SSG_IMG_CURRENT = 0;
function ssg_album_show() {
 var imgTag = document.getElementById("SSG_IMG_TAG");
 if (imgTag) {
  imgTag.src = SSG_IMG_LIST[SSG_IMG_CURRENT][0];
  imgTag.width = SSG_IMG_LIST[SSG_IMG_CURRENT][1];
  imgTag.height = SSG_IMG_LIST[SSG_IMG_CURRENT][2];
  setTimeout("ssg_album_show()", <?=$delay?>);
 }
 if (++SSG_IMG_CURRENT >= SSG_IMG_LIST.length) SSG_IMG_CURRENT = 0;
}

 

by Michel Komarov, © Copyright 2006. iCoder.com

 

Share in social bookmarking:These icons link to social bookmarking sites where readers can share and discover new web pages.  digg del.icio.us BlinkList Reddit NewsVine YahooMyWeb co.mments

15 Responses to “Simple Photo Album / Slide Show Generator”

  1. hafiz Says:

    thanks!. good script.
    but i got error if i have php include locate after this code.
    something like path error
    do you have solution?

  2. michel Says:

    Hi Hafiz,

    Many thanks for your note.
    You’re right, the script changed the current directory.
    This caused `path error` of the rest include statements.

    The bug has been fixed.
    Please download the fixed zip with the same download link.

    I hope this helps.
    Michel

  3. hafiz Says:

    Thanks for the update and now the bug fixed.
    but we have another problem.
    Slide not run.. :D

  4. Arnie Says:

    Hi Michel

    The new script works perfect for me, as long as the ssg-album.php and the code page is in the same directory as the images.
    If, on the other hand, the images is in another directory, an image might be displayed, but it will not shuffle.
    And if you have several of the include-code snippets on the same page, only one will shuffle.

    The javascript code seems to default to “./image_name.jpg” even if you set the full server path in both the ssg-album AND the file displaying the slideshow.
    (like /home/username/public-html/images/subdirectory” ), or a domain-based directory path -
    (like “/images/subdirectory” or using a relative path -
    (like “../images/subdirectory” ) - or a path relative to a /subdirectory and file located in a subdirectory -
    (like “www.domain.com/some-directory/file_with_the_include-code.php” )

    be set (both in “slideshow.php” and “ssg-album.php” files)?

    Best regards

  5. michel Says:

    Hi Hafiz & Arnie,
    You’re right! The bug wasn’t fixed completely :-)
    Thanks for your help.

    It has been finally fixed now.

    I have a test page at http://askmichel.icoder.com/wp-content/test.php
    The ssg-album.php is loaded from a sub-folder:
    $ssg_album_dir = "uploads/2006/08/";
    $ssg_album_idle = 5;
    $ssg_album_shuffle = true;

    include("ssg-album.php");

    It works now.
    Please download the new version with the same link once again.

    Michel

  6. Arnie Says:

    Michel,

    The script works perfect now !

    My next question; Is it possible to use more than one instance of the script (i.e. have several shuffling images on the same page) with different delay settings)?

    I tried putting 3 code snippets (with different time settings) on the same page - but only the first image would shuffle (although every batch of images was written to the page). The first batch of images (image #1) shuffled through - displaying with all the different “idle” pauses.

    I tried to name the script files “ssg-album1.php” to “ssg-album3.php” but no success.

    Which variables in the script would you change to make it possible to generate more than one set of image arrays, making it possible to display multiple slide-shows on one page?

    I also tried a search-and-replace of “ssg_album_” and replaced it with “ssg_album1_” –> “ssg_album3_”
    - but no javascript code was written to the page.

    Do you see any solutions to this?

    Thank you again Michel, for making this script available.

    Regards
    Arnie

  7. michel Says:

    Hi Arnie,

    The Multi-Instances version is available.
    Now you can include as many slide-shows as you like into the same page.

    The Download link is the same.

    My test page http://askmichel.icoder.com/wp-content/test.php
    <?php
    $ssg_album_dir = "uploads/2006/08/";
    $ssg_album_idle = 5;
    $ssg_album_shuffle = true;

    include("ssg-album.php");
    ?>
    ...
    <?php
    $ssg_album_dir = "uploads/2006/08/";
    $ssg_album_idle = 10;
    $ssg_album_shuffle = true;

    include("ssg-album.php");
    ?>

    Michel.

  8. Arnie Says:

    What a beauty!

    It runs like clockwork ;)

    Thanks Michel!

    Arnie

  9. webranger Says:

    Michel,

    You originally made this script at my request, and assisted me in getting it working right on a php site.

    However, I now want to use it on other sites which are html. I have just tried it - with a new download - and have a problem - the images it finds to list are in the same folder as the index.html (which is a subfolder, not public_html), but it then looks for them in the /slideshow folder - and doesn’t find them, of course.

    The ssg-album.php is in the same folder as the index.html file and in the /slideshow folder. If I put it in the /slideshow folder only, nothing happens at all. I tried changing the line to include(”slideshow/ssg-album.php”) but that didn’t work either.

    Could you please tell me how to get the get the script to look in the /slideshow folder for the list? I can see that it works OK if it has the correct image names.

  10. michel Says:

    Hi Peter,

    If you have the ssg-album.php and the images in the same folder
    use the dot as the $ssg_album_dir variable value:
    $ssg_album_dir=”.”;

    Note, .html pages can’t execute a php-codes.
    So the include(”ssg-album.php”); may not work inside the index.html

    You have to use a .php page to get the script included.
    Or you have to set your server to process the index.html file as .php

    I hope this helps.

    Michel

  11. webranger Says:

    Michel,

    Since your last reply I have been succesfully running this script on a php page on one site. Now I’m trying to do the same on another site, but it isn’t working. I’ve replaced the code for a single image with the script and changed the page name to php and I cannot see what is the problem.

    I copied both the ssg-album.php and the lines of script from the other site, the slideshow folder name is the same; I’ve tried everything I can think of. What can be the problem?

  12. webranger Says:

    Michel,

    I guessed the answer immediately after hitting the submit button just now. The images in the slideshow folder are listed as .JPG, just because the originator used caps. The single image I have used up until now was one of these and it worked OK, but I suppose your script calls for .jpg’s and .JPG’s are ignored.

    Anyway, it’s OK now.

  13. michel Says:

    Hi Peter,

    Yes, you’re right.
    The Unix filenames are case-sensitive.

    You either need to rename the files with lower-case names
    or you could adjust the ssg-album.php script to get it working with .JPG

    Open the ssg-album.php file with a text-editor and find the line:

    $imgList = array_merge(glob("*.jpg"), glob("*.png"), glob("*.gif"));

    and add codes with .JPG:

    $imgList = array_merge(glob("*.jpg"), glob("*.png"), glob("*.gif"),
      glob("*.JPG"), glob("*.PNG"), glob("*.GIF"));

    Michel

  14. webranger Says:

    Hi, Michel,

    You provided this for me 3.5 years ago - how time flies - and I use it on several sites and multiple pages, but I wonder if there is an adjustment to the code that would make the transitions intermingle or slide or whatever?

    (I\’ve not had new emails from you for a long time now. Maybe a fault at my end. Please use [moderated] )

  15. michel Says:

    Hi Peter,

    There wasn’t any adjustment since 2007.

    This is a simple javascript script to change one image with another.
    It can’t make the transitions intermingle or slide.

    You would need to use a Flash object to rotate images with video-effects.
    Unfortunately I don’t work with Flash.

    Michel

Got a question?   Leave a Reply

You must be logged in to post a comment.