It can be nice sometimes to click on an image and see a larger version, unless of course it's something extremely unpleasant.

You could just add a hyperlink to the full size image and leave it at that, but it will open the image in a new page and it will not have any of your website styling. Just the image. On an empty page. We can do better!

Enter Fancybox

Fancybox is a JavaScript tool for displaying images in a lightbox above your page. Something like this:

I know what you're thinking. I need this in my life as of yesterday!. Fear not. Before you know it you'll be basking in lightbox glory.

Download Fancybox

First up, go and download Fancybox from GitHub. Extract the files and place the following files in your css folder:

  • jquery.fancybox.css
  • blank.gif
  • fancybox _ loading.gif
  • fancybox _ loading@2x.gif
  • fancybox _ overlay.png
  • fancybox _ sprite.png
  • fancybox _ sprite@2x.png

and the following file in your JavaScript folder:

  • jquery.fancybox.pack.js

Include Fancybox On Your Website

We've downloaded the files, we now need to integrate them into our website. Add the following line to <head> to include the css file:

    

<link rel="stylesheet" href="/stylesheets/jquery.fancybox.css" type="text/css" media="screen" />

And this line to the bottom of the page, just before the closing body tag.

    

<script type="text/javascript" src="/javascript/jquery.fancybox.pack.js"></script>

Add the HTML Markup

In order for Fancybox to work correctly, the HTML for your image needs to be structured in a certain way. You need to have your image tag as normal (and link this to an appropriately sized version of the file to display on screen i.e a small version). Then you need to wrap this in an anchor tag with a class of Fancybox. Make this anchor tag link to the full size version of the image you want to open in your lightbox.

    

<a class="fancybox" href="/images/bicycle-fullsize.jpg">
    <img class="grid-item" src="/images/bicycle-small.jpg" alt="Bicycle"/>
</a>

Initialise Fancybox

Now we've got all our elements in place, we just need to initialise Fancybox. It will search for all anchor tags with a class of Fancybox and make sure they open in a lightbox when clicked.

If you don't already have a JavaScript file with your own JavaScript code in, create one with the following contents:

    

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>

If you already have one, add the code to the end of your existing JavaScript.

And then include that JavaScript file on your page. Make sure you add it after the line including Fancybox, like so:

    

<script type="text/javascript" src="/javascript/jquery.fancybox.pack.js"></script>
<script src="/javascript/javascript.js" type="text/javascript"></script>

Bask in the Lightbox Glory

Refresh your page, and you should now find clicking on your image opens it with Fancybox, instead of navigating to a separate page!

Congratulations, you have successfully made your website brilliant! If you need a break after all that, go out and get some fresh air, run around the garden, shake it off and come back to appreciate your work all over again.