Hi everyone! This tutorial is about on how to create an images slideshow using PHP and Simple jQuery. This program requires only a few lines of code. The source code file contains only a simple CSS, Images Container/HTML, jQuery Scripts, and PHP script for listing all the images from a directory. The script is easy to understand.
Now, we will be creating a simple web application and our main goal is to display the slideshow in an HTML container and each slide will be shown at every specific time using the fade-in animation. To this, follow the steps below.
Since we will be using a PHP Language, we will have to use a local web server to tun pur PHP Script such as XAMPP/WAMP. Then, start the Apache.
Open your text editor such as Notepad++, Sublime, or etc. and paste the code below and save it as "slideshow.php."
<style> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; margin:0 auto; background: #ebebeb; padding: 10px; } .fadein img{ position:absolute; width: calc(96%); height: calc(94%); object-fit: scale-down; } </style>
Copy and Paste the code below after the style tag in the file "slideshow.php".
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(function(){ $('.fadein img:gt(0)').hide(); }); </script>
Copy and paste the code below after the script tag of "slideshow.php". Store your images to show on a folder. In my case, I stored the images in a slider directory.
<div class="fadein"> <?php // display images from directory // directory path $dir = "./slider/"; foreach($scan_dir as $img): continue; ?> <img src="<?php echo $dir.$img ?>" alt="<?php echo $img ?>"> <?php endforeach; ?> </div>
<html lang="en"> <head> <title>Simplest jQuery Slideshow</title> <style> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; margin:0 auto; background: #ebebeb; padding: 10px; } .fadein img{ position:absolute; width: calc(96%); height: calc(94%); object-fit: scale-down; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000); }); </script> </head> <body> <div class="fadein"> <?php // display images from directory // directory path $dir = "./slider/"; foreach($scan_dir as $img): continue; ?> <img src="<?php echo $dir.$img ?>" alt="<?php echo $img ?>"> <?php endforeach; ?> </div> </body> </html>
There you go, you've been successfully created your image slideshow with very few lines of code. I hope this simple PHP tutorial will help you with what you are looking for.
I also included the file in this tutorial. You can download the file and run it on your computer.
Enjoy Coding !!