Slideshow with images loaded from a folder

0 Domenico Venturin · June 26, 2015
In a web page, I'd like to insert a slideshow that load the images from a specific folder. I know that I have to use javascript, jquery and php. I found some solution on internet but there is always something that doesn't work how it should be. Can someone indicate to me an example or some tutorial about that?

Post a Reply

Replies

Oldest  Newest  Rating
0 Ron Butcher · June 27, 2015
I have used this tutorial and it worked pretty good for me.  It is strictly HTML, CSS, and JQuery.  No PHP in this example, but you could easily add PHP and MySQL to load the images from a database.

http://themarklee.com/2013/12/26/simple-diy-responsive-slideshow-made-html5-css3-javascript/
0 Domenico Venturin · June 29, 2015
Thanks Ron, I'll take a look. Can you suggest me a tutorial to add images using PHP?
0 Ron Butcher · June 30, 2015
I do not know of any tutorials but I can show you what I did for my site.  I am assuming you have a basic understanding of PHP and have setup a database connection before.  If not you should probably do some of the MySQL tutorials first.

You will need a database table first to put the pictures into, and you will need a folder to store the pictures in.  For my site I have a dedicated folder called 'img' and in that I will have a new folder called 'slideshow' that PHP will store the images in.

For the database table it will look something like this:


CREATE TABLE `slide_show_images` (
`img_id` INT(11) NOT NULL AUTO_INCREMENT,
`img_name` VARCHAR(120) NOT NULL,
`caption` VARCHAR(120) NOT NULL,
PRIMARY KEY (`img_id`)
);



You will need a form to input the images into the database


<?php
//  Connect to database (I use OOP style MySQLI but use whatever you are comfortable with)
$host="database host";
$dbUser="database username";
$dbPass="database password";
$dbName="database name";
$mysqli = new mysqli($host, $dbUser, $dbPass, $dbName);

//  check to see if the form has been sumitted
if(isset($_POST['submit']))
{
//  Set the location of where the file will go
$fileLocation = $_SERVER['DOCUMENT_ROOT'].'/img/slideshow/';
//  Make sure that the file does not contain any errors
if($_FILES['file']['error'] > 0)
{
echo '<h1>Error Uploading File</h1>';
}
else
{
//  Remove any spaces from filename
$fileName = str_replace(' ', '_', $_FILES['file']['name']);
//  Escape both entries to prevent any SQL Injection
$fileName = $mysqli->real_escape_string($fileName);
$caption  = $mysqli->real_escape_string($_POST['caption']);
//  Move file to its proper location
if(move_uploaded_file($_FILES['file']['tmp_name'], $fileLocation.$fileName))
{
//  Prepare query for database
$qry = 'INSERT INTO `slide_show_images` (`img_name`, `caption`) VALUES ("'.$fileName.'", "'.$caption.'")';
//  Insert image into database
$mysqli->query($qry);
//  Echo success
echo '<h1>File Uploaded</h1>';
}
else
{
echo '<h1>Error Saving File</h1>';
}
}
}
?>

<!--  Simple form that will only allow one file at a time to be uploaded.  No action means that the page will submit to itself -->
<form method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" required="required" />
<input type="text" name="caption" id="caption" placeholder="Figure Caption" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>



After you have inserted the images into your database you can pull them out on any of your pages that display the slideshow.


<?php
//  Connect to database
$host="localhost";
$dbUser="root";
$dbPass="F@Tcatrat9754";
$dbName="asite";
$mysqli = new mysqli($host, $dbUser, $dbPass, $dbName);

//  Prepare query for pulling images from database
$qry = 'SELECT `img_name`, `caption` FROM `slide_show_images`';
//  Pull image URL's from the database
$result = $mysqli->query($qry);
//  Initialize variable that will hold figure data
$figure = ''
//  Sort through results
while($obj = $result->fetch_object())
{
$figure .= '<figure class="show">
<img src="/img/slideshow/'.$obj->img_url.'" alt="" width="100%" /> 
<figcaption>'.$obj->caption.'</figcaption>
</figure>';
}
?>

<div class="diy-slideshow">
<?php echo $figure; ?> 
<span class="prev">«</span>
<span class="next">»</span> 
</div>



You will need to setup the JQuery, CSS and the remainder of the page, but this will get you the images put into your database, and allow you to retrieve them.
0 Domenico Venturin · June 30, 2015
Thanks Ron, fortunately, I have a little understanding of PHP and MySQL so I think I can try what you did suggest to me. I will let you know the progress with my website. Thank again.
0 evaldas stankunas · October 22, 2016
/images/forum/upload/2016-10-15/e5e76aab748e9af769d86c65bf1e77b8.PNG
0 evaldas stankunas · November 1, 2016
/images/forum/upload/2016-10-15/27de7547fd11fe8ae4143bc87a38a11a.PNG  please help me :(
0 Genny joe · November 18, 2016
To load images from folder using php try this script,

<?php
$path = "images/"; // path to images folder
$file_count = count(glob($path . "*.{png,jpg,jpeg,gif}", GLOB_BRACE));
if($file_count > 0)
{
    $fp = opendir($path);
    while($file = readdir($fp))
    {
        $ext = pathinfo($file, PATHINFO_EXTENSION);
        $ext_array = ['png', 'jpg', 'jpeg', 'gif'];
        if (in_array($ext, $ext_array))
        {
            $file_path = $path . $file;?>
                <a href="<?php echo $file_path; ?>"><img src="<?php echo $file_path; ?>" /></a>
        <?}
    }
    closedir($fp);
}
else
{
    echo "Sorry! There are no images in the folder!!!";
}
?>

Here's the tutorial for reference

http://www.kodingmadesimple.com/2016/11/jquery-php-image-gallery-from-folder-bootstrap.html
  • 1

PHP

107,128 followers
About

Server-side, HTML embedded scripting language used to create dynamic Web pages.

Links
Moderators