Tutorial: Dynamic slideshow with PHP & JQuery

Mar

2009

When I set out to add database driven player info at NuggetsHoops.com, I knew that I wanted to include code that would display some of the many images that I had set aside for each NBA player. I also knew that I would continue to add new pictures. Application code that could easily display old and new images, without additional effort for each added image would work best.

I had already written PHP code that could look at a folder and create a list of images to be displayed. When I ran across the powerful jQuery Cycle Plugin, I had found a great way to display them.

Let’s get coding. This tutorial depends on PHP 5, jQuery 1.2.3 or later, jQuery Cycle Plugin version 2.51 or later.

I’ll assume you already have Apache and PHP setup and running. Make sure you have a recent version of PHP 5.
Download jQuery
Download jQuery Cycle Plugin

Add the following Javascript to your PHP/HTML to enable and call the Cycle Plugin:

 javascript |   copy code | ?  
1 <script src="/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
2 <script src="/scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
3 <script type="text/javascript">
4 $(document).ready(function(){
5 	$('#myslides').cycle({
6 		fit: 1
7 	});
8 });
9 </script>

Note that there are many options and styles of animation provided by the powerful Cycle plugin.

Add the following PHP to iterate over any folder and dynamically generate img tags using any images found in the folder:

 php |   copy code | ?  
01 $directory = 'images/players/' . $row['imageName']; 
02 try {    
03 	// Styling for images
04 	echo "<div id=\"myslides\">";
05 	foreach ( new DirectoryIterator("../" . $directory) as $item ) {			
06 		if ($item->isFile()) {
07 			$path = "/" . $directory . "/" . $item;
08 			echo "<img src=\"" . $path . "\" />";
09 		}
10 	}
11 	echo "</div>";
12 }
13 catch(Exception $e) {
14 	echo 'No images found for this player.<br />';
15 }

Any img tags within an HTML element of class ‘myslides’ (or whatever you initialized the Cycle plugin with in the Javascript) will have the slideshow behavior added to it. The $row array on line 1 is referencing a database query result, but could be set in a number of ways for your specific needs. The DirectoryIterator reference on line 5 is a builtin class in PHP5.

Here’s the CSS to style the images being displayed in the slideshow:

 css |   copy code | ?  
01 #myslides {
02 width: 340px;
03 float: right;
04         padding: 0;
05         margin:  0 auto;
06 margin-top: 20px;
07 } 
08  
09 #myslides img {
10     padding: 10px;
11     border:  1px solid rgb(100,100,100);
12     background-color: rgb(230,230,230);
13     width: 320px;
14     top:  0;
15     left: 0
16 }

So, there’s a very quick walk thru a working example to generate a dynamic slideshow from any folder of images. If you’d like a full download of the code, or any further explanation, please leave a comment!

You can see this code in action by just clicking on any player’s name at the NuggetsHoops.com Roster page.

New – download the code for this Tutorial

Code for Dynamic Image Slideshow with PHP and JQuery (850)

Demo

37 Comments

37 Responses to “Tutorial: Dynamic slideshow with PHP & JQuery”

jjmc Says:
June 2nd, 2009 at 2:20 AM
Hi developer,

I have just test your code above.. and I have already put all the images under images/players/ and put all the images like 1.jpg, 2.jpg..etc.. and same as you did. how come it doesn’t work it always display “No images found for this player.”
jjmc Says:
June 2nd, 2009 at 2:21 AM
Hi developer,

I have just test your code above.. and I have already put all the images under images/players/ and put all the images like 1.jpg, 2.jpg..etc.. and same as you did. how come it doesn’t work it always display “No images found for this player.” can you email me the source code for this.. I like jquery so much

thanks and regards
alan Says:
June 2nd, 2009 at 11:48 PM
jjmc,

Make sure the path to your images folder is correct, based on lines 1 and 5 in the PHP source. I had to add “../” in the arg sent to the DirectoryIterator because my PHP file was in a subfolder, so the path to get to my images folder was ../images/players/anthony and so on. That path is relative to where your PHP file is on your server.

Hope that helps! I’ll be happy to post the full source here, but won’t be able to get to that for another day or two.
jjmc Says:
June 7th, 2009 at 5:42 AM
thanks developer for replying.. what I’ve got now is that it is now displaying the image..but my problem now is that , it is animating. it’s only shows the image.

also is it possible to do some descriptions everytime it loads the image.. can we do like that.. here is the code that i have..

can you help me on this please…or any suggestions

