Book Image

Instant Fancybox

By : Kyle Diedrick
Book Image

Instant Fancybox

By: Kyle Diedrick

Overview of this book

Fancybox is a lightweight, highly customizable jQuery plugin for displaying modal dialogs. Fancybox is incredibly versatile; it works with all sorts of different content including images, videos, iFrames, custom HTML, and even SWF files. Fancybox is also very easy to customize, making it a great tool for any pop-up-like feature. Instant Fancybox is a hands-on guide which shows you how to use and customize the Fancybox plugin. The book provides step-by-step tutorials covering everything from simple installation to complex settings and features. This makes it a great way to get familiar with and ultimately master the Fancybox plugin. This book walks you through how to get the most out of the Fancybox plugin for jQuery, starting with the installation of the plugin and how to work with the JavaScript events that Fancybox triggers. You will learn everything you need to know about setting up Fancybox to show images, image galleries and slideshows, videos, and other content. You will also learn about the settings available within Fancybox and how to leverage them to make the Fancybox popup do exciting things. The Fancybox plugin has much to offer, and this book covers all of the features it provides. This book will provide you with all the information you will need to use the Fancybox plugin effectively.

Related Content you might be interested in

Current Title:

Small book image
Instant Fancybox
Kyle Diedrick
Oct, 2013 | 74 pages
No titles found
Table of Contents (7 chapters)
Instant Fancybox
Instant Fancybox
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Instant Fancybox
Instant Fancybox
Installing Fancybox (Simple)
Fancybox with a single image (Simple)
Creating an image gallery (Simple)
Displaying YouTube videos (Intermediate)
Loading content via AJAX (Intermediate)
Loading additional types of content (Intermediate)
Adding thumbnails to a gallery (Simple)
Adding buttons to image slideshows (Simple)
Customizing other helpers (Intermediate)
Modifying styles and layout (Intermediate)
Changing slideshow settings (Advanced)
Adding custom styles (Intermediate)
Changing animation effects (Intermediate)
Changing keyboard shortcuts (Advanced)
Interacting with Fancybox (Advanced)
Manipulating image slideshows (Advanced)
Listening for Fancybox events (Advanced)

Creating an image gallery (Simple)

Fancybox also provides some great image gallery and slideshow functionality. Let's take a look at what is involved in creating a Fancybox gallery.

Getting ready

Before we get started, we need to find a handful of images that we can use for the gallery. Find four to five images to use for the gallery and put them in the images folder.

How to do it...

  1. Add the following links to the images to the index.html file:

    <a class="fancybox" 
  href="images/waterfall.png">Waterfall</a>
<a class="fancybox" href="images/frozen-
  lake.png">Frozen Lake</a>
<a class="fancybox" href="images/road-in-
  forest.png">Road in Forest</a>
<a class="fancybox" href="images/boston.png">Boston</a>

    Note

    The anchor tags no longer have an ID, but a class. It is important that they all have the same class so that Fancybox knows about them.

  2. Change our call to the Fancybox plugin in the scripts.js file to use the class that all of the links have instead of show-fancybox ID.

    $(function() {
    // Using fancybox class instead of the show-fancybox ID
    $('.fancybox').fancybox();
});

  3. Fancybox will now work on all of the images but they will not be part of the same gallery. To make images part of a gallery, we use the rel attribute of the anchor tags. Add rel="gallery" to all of the anchor tags, shown as follows:

    <a class="fancybox" rel="gallery" 
  href="images/waterfall.png">Waterfall</a>
<a class="fancybox" rel="gallery" href="images/frozen-
  lake.png">Frozen Lake</a>
<a class="fancybox" rel="gallery" href="images/road-
  in-forest.png">Road in Forest</a>
<a class="fancybox" rel="gallery" 
  href="images/boston.png">Boston</a>

  4. Now that we have added rel="gallery" to each of our anchor tags, you should see left and right arrows when you hover over the left-hand side or right-hand side of Fancybox. These arrows allow you to navigate between images as shown in the following screenshot:

How it works...

Fancybox determines that an image is part of a gallery using the rel attribute of the anchor tags. The order of the images is based on the order of the anchor tags on the page. This is important so that the slideshow order is exactly the same as a gallery of thumbnails without any additional work on our end.

We changed the ID of our single image to a class for the gallery because we wanted to call Fancybox on all of the links instead of just one. If we wanted to add more image links to the page, it would just be a matter of adding more anchor tags with the proper href values and the same class.

There's more...

So, what else can we do with the gallery functionality of Fancybox? Let's take a look at some of the other things that we could do with the gallery that we have currently.

Captions and thumbnails

All of the functionalities that we discussed for single images apply to galleries as well. So, if we wanted to add a thumbnail, it would just be a matter of adding an img tag inside the anchor tag instead of the text. If we wanted to add a caption, we can do so by adding the title attribute to our anchor tags.

Showing slideshow from one link

Let's say that we wanted to have just one link to open our gallery slideshow. This can be easily achieved by hiding the other links via CSS with the help of the following step:

  1. We start by adding this style tag to the <head> tag just under the <script> tag for our scripts.js file, shown as follows:

    <style type="text/css">
  .hidden {
    display: none;
  }
</style>

  2. Now, we update the HTML file so that all but one of our anchor tags have the hidden class. Next, when we reload the page, we will see only one link. When you click on the link, you should still be able to navigate through the gallery just like all of the links were on the page.

    <a class="fancybox" rel="gallery" 
  href="images/waterfall.png">Image Gallery</a>
<div class="hidden">
  <a class="fancybox" rel="gallery" 
    href="images/frozen-lake.png">Frozen Lake</a>
  <a class="fancybox" rel="gallery" href="images/road-
    in-forest.png">Road in Forest</a>
  <a class="fancybox" rel="gallery" 
    href="images/boston.png">Boston</a>
</div>
Previous Section
End of Section 4
Next Section