Created by Martin Angelov on Sep 10th, 2009
Introduction
One of the main benefits of using a popular java script library, such as jQuery, is the incredible number of available plug-ins that will kick-start any development project.
Today we are going to build a custom gallery that scans a folder of images and outputs a slick gallery, utilizing PHP, CSS, jQuery and the
jQuery Lightbox plug-in.
There is no need to download the plug-in – I’ve included it in the demo files, so
grab them and get on reading.
The XHTML
We start off with our XHTML front-end.
demo.php
04 | <h1>A cool jQuery galleryh1> |
09 | //our php code goes here |
12 | <div class="clear">div> |
And that is basically all there is to it. Note the highlighted area – this is where we put our PHP code, that will generate the gallery images. Now lets go through how this is done.
The PHP
The idea is simple – our PHP back-end is going to scan a folder that we’ve set up with our gallery images, and turn it into a fancy CSS & jQuery gallery. The great thing about this strategy is that it is incredibly easy to set up a gallery, and adding images to an existing one is a charm – just dump them in the gallery’s directory via FTP and it is ready to go.
demo.php
01 | $directory = 'gallery'; |
03 | $allowed_types=array('jpg','jpeg','gif','png'); |
11 | $dir_handle = @opendir($directory) or die("There is an error with your image directory!"); |
13 | while ($file = readdir($dir_handle)) |
15 | if($file=='.' || $file == '..') continue; |
17 | $file_parts = explode('.',$file); |
18 | $ext = strtolower(array_pop($file_parts)); |
20 | $title = implode('.',$file_parts); |
21 | $title = htmlspecialchars($title); |
24 | if(in_array($ext,$allowed_types)) |
26 | if(($i+1)%4==0) $nomargin='nomargin'; |
28 | class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%;">
|
By traversing through the files in the directory and skipping the non-image files, we output some XHTML code for every image . This code (lines 28-39) consists of a div container, with a CSS class
pic (and in some cases a
nomargin, more on that later), and we set its
background to the image file via the
style attribute. We position the image in the center of the background by specifying its position to be
50% 50%. This centers it both horizontally and vertically and thus shows only the middle part, that fits into the div container’s size. This creates a nice thumbnail, with no need of actually resizing the image.
This works best with images with smaller resolutions, so you should consider resizing those 10 megapixel photos before uploading them.
The div contains a hyperlink which is linked to the image and has a
title of the image filename. Both these attributes are used by the
lightBox plugin to generate the lightbox gallery. So by renaming the file, you can change the caption that shows under it.
You may wonder what is the point of that
nomargin class? Every image in the gallery has a right and a bottom margin. But this means that it is not possible the last element of each row to align with the right part of the heading div and it looks amateurish. So we assign this special class, which clears the right margin for the last element on each row and gives us a proper alignment.
The jQuery Gallery
The CSS
Everything is set up, but we still have to give it that cool look.
demo.css
02 | body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ |
05 | font-family:Arial, Helvetica, sans-serif; |
12 | background-color:#222222; |
26 | text-decoration:underline; |
35 | background-color:#2A2A2A; |
36 | border:1px solid #444444; |
38 | padding:6px 0 25px 15px; |
46 | padding:6px 0 11px 15px; |
56 | border:5px solid white; |
71 | font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; |
The jQuery
To make it all tick, we need to include the
jQuery java script library in our page, and add the
lightBox plugin. The following code was taken from the head section of
demo.php:
1 | <link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css"> |
2 | <link rel="stylesheet" type="text/css" href="demo.css" /> |
5 | <script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js">script> |
6 | <script type="text/javascript" src="script.js">script> |
On line 1 we include the
lightbox plugin’s CSS file, which styles the lightbox that displays the images. On line 2 we include our own CSS file.
Line 4 is where we include the jQuery library from Google’s CDN. Later come the lightbox plugin itself and our own
script.js file.
Now we are ready to put the finishing touch.
script.js
02 | $(document).ready(function(){ |
04 | $('.pic a').lightBox({ |
07 | imageLoading: 'lightbox/images/loading.gif', |
08 | imageBtnClose: 'lightbox/images/close.gif', |
09 | imageBtnPrev: 'lightbox/images/prev.gif', |
10 | imageBtnNext: 'lightbox/images/next.gif' |
The
lighbox() method takes an object as an optional parameter. The only reason we provide any parameters is that I changed the default location of the plugin, putting it in a subfolder
/lightbox which aids for a cleaner file structure. Unfortunately the images that the plug-in uses become inaccessible and have to be provided manually.
With this our gallery is complete.
Conclusion
Postado por Fernando Schimit - Fox Creative
