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

Fancybox with a single image (Simple)

Now that we have the Fancybox plugin loaded on the page, let's make it actually do something. To start things off, we'll simply have Fancybox load a single image.

Getting ready

Before we get started, we need to set up a few more files. First, find an image to use. It should be a decently large image so we can see Fancybox do its thing. Create a folder called images alongside the index.html file and put the image in the folder. Now that we have an image to use, let's make Fancybox use it. We're going to build on top of the code used previously, when we learned how to install Fancybox.

How to do it...

  1. Create a new JavaScript file called scripts.js in the same directory as our index.html file.
  2. Inside the scripts.js ...

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