How to make Photo Gallery from image Directory with PHP

When you have the large collection of images files in a directory and you want 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 is better but in this post, I will only show you how to implement the third solution with PHP.

How to make photo gallery from image directory with PHP


  1. Download and Include
  2. HTML and PHP
  3. CSS
  4. jQuery
  5. Demo
  6. Conclusion

1. Download and Include

  • 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=""></script>
<script type="text/javascript" src="simplelightbox-master/dist/simple-lightbox.js"></script>

2. HTML and PHP

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 looks like this –

How to make Photo Gallery from image Directory with PHP

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 uses 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">
  // 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) && 

       <!-- Image -->
       <a href="<?php echo $image_path; ?>">
        <img src="<?php echo $thumbnail_path; ?>" alt="" title=""/>
       <!-- --- -->

       // Break
       if( $count%4 == 0){
         <div class="clear"></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'>

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


5. Demo

View in a new tab.

6. 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.

If you found this tutorial helpful then don't forget to share.
Spread the love
  • 1


  1. Josh said:

    Would be awesome if you could read the photo description from a text file. Would be good for SEO and you could add the description to the photo viewer.

    Thanks for the TUT, i put it on my CV site.

    I modified the CSS to fit all images in the frame so nice and tidy.
    object-fit: cover;
    height: 10vw;

    October 29, 2017
  2. Jens said:

    could you show us how to dynamically add new photos to the gallery? I got a Photobox and a want to use this gallery on my webserver. If new photos are in the images folder i want to see them in the gallery too.

    February 22, 2018
    • Yogesh Singh said:

      Hi Jens,
      I will try to publish a tutorial on this in next few days. Subscribe to the blog to get notified.

      February 22, 2018
  3. Ad van Rossum said:

    Dear Sir,
    I found your gallery maker on the web.
    I like it very much but there are a few things I seem not be able to control.
    1. some pictures are not displayed in the correct orientation.
    2. I do not understand the sorting. The pictures are not displayed in the order of the directory. To me it is like it is a random sort!
    Maybe you can give me an indication how I can control the orientation and the sorting.

    Greetings, Ad van Rossum

    July 13, 2018
    • Yogesh Singh said:

      1. To fix this you can set the height of images.
      2. For example, if you want to sort according to image name then use Array. Create an associative array and initialize it with thumbnail path and image path while reading files. You can get image name from the image path by extracting it.

      e.g. $images_arr[‘imagename 1’]= array(‘thumbnail’=>$thumbanil_path,’image’=>$image_path);

      Now sort the array by key ( image name ) using arsort() and loop on it to create images.
      I hope helps.

      July 13, 2018
  4. Ad van Rossum said:

    Dear sir,
    1. set the height of image???
    Where in the script?
    Example please.


    July 13, 2018
    • Yogesh Singh said:

      Set max and min height (style=’max-height: 200px;min-height: 200px;’) on tag inside the loop while reading files from the directory.

      July 14, 2018
  5. Ad van Rossum said:

    Do you mean somethin like this”?
    <a href="”
    <img style="max-height:40px;max-width:80px;height:auto;width:auto"
    src="” alt=”” title=””/>

    This had no effect on orientation only made thumbs smaller!!

    July 14, 2018
  6. Chad said:

    You didnt include an index.html in your zip file?

    how do I start the website.

    I click index.php and it opens a text editor?

    I’m on a MAC.

    December 12, 2018
    • Yogesh Singh said:

      You need to run it with localhost on your system.

      December 14, 2018
  7. Max said:

    great article! How could i show the file name of the images underneath and add a way to click and download the image?

    January 14, 2019
    • Yogesh Singh said:

      Hi Max,
      The plugin I used in the example not allows what you are asking. You can either use any other plugin or customize the plugin.

      January 15, 2019
  8. Ravi said:

    Downloaded all codes however not getting desired result. Please have a look of “” and suggest the update.

    March 4, 2019
    • Yogesh Singh said:

      You need to reduce the size of the images or fix the width and height of images.

      March 5, 2019
  9. John said:

    A very nice and handy little program to use.

    March 16, 2019
  10. mohsin said:

    actually i want image gallery like this , but want to download a file related to it. for example I will show a chair model image loaded automatically and when clicked it should download a zip file which has the 3dmodels and related to it can it be done with this script

    March 25, 2019

Leave a Reply

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