Creating an image gallery

Exclusive offer: get 50% off this eBook here
Instant Fancybox [Instant]

Instant Fancybox [Instant] — Save 50%

Enhance the look of your web pages using the lightweight and highly customizable jQuery plugin Fancybox with this book and ebook

$12.99    $6.50
by Kyle Diedrick | October 2013 | Open Source Web Development

This article by Kyle Diedrick, author of Instant Fancybox, shows how Fancybox also provides some great image gallery and slideshow functionality. Let's take a look at what is involved in creating a Fancybox gallery.

(For more resources related to this topic, see here.)

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/frozenlake.
    png">Frozen Lake</a>
    <a class="fancybox" href="images/road-inforest.
    png">Road in Forest</a>
    <a class="fancybox" href="images/boston.png">Boston</a>

    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/frozenlake.png">Frozen Lake</a> <a class="fancybox" rel="gallery" href="images/roadin-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/roadin-forest.png">Road in Forest</a> <a class="fancybox" rel="gallery" href="images/boston.png">Boston</a> </div>

Summary

In this article we saw that Fancybox provides very strong image handling functionalities. We also saw how an image gallery is created by Fancybox. We can also display images as thumbnails and display the images as a slideshow using just one link.

Resources for Article:


Further resources on this subject:


Instant Fancybox [Instant] Enhance the look of your web pages using the lightweight and highly customizable jQuery plugin Fancybox with this book and ebook
Published: October 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Kyle Diedrick

Kyle Diedrick is a software engineer living in Irvine, California. He has been working on websites for the past 10 years. He has also been blogging about software development for roughly four years on his website, Graphics Unplugged. He has substantial experience working on websites using JavaScript, CSS, HTML, PHP, and most recently, CoffeeScript. He first discovered the Fancybox jQuery plugin while working at Great Wolf Resorts in 2010. He began using the plugin because of its flexibility.

Kyle does freelance website design and development through his personal website, Graphics Unplugged. Graphics Unplugged focuses primarily on websites but has recently begun expanding into mobile application development for both iOS and Android. He also writes blogs about website design and development.

Books From Packt


 jQuery Plugin Development Beginner's Guide
jQuery Plugin Development Beginner's Guide

 Instant jQuery Boilerplate for Plugins [Instant]
Instant jQuery Boilerplate for Plugins [Instant]

 jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery

 jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

 jQuery UI 1.8: The User Interface Library for jQuery
jQuery UI 1.8: The User Interface Library for jQuery

Responsive Web Design with jQuery
Responsive Web Design with jQuery

 Instant jQuery Masonry How-to [Instant]
Instant jQuery Masonry How-to [Instant]

 jQuery Hotshot
jQuery Hotshot


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
R
B
x
V
y
Z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software