How to make Photo Gallery from image Directory with PHP

When you have the large collection of images files on a directory and you wants to convert it into the 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 future.

Solution 2

Store image names in the Database table and use it to get images.

Solution 3

Read all files from target directory and generate photo gallery.

The second and third solution are better but in this post, I will show you how to implement the third solution with PHP.

How to make photo gallery from image directory with PHP


Contents

  1. HTML and PHP
  2. Demo
  3. Conclusion

 

1. HTML and PHP

Set Library

  • I am using simplelightbox jQuery library for making the gallery which you can download it from here.
  • Include simplelightbox.min.css and simple-lightbox.js.
<link href='simplelightbox-master/dist/simplelightbox.min.css' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="simplelightbox-master/dist/simple-lightbox.js"></script>

Read files and create layout

Reading files from a directory with PHP.

  • I am reading files from images directory which also have sub-directory thumbnail.
  • The directory and file structure look like that –


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>

Explanation –

Specified valid image extensions in an Array ($image_extensions) and target directory ($dir). You can replace it with your directory name.

Read all files from the directory and set thumbnail and image path.

If it a valid image and not a directory then use in image source.

I only use $count variable to show 4 images in a row.

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%;
}

Initialize simpleLightbox

Call simpleLightbox() method on <a> of gallery class.

<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){

 // Intialize gallery
 var gallery = $('.gallery a').simpleLightbox();

});
</script>

 

2. Demo

View in new tab.


 

3. Conclusion

You have only need to specify your target directory where you have stored your images if any file found other then image then the PHP script skip it.

You can use any other jQuery library for the photo gallery and adjust the layout.

Related Post

Spread the love

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *