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

Manipulating image slideshows (Advanced)

Fancybox also has API methods for interacting with image slideshows. We can use these methods to start or stop playback, move to the next or previous image, and move to any image in the slideshow. Let's create some simple links to move around the slideshow using the API.

Getting ready

We'll start with code similar to that found in the Creating an image gallery recipe. The only difference will be that we will include the styles.css file so we can add some custom styles.

How to do it...

  1. Let's create the HTML and CSS for the custom buttons we are going to have. We'll start with the following HTML code:
    <div class="custom-controls"> <a href="#" class="previous">Previous</a> <a href="#" class="play-pause">Play</a> ...

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