Home > Web Development > Coding > CSS Tips & Tricks > FancyBox, a Better Lightbox

How to Use fancyBox, a Better Lightbox

On this page…

Create the folders

Create a directory structure for this assignment:

fancybox-test
    images
        fancybox
    js
    css

Create the basic webpage

Download pictures of apes to use from http://files.granneman.com/webdev/css/fancybox/apes.zip. Unzip the file & put the two folders (chimps & gorillas) into the images folder.

Make the basic webpage, titled index.htm, in the fancybox-test folder, doing the following:

Use the HTML 5 DTD.
Create an H1 that says something clever.
Create an H2 for Chimps.
Under that H2, place the 4 thumbnails of chimps, using float:left to line them up (use the technique at Floatutorial, but without the break after 3 images)
Create an H2 for Gorillas. You'll need to attach a class named something like break to the H2. In your CSS, give the break class this CSS: clear: both
Under that H2, place the 5 thumbnails of gorillas, using float:left to line them up.
Link each thumbnail to its appropriate larger image.

Here's an example for the images (this is just for the images & links, not the float:left part):

<a href="images/chimps/chimp-1.jpg"><img src="images/chimps/chimp-1-th.jpg" width="120" height="120" alt="chimp-1-th"></a>

Load your webpage in a browser & test to make sure that:

Your thumbnails all appear.
Everything floats left correctly.
When you click on a thumbnail, a larger picture loads.

Install the fancyBox files

Download fancybox from http://fancyapps.com/fancybox (you may need to look around for the Download link). Unzip it.

Move the following files into the css folder:

jquery.fancybox.css
jquery.fancybox-buttons.css
jquery.fancybox-thumbs.css

Move the following files into the js folder:

jquery.fancybox.pack.js
jquery.fancybox-buttons.js
jquery.fancybox-thumbs.js

Move the following files into the images/fancybox folder:

fancybox_buttons.png
fancybox_sprite.png
fancybox_loading.gif
blank.gif

Link to fancyBox

Link to jQuery in your HEAD:

<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

In your HEAD, link to the Fancybox CSS & JavaScript files:

<!-- fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.0.5"></script>

<!-- fancyBox button helpers -->
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=2.0.5"></script>

<!-- fancyBox thumbnail helpers -->
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=2.0.5"></script>

Add the following just before </body>:

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

Connect your images to fancyBox

Let's fix your image links so they work with fancyBox.

Add class="fancybox" to each <a>.
Add rel="chimps" to each <a> that links to chimps.
Add rel="gorillas" to each <a> that links to gorillas.

Here's an example for a chimp:

<a class="fancybox" rel="chimps" href="images/chimps/chimp-1.jpg"><img src="images/chimps/chimp-1-th.jpg" width="120" height="120" alt="chimp-1-th"></a>

Test by reloading the webpage & clicking on the thumbnails. You should see the fancyBox effect; if you click on the right or left side of the pictures, they should advance to the next or previous ones.

You'll notice, however, that you don't see any next, previous, or close buttons. Let's fix that.

Make the next, previous, & close buttons appear

Edit css/jquery.fancybox-buttons.css.

Change this:

background-image: url('fancybox_buttons.png');

To this:

background-image: url('../images/fancybox/fancybox_buttons.png');

Save & close css/jquery.fancybox-buttons.css.

Edit css/jquery.fancybox.css.

Change this:

background-image: url('fancybox_sprite.png');

To this:

background-image: url('../images/fancybox/fancybox_sprite.png');

Change this:

background: url('fancybox_loading.gif') center center no-repeat;

To this:

background: url('../images/fancybox/fancybox_loading.gif') center center no-repeat;

Change this:

background: transparent url('blank.gif'); /* helps IE */

To this:

background: transparent url('../images/fancybox/blank.gif'); /* helps IE */

Save & close css/jquery.fancybox.css.

And you should now see the next, previous, or close buttons!

NOTE: The ../ in front of images specifies a relative path to the images, which will work fine if you're doing this assignment on a Mac or PC that doesn't have a web server installed. If you're doing this on a computer with a web server installed, instead of using ../ you should instead just use a /, which is an absolute path. For example, the code for linking to fancybox_sprite.png would now look like this:
background-image: url('/images/fancybox/fancybox_sprite.png');

Try out various effects

fancyBox is quite flexible & allows you to change lots of things about how it displays images. Let's look at some of the various effects you can use & the changes you can make.

NOTE: As we get more complex, you really need to pay attention to the code as it changes. In particular, commas can really trip you up, so look carefully at each code example!

Title

You might want text to appear that describes each picture. This is easy to add with fancyBox.

In your HTML, add a title to every <a> surrounding an <img> that appears in your fancyBox. For example:

<a class="fancybox" rel="chimps" href="images/chimps/chimp-1.jpg" title="A wise old chimp"><img src="images/chimps/chimp-1-th.jpg" width="120" height="120" alt="chimp-1-th"></a>

In your JavaScript that calls fancyBox, change this:

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

To this:

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

Save your code & reload the webpage. Do you see the title ("A wise old chimp") appear? See where it is?

Now, instead of float, try the following values for type. After each one, save your code & reload the webpage.

inside
outside
over

Buttons

Next, Previous, & Close buttons appear on the images while they display, but maybe you don't want those buttons in those particular places. You can position the buttons elsewhere by following these steps.

In your JavaScript that calls fancyBox, change this (note we're going back to the original JavaScript here; in the next section I'll combine the Title & Buttons together):

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

To this:

<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox({
      helpers: { 
        buttons: {
          position: 'top'
        }
      }
    });
  });
</script>

Save your code & reload the webpage. Do you see the buttons at the top of the screen?

Besides top, you can also use bottom. Try that as well.

Transitions

By default, the elastic effect is used for transitions. Transitions occur at 4 times:

Open: when the user clicks on an image & fancyBox opens
Close: when the user closes fancyBox
Next: when the user advances to the next image in fancyBox
Previous: when the user goes back to the previous image in fancyBox

The are three transition effects you can choose from:

elastic
fade
none

Different transitions can use different effects, or you can have all the transitions use the same effect. It's your choice.

To use transitions, change the JavaScript that calls fancyBox from this:

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

To this:

<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox({
      openEffect: 'fade',
      closeEffect: 'fade',
      nextEffect: 'none',
      prevEffect: 'none'
    });
  });
</script>

Save your code & reload the webpage. Note the different effects when you open & close fancyBox, & as you go forward & backward through the images.

Combine various effects

Title + Buttons

Let's combine the title & the buttons. Change your JavaScript from this:

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

To this:

<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox({
      helpers: { 
        buttons: {
          position: 'top'
        },
        title: {
          type: 'float'
        }
      }
    });
  });
</script>

Save your code & reload the webpage. Do you see the buttons at the top of the screen, & the title of each image as you move through them?

Title + Buttons + Transitions

Let's combine the title & buttons with the transitions.

Change your JavaScript from this:

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

To this:

<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox({
      openEffect: 'fade',
      closeEffect: 'fade',
      nextEffect: 'none',
      prevEffect: 'none',
      helpers: { 
        buttons: {
          position: 'top'
        },
        title: {
          type: 'float'
        }
      }
    });
  });
</script>

Save your code & reload the webpage. How's it all look?

Scott Granneman

How to Use fancyBox, a Better Lightbox

Create the folders

Create the basic webpage

Install the fancyBox files

Link to fancyBox

Connect your images to fancyBox

Make the next, previous, & close buttons appear

Try out various effects

Title

Buttons

Transitions

Combine various effects

Title + Buttons

Title + Buttons + Transitions

Contact

Work