When you have a large collection of images files in a directory and you want to convert it into a photo gallery.
Solution 1
Add image file manually to your page one by one which you want to show. The problem with this solution is it is time-consuming and you have to check all image links if any update in the future.
Solution 2
Store image names in the Database table and use it to get images.
Solution 3
Read all files from the target directory and generate a photo gallery.
The second and third solution is better but in this post, I will only show you how to implement the third solution with PHP.
Contents
1. Download and Include
- I am using
simplelightbox
jQuery library for making the gallery that you can download from here. - Include
simplelightbox.min.css
andsimple-lightbox.jquery.min.js
.
<link href='simplelightbox-master/dist/simplelightbox.min.css' rel='stylesheet' type='text/css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="simplelightbox-master/dist/simple-lightbox.jquery.min.js"></script>
2. HTML and PHP
Reading files from a directory with PHP.
- I am reading files from
images
the directory which also has sub-directorythumbnail
. - The directory and file structure looks like this –
Specified valid image extensions in the $image_extensions
Array variable and target directory in $dir
.
Read all files from the directory and set thumbnail and image path.
If it is a valid image and not a directory then use the path in the image source.
I only use $count
variable to show 4
images in a row.
Completed Code
<div class='container'> <div class="gallery"> <?php // Image extensions $image_extensions = array("png","jpg","jpeg","gif"); // Target directory $dir = 'images/'; if (is_dir($dir)){ if ($dh = opendir($dir)){ $count = 1; // Read files while (($file = readdir($dh)) !== false){ if($file != '' && $file != '.' && $file != '..'){ // Thumbnail image path $thumbnail_path = "images/thumbnail/".$file; // Image path $image_path = "images/".$file; $thumbnail_ext = pathinfo($thumbnail_path, PATHINFO_EXTENSION); $image_ext = pathinfo($image_path, PATHINFO_EXTENSION); // Check its not folder and it is image file if(!is_dir($image_path) && in_array($thumbnail_ext,$image_extensions) && in_array($image_ext,$image_extensions)){ ?> <!-- Image --> <a href="<?php echo $image_path; ?>"> <img src="<?php echo $thumbnail_path; ?>" alt="" title=""/> </a> <!-- --- --> <?php // Break if( $count%4 == 0){ ?> <div class="clear"></div> <?php } $count++; } } } closedir($dh); } } ?> </div> </div>
3. CSS
.container .gallery a img { float: left; width: 20%; height: auto; border: 2px solid #fff; -webkit-transition: -webkit-transform .15s ease; -moz-transition: -moz-transform .15s ease; -o-transition: -o-transform .15s ease; -ms-transition: -ms-transform .15s ease; transition: transform .15s ease; position: relative; } .container .gallery a:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); z-index: 5; } .clear { clear: both; float: none; width: 100%; }
4. jQuery
Initialize simpleLightbox by calling simpleLightbox()
method on <a>
of gallery
class.
<!-- Script --> <script type='text/javascript'> $(document).ready(function(){ // Intialize gallery var gallery = $('.gallery a').simpleLightbox(); }); </script>
5. Demo
6. Conclusion
You only need to specify your target folder where you have stored the images if any file is found other than the image then the PHP script skips it.
You can use any other jQuery library for the photo gallery and adjust the layout.
If you found this tutorial helpful then don't forget to share.