Upload and Create Photo Gallery with Photobox in PHP

Photobox is a jQuery library that use to add image gallery on the webpage.

It comes with different options for customization and supports IE8+ and modern browsers.

You need to arrange images in specific order and initialize Photobox on the container to create the gallery.

In this tutorial, I am using Photobox library to create the image gallery by reading uploaded images from a directory with PHP.

Upload and Create Photo Gallery with Photobox in PHP


Contents

  1. Upload File
  2. Download Library
  3. HTML & PHP
  4. CSS
  5. jQuery
  6. Demo
  7. Conclusion

1. Upload File

Create a new upload.php file and images directory where store all image files. To store the thumbnail of images create a thumbnail directory in images the directory.

Upload and Create Photo Gallery with Photobox in PHP

Form

Create a <form> with file element and a submit button.

Upload & compress image size

On form submit define valid image extensions in $valid_ext and set upload location.

If the file extension is valid then upload the file to images/ directory and for thumbnail reduce the uploaded file size by calling compressImage().

In compressImage() function pass 4 parameters –

  • File type $_FILES['imagefiles']['type'],
  • Uploaded file location $location,
  • Thumbnail destination $thumbnail_location, and
  • Image quality 60 (You can adjust the image quality 0-100).

Completed Code

<!doctype html>
<html>
 <body>
   <?php
   if(isset($_POST['upload'])){

     // File name
     $filename = $_FILES['imagefiles']['name'];
 
     // Valid extension
     $valid_ext = array('png','jpeg','jpg');

     // Location
     $location = "images/".$filename;
     $thumbnail_location = "images/thumbnail/".$filename;

     // file extension
     $file_extension = pathinfo($location, PATHINFO_EXTENSION);
     $file_extension = strtolower($file_extension);

     // Check extension
     if(in_array($file_extension,$valid_ext)){ 
 
       // Upload file
       if(move_uploaded_file($_FILES['imagefiles']['tmp_name'],$location)){

         // Compress Image
         compressImage($_FILES['imagefiles']['type'],$location,$thumbnail_location,60);

         echo "Successfully Uploaded";
       }

     }
   }

   // Compress image
   function compressImage($type,$source, $destination, $quality) {

     $info = getimagesize($source);

     if ($type == 'image/jpeg') 
       $image = imagecreatefromjpeg($source);

     elseif ($type == 'image/gif') 
       $image = imagecreatefromgif($source);

     elseif ($type == 'image/png') 
       $image = imagecreatefrompng($source);

     imagejpeg($image, $destination, $quality);

   }

   ?>

   <!-- Upload form -->
   <form method='post' action='' enctype='multipart/form-data'>
     <input type='file' name='imagefiles' >
     <input type='submit' value='Upload' name='upload'> 
   </form>
 </body>
</html>

2. Download library

  • Download Photobox library from GitHub.

3. HTML & PHP

Create a new index.php file.

Include photobox.css and jquery.photobox.js with a jQuery library.

Read files from images directory and also thumbnail images.

Pass the image file path in <a > and <img > element.

Completed Code

<!doctype html>
<html>
 <head>
   <!-- CSS -->
   <link href='photobox/photobox.css' rel='stylesheet' type='text/css'>
   <link href='style.css' rel='stylesheet' type='text/css'>

   <!-- Script -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="photobox/jquery.photobox.js"></script>
 </head>
 <body>

   <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="<?= $image_path; ?>">
                  <img src="<?= $thumbnail_path; ?>">
                </a>
       <?php
                // Break
                if( $count%4 == 0){
       ?>
                   <div class="clear"></div>
       <?php 
                }
                $count++;
             }
          }
 
         }
           closedir($dh);
        }
      }
      ?>
      </div>
    </div>
 
  </body>
</html>

4. CSS

Create a new style.css file.

Completed Code

.container{
  margin: 0 auto;
}

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

5. jQuery

Initialize photobox on $(''.gallery) selector.

Completed Code

$(document).ready(function(){
  $('.gallery').photobox('a',{ time:0 });
});

6. Demo

Final gallery layout. View in a new tab.


7. Conclusion

I compressed the image size to display thumbnails and only allowed single file upload but you can customize it to enable multiple file upload.

If you found this tutorial helpful then don't forget to share.

Related Post

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

7 Comments

  1. Martin said:

    Hello, I want to ask you one question about width image. How to change code for the image to be 100% width?

    July 30, 2018
    Reply
    • Yogesh Singh said:

      Add following style – .gallery a img{ width: 100% !important; }

      July 31, 2018
      Reply
  2. Martin said:

    First I want to thank you for your help.
    But I do have two more question:
    1) My images (scan text) are big. I want to move image mouse (drag) or overflow. Is it posible?
    2) How to sort image the name?

    July 31, 2018
    Reply
  3. Irving said:

    How I can change the name (“rename”) the thumbnail file? the compressed one when its uploaded.

    December 13, 2018
    Reply
    • Yogesh Singh said:

      You can specify a new file name in $thumbnail_location = “images/thumbnail/thumbnail_”.$filename; in upload.php file.

      December 14, 2018
      Reply
  4. Sofia said:

    Hi!
    How do I make a “upload” button that both myself and visitors of my website can use to upload photos to this gallery?

    January 15, 2019
    Reply
    • Yogesh Singh said:

      Hi Sofia,
      You can download the tutorial code and find the upload.php file where I am allowing to upload a file and store it to images and thumbnail directory.

      January 15, 2019
      Reply

Leave a Reply

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