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:

    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:

    Install the fancyBox files

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

    Poke around in various folders to find the following files, & then move them into the css folder:

    Find the following files & move them into the js folder:

    Finally, find the following files & move them into the images/fancybox folder:

    Link to fancyBox

    Link to jQuery in your HEAD. For information on integrating jQuery, follow the instructions at Adding jQuery to Your Projects. Do not forget this step!

    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.

    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.

    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.

    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.

    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:

    The are three transition effects you can choose from:

    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?