Anime and Cartoon Photo Gallery from image directory in PHP

Creating an anime and cartoon photo gallery in PHP involves dynamically scanning an image directory on your server. This directory should contain anime and cartoon images in formats like JPG, PNG, or GIF. Using PHP, you'll generate thumbnails for each image found, ensuring efficient display and navigation. HTML and CSS will structure and style the gallery, potentially integrating JavaScript for features like lightboxes for full-size image viewing. Security measures such as input validation will safeguard against vulnerabilities like directory traversal attacks. The result is a responsive and interactive gallery that enhances user experience while showcasing your collection effectively.

  Tutorial   Jul 18, 2024   0   78  Add to Reading List
Anime and Cartoon Photo Gallery from image directory in PHP

Anime and Cartoon Photo Gallery from image directory in PHP

Featured Image 1

Anime and Cartoon Photo Gallery from image directory in PHP 

When you wish to make a photo gallery out of a sizable number of image files in a directory, this technique is advised.

1. Download and Include

The gallery was created using the simplelightbox jQuery library, which can be downloaded here.

Include simplelightbox.min.css and simple-lightbox.jquery.min.js.

 

<link href='simplelightbox-master/dist/simplelightbox.min.css' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="simplelightbox-master/dist/simple-lightbox.jquery.min.js"></script>

2. HTML and PHP

The files are sourced from the images directory which also has a sub-directory thumbnail.

Specified valid image extensions in the $image_extensions Array variable and target directory in $dir.

Read every file in the directory, then establish the paths for the thumbnails and images.

Use the path in the image source if the file is a genuine image and not a directory.

For this tutorial, we use $count variable to show 4 images in a row.

Completed Code

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

3. CSS

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

4. jQuery

Initialize simpleLightbox by calling simpleLightbox() method on <a> of gallery class.

<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){
// Intialize gallery
var gallery = $('.gallery a').simpleLightbox();
});
</script>

5. Final Notes

Only the target folder where the photos are stored needs to be specified; if any other files are located there instead of the image, the PHP  script bypasses them.

You can change the layout and use any other jQuery library for the photo gallery.

Tags

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow