Standard

Sretched

Navigation

Backgrounds

CSS Grid Highlight UsageHomeCodes › Fancybox Usage


Fancybox

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


Images

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


Javascript

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" />

HTML

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.