Amped about Web Standards

 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>

 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
}

 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
}

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

1. 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.”

2. 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

3. 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.

4. 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.’;
   }

   ?>

5. 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.’;
   }
   }

   ?>

6. 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

7. 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

8. 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

9. 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

10. 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?

11. 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..

12. 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.

13. indialike Says:
    December 14th, 2009 at 4:29 AM

    Very nice and useful tutorials to web designers,
    Thanks for posting.

14. 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

15. 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

Leave a Reply