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 buttons to image slideshows (Simple)

Another helper that Fancybox provides is the slideshow buttons. The buttons allow the user to go back and forward, play and pause, and close the Fancybox pop up from a simple bar of buttons.

Getting ready

Like the thumbnails helper, we will need to include the JavaScript and stylesheet files for the buttons helper.

How to do it...

  1. Add the stylesheet and JavaScript tags to the head tag of the index.html file, shown as follows:
    <link rel="stylesheet" 
      href="fancybox/source/helpers/jquery.fancybox-
      buttons.css?v=1.0.5" type="text/css" media="screen" />
    <script type="text/javascript" 
      src="fancybox/source/helpers/jquery.fancybox-
      buttons.js?v=1.0.5"></script>
    

    Next, we need to add the buttons option to the settings ...

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