Untitled Document

$(document).ready(function(){
$(‘#myslides’).cycle({
fit: 1, pause: 1, height: 360
});
});

#myslides {
width: 340px;
float: right;
padding: 0;
margin: 0 auto;
margin-top: 20px;
}

#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 320px;
top: 0;
left: 0
}

<?php

$directory = ‘/test/images/players/’ . $row['imageName'];
try {
// Styling for images
echo “”;
foreach ( new DirectoryIterator(“../” . $directory) as $item ) {
if ($item->isFile()) {
$path = “/” . $directory . “/” . $item;
echo “”;
}
}
echo “”;
}
catch(Exception $e) {
echo ‘No images found for this player.’;
}

?>
san Says:
August 30th, 2009 at 12:28 PM
include (‘db_connect.php’);

$select=mysql_query(“select * from images”);
while($row=mysql_fetch_array($select))
{
$directory = ‘images/players/’ . $row['pic'];
try {
// Styling for images
echo “”;
foreach ( new DirectoryIterator(“../../” . $directory) as $item ) {
if ($item->isFile()) {
$path = “/” . $directory . “/” . $item;
echo “”;
}
}
echo “”;
}
catch(Exception $e) {
echo ‘No images found for this player.’;
}
}

?>
san Says:
August 30th, 2009 at 12:30 PM
can u please help me to debug this code.

my image is under images/player/pic1.jpg

am having this on my browser as result
No images found for this player.
thanks you
alan Says:
September 1st, 2009 at 12:11 AM
San,

It appears that your image and your directory code are not in sync. On line 7, from my example I was looking for player images in “images/players/…” while you’ve stated that placed your image in “images/player/…”.

If that’s not your issue, can you provide a link to where you are trying this?

Alan
san Says:
September 1st, 2009 at 3:11 AM
hello
am new with php and am getting confused

my main folder is images
and my images is in the folder player

can u please tell me how to write it???

thanks you..
u r so nice
san Says:
September 1st, 2009 at 4:06 AM
thanks a lot Sir,

now it is working and i have found my mistake..

but with your code, the slideshow is taking all the picture in the folder and displaying it.

but me i want to take picture that are from a dataabase

my code

$select=mysql_query(‘select photosproduit from produit where isslide=’1”)

please help me to implement this part in my code..
thank you
alan Says:
September 2nd, 2009 at 8:02 AM
Excellent – glad to hear that you got it working! I was about to post that I will be adding a zipfile of the code from this tutorial to make it easier for people to get started.

As for pulling images from a database – are you storing the entire binary image in the database or just the path to the image on your server?
san Says:
September 2nd, 2009 at 11:08 AM
Thank You
the path of the images that is inserted in the database is uploads/picture1.jpg
and the folder uploads is on my server.

can you help me please..
timska77 Says:
October 8th, 2009 at 10:38 PM
Hello,
Your script is awesome. Coupling jQuery and PHP for a slideshow like this is perfect. The only problem that I encountered is that with this code Safari loads each image onto the page for a little while until all of the images are loaded and then switches to a single image and runs the slideshow as it should. Any ideas on how to solve this? Safari is a PITA but as a mac user I always try to accommodate it.
indialike Says:
December 14th, 2009 at 4:29 AM
Very nice and useful tutorials to web designers,
Thanks for posting.
alan Says:
January 6th, 2010 at 1:08 AM
timska77 – Thanks! Strange – I don’t see that behavior in Safari 4 on Mac or PC. Are you seeing this issue with an older version of Safari?

Here’s my test example, which uses a slightly modified version of the code from this tutorial:

http://www.nuggetshoops.com/players/view.php?pid=1
Ibrahim Odeh Says:
January 30th, 2010 at 12:41 PM
Really,

Great jobs 1 million kisses & hugs is not enough for you

Appreciate your efforts.

Thank you very much
sathya Says:
April 22nd, 2010 at 2:47 AM
Appreciate your efforts.

Thank you very much
Bruce Says:
May 20th, 2010 at 10:17 PM
thanks a lot Sir,

now it is working and i have found my mistake..

but with your code, the slideshow is taking all the picture in the folder and displaying it.

but me i want to take picture that are from a dataabase

my code

$select=mysql_query(‘select photosproduit from produit where isslide=’1”)

please help me to implement this part in my code..
thank you
Bruce Says:
May 21st, 2010 at 10:59 PM
Appreciate your efforts.

