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 script1) Download this |
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.
…
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;
}
August 22nd, 2006 at 05:27
thanks!. good script.
but i got error if i have php include locate after this code.
something like path error
do you have solution?
August 22nd, 2006 at 06:12
Hi Hafiz,
Many thanks for your note.
You’re right, the script changed the current directory.
This caused `path error` of the rest
includestatements.The bug has been fixed.
Please download the fixed zip with the same download link.
I hope this helps.
Michel
August 22nd, 2006 at 07:49
Thanks for the update and now the bug fixed.
but we have another problem.
Slide not run..
August 22nd, 2006 at 13:07
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
August 22nd, 2006 at 17:33
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.phpis 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
August 22nd, 2006 at 20:08
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
August 23rd, 2006 at 17:17
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.
August 23rd, 2006 at 20:03
What a beauty!
It runs like clockwork
Thanks Michel!
Arnie
February 7th, 2007 at 20:01
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.
February 9th, 2007 at 07:08
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
August 8th, 2007 at 12:53
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?
August 8th, 2007 at 12:59
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.
August 8th, 2007 at 13:36
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.phpscript to get it working with.JPGOpen the
ssg-album.phpfile 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