Image Slideshow Using PHP and simple Jquery

Submitted by: 
Language: 
Visitors have accessed this post 110390 times.

Hi everyone,

This tutorial is about on how to create an images slideshow using php and a simple jquery. This program requires only a few lines of code.
to start let's follow the steps below.

Step 1:Creating our style to beautify our slideshow

to create, open your php editor and paste the code bellow and save it as "slideshow.php."

  1. <html lang="en">
  2. <head>
  3. <title>Simplest jQuery Slideshow</title>
  4.  
  5. <style>
  6. body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
  7.  
  8. .fadein {
  9. position:relative; height:332px; width:500px; margin:0 auto;
  10. background: url("slideshow-bg.png") repeat-x scroll left top transparent;
  11. padding: 10px;
  12. }
  13. .fadein img { position:absolute; left:10px; top:10px; }
  14. </style>

Step 2: Creating and linking our jquery

To create, copy and paste the code below after the style tag in the file "slideshow.php".

  1. <script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2. <script>
  3. " rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  4. <...</a>$(function(){
  5. $('.fadein img:gt(0)').hide();
  6. setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
  7. });
  8. </script>

Step 3: Creating the div tag where the images display

Copy and paste the code below after the script tag of "slideshow.php".

  1. </head>
  2. <body>
  3. <div class="fadein">
  4. <img src="<a href="http://chictraveler.wpengine.netdna-cdn.com/wp-content/uploads/2010/09/Picture-91-500x332.png">
  5. <img" rel="nofollow">http://chictraveler.wpengine.netdna-cdn.com/wp-content/uploads/2010/09/P...</a> src="<a href="http://sevillespain.info/wp-content/uploads/2012/02/Casa-De-Carmona-Hotel-Seville-casa_de_carmona_galeria_mr_1200-500x332.jpg">
  6. <img" rel="nofollow">http://sevillespain.info/wp-content/uploads/2012/02/Casa-De-Carmona-Hote...</a> src="<a href="http://hereelsewhere.com/wp-content/uploads/2012/06/Chambre22-500x332.jpeg">
  7. <img" rel="nofollow">http://hereelsewhere.com/wp-content/uploads/2012/06/Chambre22-500x332.jp...</a> src="<a href="http://www.worlddesignhotels.com/wp-content/uploads/407/X%20Ordinary%20Room-500x332.jpg">
  8. <img" rel="nofollow">http://www.worlddesignhotels.com/wp-content/uploads/407/X%20Ordinary%20R...</a> src="<a href="http://armywife101.com/wp-content/uploads/2012/09/DoubleTree-Suites-by-Hilton-exterior-photo-Downtown-Disney-Resort-Area-Hotels-500x332.jpg">
  9. </div>
  10. </body>
  11. </html>

" rel="nofollow">http://armywife101.com/wp-content/uploads/2012/09/DoubleTree-Suites-by-H...

the summarize code will look like the code below

  1. <html lang="en">
  2. <head>
  3. <title>Simplest jQuery Slideshow</title>
  4.  
  5. <style>
  6. body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
  7.  
  8. .fadein {
  9. position:relative; height:332px; width:500px; margin:0 auto;
  10. background: url("slideshow-bg.png") repeat-x scroll left top transparent;
  11. padding: 10px;
  12. }
  13. .fadein img { position:absolute; left:10px; top:10px; }
  14. </style>
  15.  
  16. <script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  17. <script>
  18. " rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  19. <...</a>$(function(){
  20. $('.fadein img:gt(0)').hide();
  21. setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
  22. });
  23. </script>
  24.  
  25. </head>
  26. <body>
  27. <div class="fadein">
  28. <img src="<a href="http://chictraveler.wpengine.netdna-cdn.com/wp-content/uploads/2010/09/Picture-91-500x332.png">
  29. <img" rel="nofollow">http://chictraveler.wpengine.netdna-cdn.com/wp-content/uploads/2010/09/P...</a> src="<a href="http://sevillespain.info/wp-content/uploads/2012/02/Casa-De-Carmona-Hotel-Seville-casa_de_carmona_galeria_mr_1200-500x332.jpg">
  30. <img" rel="nofollow">http://sevillespain.info/wp-content/uploads/2012/02/Casa-De-Carmona-Hote...</a> src="<a href="http://hereelsewhere.com/wp-content/uploads/2012/06/Chambre22-500x332.jpeg">
  31. <img" rel="nofollow">http://hereelsewhere.com/wp-content/uploads/2012/06/Chambre22-500x332.jp...</a> src="<a href="http://www.worlddesignhotels.com/wp-content/uploads/407/X%20Ordinary%20Room-500x332.jpg">
  32. <img" rel="nofollow">http://www.worlddesignhotels.com/wp-content/uploads/407/X%20Ordinary%20R...</a> src="<a href="http://armywife101.com/wp-content/uploads/2012/09/DoubleTree-Suites-by-Hilton-exterior-photo-Downtown-Disney-Resort-Area-Hotels-500x332.jpg">
  33. </div>
  34. </body>
  35. </html>

" rel="nofollow">http://armywife101.com/wp-content/uploads/2012/09/DoubleTree-Suites-by-H...

Congratulation, you've been successfully created your image slideshow with a very few lines of code.

I also included the file in this tutorial. you can download the file and run it on your computer.

Hope this code helps you.


Comments

I added the code into php file, but the picture is not changing. when I execute it in a browser it is working. Plz give the solution.

thanks
but I have 2 questions:
first: how can I show it in the left - top corner of the page?
second: how can I put "Next" & "previous" buttons?

and I ask this. so? "Next" & "previous" buttons?

Thanks guys the script is the simplest image rotator i have seen but please i have another div tag which i placed absolutely to the image slider div but when the images slide, the div which was placed absolutely on the slider div also slides. Please can anyone help?? Thanks in advance

worked without any difficulty.. thank you

Works pretty good - only problem is the images are loading from top left not centre, so if you use images of different sizes they are not centred.

its very helpful, thanks

it is helpful to build dynamic slideshow

I want to use slideshow in my site. But how can I use this please help me. my site is www.ohnsoft.com

Thank you for all the positive comment i receive in this article. I will use this as an inspiration to developed more useful tutorial as much as i can. Thank guys for reading my article

very very thanks for help

very very Thanks for share this code:):x

that's so helpful! Thanks for ur share!

I need a dynamoc slide show I mean a database slide show to which I can add images dynamicaly in a cms plz send me any body my email [email protected]

Thanks Bro Its very helpful

I am creating a wordpress slider plugin, and this code helps me.
Thanks.

Wen i am strugglng in php it is very help to me thnx a lot

good job brow,.,,.,I Thank's....

c is a gal man.. tell her that "Good Job Sis.. "... ;-) :-P

thanks!!. It helped me a lot :)

i really thank you for this slide show!!!!! little but helpful

best article

Hi thanks very much for your tutorial. It works like a charm...however your title "Image Slideshow Using PHP and simple Jquery" is a tad misleading. I might be wrong but I dont seem to see any php code. It is just plain jquery.

Agreed. Works fine on my html pages and rotator would also be more accurate than slider. But not complaining, just adding more keywords so people can find it when looking for html image rotator :-) Nice tight bit of code, thanks.

Excellent! Worked beautifully and saved me a lot of time on a tight schedule. :-)

thanks for providing slideshow code. that's really helpful for me.

Worked perfectly even in drupal

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.