(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…
- 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.
- 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(); });
- 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>
- 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:
- 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>
- 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:
- Getting started with your first jQuery plugin [Article]
- OpenCart Themes: Styling Effects of jQuery Plugins [Article]
- The Basics of WordPress and jQuery Plugin [Article]
