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!
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.
First up, go and download Fancybox from GitHub. Extract the files and place the following files in your css folder:
- fancybox _ loading.gif
- fancybox _ email@example.com
- fancybox _ overlay.png
- fancybox _ sprite.png
- fancybox _ firstname.lastname@example.org
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.
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>
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.
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.