Dynamic Image Gallery with PHP Bootstrap jQuery flipLightBox & Lazy Loading

Last Updated on August 16, 2023 by Subhash Jain

In this example, I will demonstrate you how to create the dynamic image gallery with the help of PHP, Bootstrap, jQuery, Images Lazy Loading and flipLightBox. Please note that we will not be using MySQL to create this image gallery.

• We have created a PHP class DynamicGallery with two methods myDirContent & myGallery.
• Method DynamicGallery::myDirContent – returns list of image files in the form of array.
• Method DynamicGallery::myGallery – displays image gallery in the bootstrap grid. We have used flipLightBox – a free Responsive Lightbox jQuery Plugin that is extremely easy to implement. We have also used image lazy loading so that the gallery can load faster.

Let us discuss DynamicGallery::myDirContent method. We have to pass image directory path as an argument so that this function can iterate over the list of images and return as array. Please note that we have omitted if dot and double dot exists in the directory as file.

<?php
            /**
            * Get List of files from the directory
            * 
            * @param string $dir location of directory
            * @return array list of files in the directory except Dot and Double Dot
            */            function myDirContent($dir){

                // The is_dir() function checks whether the specified file is a directory.
                // This function returns TRUE if the directory exists.
                if(is_dir($dir)){
                    // Open a directory, and read its contents
                    if($handle = opendir($dir)){
                        
                        while (($file = readdir($handle)) !== false){
                            
                            if( ($file != '.') && ($file != '..'))
                            {
                                $myfile[] = $file;
                              
                            }
                            
                        }
                    // close dir
                    closedir($handle);
                    } // if 2nd close
                    return $myfile;
                } // if 1st close
                else 
                {
                    // Error Handling: First argument error message; Second argument error code
                    throw new Exception ('Directory does not exist at given location!', 
                        self::INPUT_DIR_LOCATION_ERROR);
                }      
            }
        ?>

Let us discuss DynamicGallery::myGallery method. We have to pass item_per_row, dir_path for images location, image_path for showing images via HTML image tag, image_alt for SEO. In bootstap, maximum grid allowed per row is 12. Let us assume that we want to keep 4 images per row then col size($b4_col) = 3. The maths behind it 12/4 =3. The next step is to run a loop taking into account images_count.

<?php

            /**
            * This function will show Image Gallery Dynamically via Bootstrap 4 Grid System
            * 
            * @param int $item_per_row 
            * @param string $dir_path for images location
            * @param string $image_path for showing images via HTML Image Tag
            * @param string $image_alt for SEO
            * @return string will show image Gallery via bootstrap HTML grid code!
            */            public function myGallery($item_per_row, $dir_path, $image_path, $image_alt){
                    $directory = $dir_path; 
                    // Get Images total, not able to capture file names
                    $total_images = glob( $directory."*" );
                    //print_r($total_images);
                    $images_count = count($total_images);
                    // Get Images names except DOT and double DOTs 
                    $my_files = $this->myDirContent($directory);
                
                $html = '';
                $max_grid_size = 12;
                // grid no = if we want 2 or 3 box/grid in one row
                $grid_per_row = $item_per_row;
                // col siz($b4_col)e = if 2 grid_per_row then size 6; if 3 grid_per_row 4
                $b4_col = $max_grid_size/$grid_per_row;
                $total_item = $images_count;
                $counter = 0;
                for($i = 0; $i  < $total_item; $i++)
                {
                    
                    if($i % $grid_per_row == 0)
                    {
                        $html .= ' <div class="row mb-3">'; /* OPEN ROW */                    } 
                    // BOF Column HTML Code for each Row
                    $html .= ' <div class="col-'.$b4_col.'" >
                     <a class="flipLightBox" href="'.$image_path.$my_files[$i].'">
                     <img data-src="'.$image_path.$my_files[$i].'" class="img-fluid img-thumbnail lazy" alt="'.$image_alt.'">
                     <span> </span>
                     </a>';
                    //echo "counter:". $counter; 
                    //echo $one_row_item;
                    $html .= ' </div>';
                    // EOF Column HTML Code for each Row
                    if(($counter == $grid_per_row-1 ) OR ($i == $total_item-1))
                    { 
                        $html .= '  </div>'; /* CLOSE ROW */                    }
                    $counter++;
                    if($counter == $grid_per_row)
                    {
                        $counter = 0;
                    }
                }
                echo $html;  
                //print_r($my_files);  
                //echo  $directory;
            }

        ?>

In the gallery display page, we need to include this JS file path and snippet for fliplightbox initialization.

<script type="text/javascript" src="js/fliplightbox.min.js"></script>
    <script type="text/javascript">$('body').flipLightBox()</script>

In the gallery display page, we need to include this JS file for images lazy loading. Apart from this, in HTML tag, we need to include css class lazy and data-src HTML tag instead of img src tag

<script type="text/javascript" src="js/lazy-load-images.js"></script>