PHP Gallery Script

If you have a Web site and would like to create your own gallery, you may use this simple script as the basis for your gallery. I am currenly using it for my own gallery. It’s just a one page PHP file with a function you call on the page you want the gallery to reside.

Non-Wordpress Version

If you created a page called portfolio.php, you would do this:

<?php include('header.php');
include('/gallery/php-gallery-v1.php');
?>
<div id="content">
    <?php gallery(); ?>
</div>
<?php include('footer.php');?>

There are some things that need to be set up as well. You need to create some folders for your gallery. Here’s an example structure:

/gallery for containing your gallery content

/gallery/banners for containing your main menu images

/gallery/images for containing your images

/gallery/thumbs for containing your thumbnails

You will want to have the same names for files in /gallery/images as you have for /gallery/thumbs.

For example **/gallery/images/sketches/image_01.jpg **you’ll want to have /gallery/thumbs/sketches/image_01.jpg as well.

You’ll want to place the gallery script in the same folder as your gallery ie /gallery/gallery.php

The gallery only works for jpg, gif, and png files. You can edit the script to allow more file types if you want.

You’ll also want to change the values for these variables in the gallery script:

$portfolio_title = "Portfolio"; // name of your portfolio or gallery
$portfolio_page = "/gallery.php"; // link to the file your gallery script goes in
$portfolio_folder = "/gallery"; // folder your gallery resides in
$banner_folder = "/gallery/banners"; // folder your main menu images reside in
$thumb_folder = "/gallery/thumbs"; // folder your thumbnails reside in
$images_folder = "/gallery/images"; // folder your images reside in

For styling, please refer to this bit of code:

/* main menu images */
div#work {
    text-align: center;
 margin: 0 auto;
}
.work {
 text-align: left;
   margin: 5px;
    width: 310px;
   height: 200px;
  display: block;
 float: left;
    display: table-cell;
}
.work a {
  display: block;
 width:309px;
    height:199px;
   border: 1px solid #443b2e;
}
.work a:hover {
  background-color: rgba(0,0,0,0.5);
  color: #ffffff;
}
.work a span {
  display: none;
  padding:5px;
}
.work a:hover span {
   display: block;
}
.work-title {
   font-size: 24px;
    color: #4ca9ab;
        margin: 30px 0 10px 0;
}
/* gallery thumbnails */
div.left {
    float: left;
    margin-right: 8px !important;
   margin-bottom: 8px !important;
  width: 230px !important;
    height: 230px !important;
   overflow: hidden;
   border: 1px solid #000000;
  cursor: pointer;
}
.thumb a {width:230px;height:230px;}
.thumb img {
   border: 0;
}

You may want to check out fancybox for the popups. You may use this to apply fancybox to all linked images.

If you decide to use the script, please let me know how it goes. If you have questions, feel free to ask. I’d be more than happy to help with your problems if you cannot get it to work the first time.

WordPress Plugin

You may download a version for WordPress as well below. Be sure to follow the directions for styling and folder assignments mentioned above.

1. Place the downloaded file in your plugins directory and activate it.
2. Select the edit link to edit the plugin.
3. Only edit the portion that has folder assignment variables.
4. Add the styling information as mentioned above in the Non-Wordpress Version section
5. To use the gallery, go to create a page and add <!‐‐ gallery ‐‐> in the page where you want the gallery to appear. Be sure the url matches the assignment url you configured under the edit section.

• Download the non-Wordpress version file
• Download the WordPress plugin file