Creating an Image Gallery from Folder using PHP | Coding Cage

Creating an Image Gallery from Folder using PHP

By
Creating an Image/photo gallery from a folder or directory of pictures, images using PHP is easy no MySQL database needed, so in this tutorial i am going to tell you that how to create image,photo gallery using PHP from an images folder, here using some few lines of PHP code you can generate image gallery or thumbnails to display images from folder and show as a thumbnails on browser easily, so take a quick look at this tutorial.
Creating an Image Gallery from Folder using PHP
 

PHP Script

following is the PHP Script which will generate a photo gallery as thumbnails and show images on browser.
create new folder named "images" and put some images inside the created folder, and create new PHP file and paste the following code within HTML <body> </body> tag and save it as "index.php" outside the images folder.

<?php
$folder_path = 'images/'; //image's folder path

$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);

$folder = opendir($folder_path);
 
if($num_files > 0)
{
 while(false !== ($file = readdir($folder))) 
 {
  $file_path = $folder_path.$file;
  $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
  if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') 
  {
   ?>
            <a href="<?php echo $file_path; ?>"><img src="<?php echo $file_path; ?>"  height="250" /></a>
            <?php
  }
 }
}
else
{
 echo "the folder was empty !";
}
closedir($folder);
?>

"glob()" function returns an array of files and directories matching a specified pattern and it will count the number of files in the given directories/folder, and returns true or false. "GLOB_BRACE" was used to expand {a,b,c} to match 'a','b',or 'c'.

The CSS/Stylesheet

add some css stylesheet to make image gallery looks better, you can add javascript also to make it awesome.

body
{
 background:#fff;
}
img
{
 width:auto;
 box-shadow:0px 0px 20px #cecece;
 -moz-transform: scale(0.7);
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.7);
 
 -ms-transform: scale(0.7);
 -ms-transition-duration: 0.6s; 
}
img:hover
{
  box-shadow: 20px 20px 20px #dcdcdc;
 -moz-transform: scale(0.8);
 -moz-transition-duration: 0.6s;
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.8);
 
 -ms-transform: scale(0.8);
 -ms-transition-duration: 0.6s;
 
}

Complete Script / index.php

this is the complete script copy paste the following code and try to creating image gallery by adding some extra functionalities.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating an Image Gallery From Folder using PHP</title>
<style type="text/css">

body
{
 background:#fff;
}
img
{
 width:auto;
 box-shadow:0px 0px 20px #cecece;
 -moz-transform: scale(0.7);
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.7);
 
 -ms-transform: scale(0.7);
 -ms-transition-duration: 0.6s; 
}
img:hover
{
  box-shadow: 20px 20px 20px #dcdcdc;
 -moz-transform: scale(0.8);
 -moz-transition-duration: 0.6s;
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.8);
 
 -ms-transform: scale(0.8);
 -ms-transition-duration: 0.6s;
 
}
</style>
</head>
<body>
<?php
$folder_path = 'images/'; //image's folder path

$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);

$folder = opendir($folder_path);
 
if($num_files > 0)
{
 while(false !== ($file = readdir($folder))) 
 {
  $file_path = $folder_path.$file;
  $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
  if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') 
  {
   ?>
            <a href="<?php echo $file_path; ?>"><img src="<?php echo $file_path; ?>"  height="250" /></a>
            <?php
  }
 }
}
else
{
 echo "the folder was empty !";
}
closedir($folder);
?>
</body>
</html>
Hope you guys like this tutorial, and please don't forget to share.