Thank you very much
Alex Says:
May 28th, 2010 at 8:41 AM
How come in Safari when this first loads it displays the little “image not found” icon, but then proceeds to play the slideshow. Any ideas how to solve this? Other than that this script is absolutely perfect and exactly what I was looking for.

Cheers
alan Says:
May 28th, 2010 at 9:30 AM
I’m unable to reproduce that issue, but I’m testing with Safari 4.0.5 on Windows. Are you seeing the problem on a Mac, or on a different version of Safari? I can test on a Mac this weekend and see if I can reproduce it there.

Are you seeing the broken image when running my demo page, or when trying the script on your own?
Alex Says:
May 31st, 2010 at 6:08 PM
I am using a Mac. It only shows when I use the script on my own with my own images. On your demo page it runs fine and completely unaltered it runs fine as well. Thanks for the swift response, you’re awesome.

Cheers
lugi Says:
June 1st, 2010 at 4:01 AM
hey i am trying to implement the jquery cycle plugin in my project and i get the following error when trying to run it

” Undefined variable: row ”

my diresctory points to ‘../images/clients/’

any help?
Dorsey Prouse Says:
June 4th, 2010 at 9:30 PM
I would like to comment on this blog by adding that web standard are greatly important. Take a look at what is currently happening between HTML5 and Apple.
Software Says:
June 28th, 2010 at 10:23 AM
Congratulations! You have just won a new feed reader .. really awesome article, Mike.
60 Awesome jQuery Tutorials | Web.Dtuts - Web Development Tutorials Says:
July 5th, 2010 at 8:45 AM
[...] Read this tutorial >> [...]
jingle Says:
July 8th, 2010 at 11:51 PM
how can you do the same thing but showing on a 3 rows basis, one row is very easy , all the Cycle stuff works on one row but when it comes to fetching database and showing three rows is a nightmare
75+ jQuery Plugins: Download Powerful and Elegent jQuery Plugins & Tutorials | jQuery | Graphic Design Junction Says:
July 9th, 2010 at 7:52 PM
[...] Tutorial [...]
KP Says:
July 19th, 2010 at 4:22 PM
Hi:

I’ve been looking for a php script that automates jQuery slideshows. this is a gem of a find. thank you.

I have a quick question. I’m using this script in a cms. Any image upload will generate an auto thumbnail. how can i modify the php code to bypass the thumbnails? currently, both image1.jpg and thumb_image1.jpg are showing.

thank you.
alan Says:
July 22nd, 2010 at 1:31 AM
jingle:

Do you want to show 3 images at the same time, but pull them from a database rather than a folder on the server?

KP:

You should be able to just add a regexp to the if statement that checks if the current item is a file in the PHP file… that will filter out your auto-generated thumbnails from the CMS.

Try this new version of line 6:
if ($item->isFile() && !preg_match(‘/^thumb_/’, $item)) {

I also created a new demo to show it working. The top slideshow will display the thumbnail, the bottom one doesn’t.
KP Says:
July 23rd, 2010 at 7:21 PM
Hey Allan:

I’m no php programmer so let me make sure i understand.

I should replace

$directory = ‘uploads/images/slideshow’ . $row['image'];
try {
// Styling for images

echo “”;
foreach ( new DirectoryIterator(“” . $directory) as $item ) {
if ($item->isFile()) {
$path = “/newsite/” . $directory . “/” . $item;
echo “”;
}
}
echo “”;
}

catch(Exception $e) {
echo ‘No images found for this player.’;
}

WITH
$directory = ‘uploads/images/slideshow’ . $row['image'];
try {
// Styling for images

echo “”;
foreach ( new DirectoryIterator(“” . $directory) as $item ) {
if ($item->isFile() && !preg_match(‘/^thumb_/’, $item)) {
$path = “/newsite/” . $directory . “/” . $item;
echo “”;
}
}
echo “”;
}

catch(Exception $e) {
echo ‘No images found for this player.’;
}
KP Says:
July 24th, 2010 at 12:28 PM
Alan:

sorry to bother. I get an error with the new php line. My code currently reads:

$directory = ‘uploads/images/slideshow/’ . $row['imageName'];
try {
// Styling for images
echo “”;
foreach ( new DirectoryIterator(“” . $directory) as $item ) {
// if ($item->isFile()) {
if ($item->isFile() && !preg_match(‘/^thumb_/’, $item)) {
$path = “/newsite/” . $directory . “/” . $item;
echo “”;
}
}
echo “”;
}

catch(Exception $e) {
echo ‘No images found for this player.’;
}

the error is:
# invalid code entered.
# Parse error: syntax error, unexpected ‘^’ eval()’d code on line 7

any ideas? the website is http://keepsakefamilytreevideo.com/newsite/

thanks for your help.

kp
alan Says:
July 26th, 2010 at 10:24 AM
No problem KP – I’m happy to try and help. I think the issue might be from the way my WordPress theme has styled the characters, or the way I cut and paste the code sample.

Make sure the quote right after !preg_match is not the back-tick character. It should be a straight single quote. I think that’s why you are getting a syntax error from PHP. The ending quote also needs to be a single quote.

Let me try again to show that line of code here:

if ($item->isFile() && !preg_match(‘/^thumb_/’, $item)) {

Basically, what that line of code does is check to see if the current item in the loop IS a file and IS NOT a file starting with the name “thumb_”.

NOTE: After posting this comment, I can see it has the same issue… must be something in this theme that I need to look into. Anyway, on your keyboard, make sure you replace the quote after !preg_match( with the one below the double quotes key next to the Enter key on a standard keyboard. Also fix the ending quote immediately after ^thumb_/. If this doesn’t work, I’ll try and post the entire example file here as a download this week.

Let me know how it goes!
KP Says:
July 29th, 2010 at 11:01 AM
Alen:

Got it fixed. yes, it does need to be single quote. I don’t see very well and I did not notice the quotes were wrong. thanks for helping.
KP Says:
July 29th, 2010 at 11:02 AM
Alen:

Got it fixed. yes, it does need to be single quote. I did not notice the quotes were wrong. thanks for helping.
Niels Says:
August 13th, 2010 at 2:30 AM
Alan,

Great article, but I’ve problems with the $(document).ready(function()-function in all latest browsers: all images load shortly before the WordPress-page loads.
It’s very frustrating, because I’ve read a lot of articles about this problem.
Can you help me ?

The code in header.php:

$(document).ready(function(){
$(‘#myslides’).cycle({
fit: 1, pause: 2
});
});

<?php
$directory = 'wp-content/themes/iblog2/images/slideshow/' . $row['imageName'];
try {
// Styling for images
echo "”;
foreach ( new DirectoryIterator($directory) as $item ) {
if ($item->isFile()) {
$path = $directory . “/” . $item;
echo “”;
}
}
echo “”;
}
catch(Exception $e) {
echo ‘No images found for this slideshow.’;
}
?>

Thanks in advance,

Niels
Alex Says:
August 17th, 2010 at 9:29 PM
For anyone that was experiencing the same problem as me, I finally figured out the one broken image thing, it was because the slideshow was taking the .DS_store hidden file in the folder as an image and trying to display it, so deleting it did the trick. I feel pretty stupid lol
Alexpt Says:
August 19th, 2010 at 2:39 AM
I was looking for that php code.. works fine.. tks

Amped about Web Standards

New – download the code for this Tutorial

37 Responses to “Tutorial: Dynamic slideshow with PHP & JQuery”

Leave a Reply

Advertisements

Search Blog

Recent Posts

Categories

Recommended:

1	<script src="/scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
2	<script src="/scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
3	<script type="text/javascript">
4	$(document).ready(function(){
5	$('#myslides').cycle({
6	fit: 1
7	});
8	});
9	</script>

01	$directory = 'images/players/' . $row['imageName'];
02	try {
03	// Styling for images
04	echo "<div id=\"myslides\">";
05	foreach ( new DirectoryIterator("../" . $directory) as $item ) {
06	if ($item->isFile()) {
07	$path = "/" . $directory . "/" . $item;
08	echo "<img src=\"" . $path . "\" />";
09	}
10	}
11	echo "</div>";
12	}
13	catch(Exception $e) {
14	echo 'No images found for this player.<br />';
15	}

01	#myslides {
02	width: 340px;
03	float: right;
04	padding: 0;
05	margin: 0 auto;
06	margin-top: 20px;
07	}
08
09	#myslides img {
10	padding: 10px;
11	border: 1px solid rgb(100,100,100);
12	background-color: rgb(230,230,230);
13	width: 320px;
14	top: 0;
15	left: 0
16	}

Amped about Web Standards

New – download the code for this Tutorial

37 Responses to “Tutorial: Dynamic slideshow with PHP & JQuery”

Leave a Reply

Advertisements

Search Blog

Recent Posts

Categories

Tags

Recommended: