How to Create an Image Gallery

Image galleries allow you to display images to the end-user in a pleasant manner where each image can be previewed, viewed individually, and cycled through in sequence.  This allows you to save space on the layout of your webpage and improve the overall usability of your site.

Image galleries are pre-written, so most of the work is already done.  This article assumes that you have a moderate understanding of HTML and web servers.

To set up your own image gallery, follow these steps:

1.  Download Fancybox, the image gallery tool we will be using from here:

2.  Extract the ‘fancybox’ sub-directory to your main web folder

3.  Extract the ‘jquery-1.4.3.min.js’ file to your main web folder

4.  Set up the references in the HEAD section of your webpage.  You must reference 1 CSS file and 4 Javascript files:

<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="./jquery-1.4.3.min.js">
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js">
<script type="text/javascript" src="./fancybox/jquery.easing-1.3.pack.js">
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js">

5.  Copy and paste the code necessary to create an image gallery in the HEAD section:

<script type=”text/javascript”>
$(document).ready(function() {
    ‘transitionIn’  : ‘none’,
    ‘transitionOut’  : ‘none’,
    ‘titlePosition’  : ‘over’,
    ‘titleFormat’  : function(title, currentArray, currentIndex, currentOpts) {
     return ‘Image ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘   ‘ + title : ”) + ‘‘;


6.  Create your images in the BODY section using links and the rel=”example_group” attribute:

<a rel="example_group" href="./Images/A.jpg" title="A"><img alt="" src="./Images/Thumbnails/A.jpg" /></a>

7.  Always be sure that the image you are linking to matches the thumbnail version of the image you reference.  The thumbnail will be displayed on your main page and the full-size image will appear in the image gallery.  If you wish to get more advanced, the ‘title’ attribute can be used to overlay text over the image in the gallery.

To get more advanced, there are countless settings that can be tweaked to change the way images are displayed, which are described here:

You can preview the end result on my website here:

~Nick Marnik

~ by nkmhockey on February 21, 2011.

%d bloggers like this: