Simple and Cool jQuery Gallery [Tutorial]

Apr 5, 2012 by Dzyngiri    4 Comments    Posted under: Freebies, jQuery, Plugins, Tutorials

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 this plug-in – I’ve included it in the demo files, so grab them (you can Download it for free) and get on reading.

The XHTML

We start off with our XHTML front-end.

demo.php

</pre>
<div id="container">
<div id="heading">
 <!-- the heading -->
<h1>A cool jQuery gallery</h1>
</div>
<div id="gallery">
 <!-- this is the containing div for the images -->
<!--?php //our php code goes here ?-->
<div></div>
 <!-- using clearfix --></div>
<div id="footer"></div>
</div>
<pre>
 <!-- closing the container 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

$directory = 'gallery';    //where the gallery images are located
$allowed_types=array('jpg','jpeg','gif','png');    //allowed image types
$file_parts=array();
$ext='';
$title='';
$i=0;
//try to open the directory
$dir_handle = @opendir($directory) or die("There is an error with your image directory!");
while ($file = readdir($dir_handle))    //traverse through the files
{
if($file=='.' || $file == '..') continue;    //skip links to the current and parent directories
$file_parts = explode('.',$file);    //split the file name and put each part in an array
$ext = strtolower(array_pop($file_parts));    //the last element is the extension
$title = implode('.',$file_parts);    //once the extension has been popped out, all that is left is the file name
$title = htmlspecialchars($title);    //make the filename html-safe to prevent potential security issues
$nomargin='';
if(in_array($ext,$allowed_types))    //if the extension is an allowable type
{
if(($i+1)%4==0) $nomargin='nomargin';    //the last image on the row is assigned the CSS class "nomargin"
echo '</pre>
<div style="background: url(''.$directory.'/'.$file.'') no-repeat 50% 50%;"><a title="'.$title.'" href="'.$directory.'/'.$file.'" target="_blank">'.$title.'</a></div>
<pre>
';
$i++;    //increment the image counter
}
}
closedir($dir_handle);    //close the directory

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 CSS

Everything is set up, but we still have to give it that cool look.

demo.css

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('https://www.dzyngiri.com/files/fonts/bebasneue-webfont.eot');
    src: url('https://www.dzyngiri.com/files/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.dzyngiri.com/files/fonts/bebasneue-webfont.woff') format('woff'),
         url('https://www.dzyngiri.com/files/fonts/bebasneue-webfont.ttf') format('truetype'),
         url('https://www.dzyngiri.com/files/fonts/bebasneue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
	margin:0px;
	padding:0px;
	font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
	color:#333333;
}
body{
	margin-top:20px;
	color:white;
	font-size:13px;
	background: #fff url(https://www.dzyngiri.com/files/images/bg.jpg) repeat top left;
}
.clear{
	clear:both;
}
a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}
a:hover{
	text-decoration:underline;
}
#container{
	width:890px;
	margin:20px auto;
}
#heading,#footer{
	border:3px dashed #aaaaaa;
	height:20px;
	padding:6px 0 25px 15px;
	margin: 0px 50px 10px 50px;
	overflow:hidden;
	text-align: center;
}
#footer{
	height:10px;
	margin:20px 0 20px 0;
	padding:6px 0 11px 15px;
}
div.nomargin{
	margin-right:5px;
}
.pic{
	float:left;
	margin:0 15px 15px 0;
	border:5px solid white;
	width:200px;
	height:250px;
	box-shadow:1px 1px 8px rgba(0, 0, 0, 0.3);
}
.pic a{
	width:200px;
	height:250px;
	text-indent:-99999px;
	display:block;
}
h1{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 35px;
	line-height: 35px;
	position: relative;
	font-weight: 400;
	color: rgba(26,89,120,0.9);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    padding: 0px 0px 5px 0px;
}
h2{
	font-weight:normal;
	font-size:14px;
	color: #666666;
}

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:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script>
<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

// after the page has finished loading
$(document).ready(function(){
	$('.pic a').lightBox({
	// we call the lightbox method, and convert all the hyperlinks in the .pic container into a lightbox gallery
		imageLoading: 'lightbox/images/loading.gif',
		imageBtnClose: 'lightbox/images/close.gif',
		imageBtnPrev: 'lightbox/images/prev.gif',
		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

In this tutorial you learned how to create a stylish image gallery with the help of the jQuery lightBox plug-in. You can use the example code into your projects and you are free to modify it in whatever manner you find appropriate. You can as well use it as is and add a gallery to your site with minimum modifications needed.

Free License

Feel free to download and use this item for both personal and commercial projects with attribution back to Dzyngiri. Please note:

• Attribution is required for all the free downloadable items (plugin, template, psd, etc).
• You may not distribute or offer this set for download on other websites. Promotion is always appreciated, but please send people to this page (we you can do that at least)

Dzyngiri

A professional and beautiful website design is the result of creative talent and technical expertise, and Dzyngiri is the source for the same!

More Posts – Website

Follow Me:

Got anything to say? Go ahead and leave a comment!