We are using PHP, FancyBox jQuery plugin and glob function to create an awesome photo gallery


File structure:

Glob_image_gallery/
┣ glob/
┃ ┣ SampleJPGImage_100kbmb.jpg
┃ ┣ SampleJPGImage_500kbmb.jpg
┃ ┗ SampleJPGImage_50kbmb.jpg
┣ index.php
┣ jquery.fancybox.min.css
┣ jquery.fancybox.min.js
┗ style.css

in a project directory glob is a folder where you can put your all the images

index.php 

<html>
    <head>
        <title>Gallery</title>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <script src="jquery.fancybox.min.js" type="text/javascript"></script>
        <link href="jquery.fancybox.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <main>
            <h1>Image Gallery</h1>
        <?php
        $dir = glob('glob/{*.jpg,*.png}', GLOB_BRACE);
        foreach ($dir as $key => $value) {
            ?>
            <div class="thumbnails">
                <a href ='<?php echo $value ?>' data-fancybox="images" data-caption="<?php echo $value;?>">
                    <img img src="<?php echo $value; ?>">
                </a>
                <h3 class="caption">Title of your image</h3>
            </div>
            <?php
        }
         ?>        
        </main>
    </body>
</html>


style.css

body{
    margin: 0;
    padding: 0;
    background: #ccc;
}

main{
    width: 80%;
    margin: 0px auto;
    position: relative;
}

.thumbnails{
    width: 30%;
    float: left;
    margin: 10px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
   
    
   
}

.thumbnails:hover img{
    transform: scale(2);
    transition: 0.6s;
}

.thumbnails img{
    width: 100%;
     transition: 0.6s;
}

.thumbnails .caption{
 margin-bottom: 0;
}

Plugin files jquery.fancybox.min.js and  jquery.fancybox.min.css you can download from here and link it. 


Output: