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 a specific order and initialize Photobox on the container to create the gallery.
In this tutorial, I am using the Photobox library to create the image gallery by reading uploaded images from a directory with PHP.
Contents
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.
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 the 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.6.0/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 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
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.
Hello, I want to ask you one question about width image. How to change code for the image to be 100% width?
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?
How I can change the name (“rename”) the thumbnail file? the compressed one when its uploaded.
Hi!
How do I make a “upload” button that both myself and visitors of my website can use to upload photos to this gallery?
How to delete image from gallery.
hey, thanks for this.
is the photobox limited to 13 images? if yes, plz assist on how to remove it
thanks for answering,
do i have to pay to remove the limitation of file viewed….?
Hi Yogesh,
Thanks for this paper and for example files, that run !
same question as other :
how to remove the images number limitation ???
hoping an answer ……
cherrs
Hi Yogesh,
I comme back … I’ve discovered that with “light weight” pictures it seams that I can upload much more images ….
in fact, it is not a number limitation for images upload but a max size I think
in my first try I didn’t use “light weight” images as I use to do when publishing ! ,
Hello, thank you so much for help!
I have a question, how can I add titles when uploading photos and display them under photos in gallery?
Hi Yogesh
Please let us know how we can create a gallery from an array that carries the names of some photos, rather than creating the gallery from a directory containing all images.
The scenario is that one directory comprises of pictures of all employees. When we open the profile of an employee, it should display pics of the same employee only that the array pics from the table “emp_pics”. So now, we need to create a gallery of only those images that are being picked from the table and put in an array.
So please tell us how we can use an array of the names of the images rather than complete directory.
Thanks
thanks for this tutorial, please how can I use unlink() in individual images uploaded
Hi Yogesh,
does the upload.php only work with photobox or can I use it also with simplelightbox, as you show in your other tutorial?
Thanks
Peter