30 comments:

  1. This is interesting that create the gallery image by using few lines of PHP and mySQL. As people know that PHP is a server scripting language, which developed in 1995 for the use of programming language. In this blog simply show that How can create gallery image. Best PHP development training institutes teaches everything of PHP to our students.

    ReplyDelete
  2. awesome work
    M so happy to find your blog...
    May god bless you

    ReplyDelete
  3. How can be add previous and next buttons or slideshow view?
    Pls explain that

    ReplyDelete
    Replies
    1. Hi Swati :)
      Thanks for blessing,

      And you must use jQuery Plugins for Image SlideShow View with previous and next buttons ,
      just google for this tutorial about image slideshow using jquery, you may find helpful articles...

      Delete
  4. Hi... How can show images in order ?... Now it's showing randomly...

    ReplyDelete
    Replies
    1. Hi rashid
      you can't show images in ascending or descending order , b'coz we are not fetching here images from database using select query..,these gallery are created by few lines of PHP code

      Delete
  5. Hey my friend I'm grateful for their tutorials, god bless you and multiply

    ReplyDelete
  6. I wonder how we could upload a file and multiple thumbs to a user folder, have the user ad a description, and have an automatic download button for that file.

    ReplyDelete
    Replies
    1. hello tom, for that we have to use MySQL database to store multiple thumbs with description , if i got time, i will post this script soon .:)

      Delete
  7. بسیار عالی و مفید. ممنون. موفق باشید

    ReplyDelete
  8. First, I want to thank you for the tutorial/script for it was really helpful.
    I only have a little prob' when i load on chrome it keeps loading till 30 sec and say
    Fatal error: Maximum execution time of 30 seconds exceeded in ...\NetBeansProjects\pictureGallery\public_html\machinbidule.php on line 52
    I'd be glad if you could help me

    ReplyDelete
  9. thank you , i'm grateful for the tutorial/script, i just have a problem when i use the script the webpage can't stop loading and 30 later it gives me that message

    :"Fatal error: Maximum execution time of 30 seconds exceeded in ...\Documents\NetBeansProjects\pictureGallery\public_html\machinbidule.php on line 52

    line 52 is $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
    Can you help me?

    ReplyDelete
    Replies
    1. Hello Sebastian,
      open your php.ini file and search for following and change it's value as below

      max_execution_time = 120
      post_max_size = 200M
      upload_max_filesize = 500M
      max_input_time = 60
      memory_limit = 500M

      then restart your server to take effect

      Delete
  10. Replies
    1. thanks osampas for the appreciation :)

      Delete
  11. how can i get user registeration and a login that's unique and needed one time. i don't want anyone else to register and login again aside one person. just like windows does

    ReplyDelete
  12. Im having some problems, some lines of codes show on the actual page. Not images are being displayed.

    ReplyDelete
  13. Im having some problems, some lines of code show on the actual page, also the images are not being displayed

    ReplyDelete
  14. Hi Pradeep, i'm a dummy in programming so fighting with what must be filled in these ; $file_path = $folder_path.$file;
    $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));

    site = http://www.example.com/Photogallery/

    ReplyDelete
  15. I really appreciate your post and you explain each and every point very well.Thanks for sharing this information.And I'll love to read your next post too. Animation Colleges in Jaipur

    ReplyDelete
  16. Thanks for this magnificent script! Edited it so that it will do it as a ul id="gallery", li id="gallery-item", etc. Really awesome. As I have multiple pages with galleries, I have put the php script inside a gallery.php file a php folder inside my main theme folder along with my header/footer.php and /css and /js folders etc.

    All I need to be able to do next is to be able to specify captions for individual images so if anyone has any know how with that then that'll be brilliant.

    Thanks, Jase

    ReplyDelete
  17. what this responsive in smartphone?

    ReplyDelete
  18. hey thanks for the script! It works very well!
    I tried to modify the script so that first a smaller thumbnail version is loaded and after you clicked on it, it will load the larger image. I used a different directory or to different files like that "image_228.JPG" and "image_228_tmb.JPG".

    how can i accomplish that?

    ReplyDelete
  19. hey bro can you suggest me i have 5 files type in on form like aadhar,photo,pancard how can i upload this at same time from 5 input file types

    ReplyDelete
  20. Hello Sir, your information is very nice, thanks for post, can you tell me how upload JPEG, PNG, and other format image at same time? I am also a trainee of Digital Marketing Course So I usually many images.

    ReplyDelete