O'Reilly logo

Instant Fancybox by Kyle Diedrick

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding thumbnails to a gallery (Simple)

Fancybox provides the ability to have a thumbnails display under an image gallery. Let's take a look at getting the thumbnails displayed under our image gallery.

Getting ready

We're going to use the image gallery that we already created in the Creating an image gallery recipe. If you don't have yours available, you can find a simple image gallery in the example code.

How to do it...

  1. Remember all of those extra files that come with the Fancybox download? We need to add the stylesheet and JavaScript files necessary for the thumbnails to work. In the head tag of our index.html file, add the following two lines:
     <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox- thumbs.css?v=1.0.7" type="text/css" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required