CSS Grid Highlight UsageHomeCodes › Fancybox Usage


FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. You can find o ut more at a fancybox.net


A standard size PSD is included for your large images. You can create thumbnails whichever size you like, or just links if you prefer.


The main settings are located in 'scripts/custom-js.js' - edit the FancyBox settings as you need to. Make sure these are located in the <head> above. jQuery is also required.

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


Create a link to the image you would like to display with Fancybox with the class "fancy".

The rel is for grouping so each link with the same rel will be browsable while in Fancybox!

<a href="image-location.jpg" class="fancy" rel="the-group"><img src="thumb-location.jpg" alt="" /></a>

Official Documentation and Support

Official documentation located at fancybox.net.