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

File structure:

┣ 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


        <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"/>
            <h1>Image Gallery</h1>
        $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; ?>">
                <h3 class="caption">Title of your image</h3>


    margin: 0;
    padding: 0;
    background: #ccc;

    width: 80%;
    margin: 0px auto;
    position: relative;

    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. 


Download source code

Are you facing problems in understanding this article? download source code now