In the previous two chapters, we completed the customization for all parts of the site. In addition, we created a Drupal block for displaying the last ten activities of the author in Google Plus. In this chapter, we shall be covering the integration of FancyBox2 into Drupal 7. FancyBox2 is a tool for displaying images, html content and multi-media in a Mac-style lightbox that floats over the web page. The goal will be to create a lightbox effect for displaying images each time a link with an appropriate class is clicked.

Since the FancyBox Module for Drupal 7 is a development release, we are going to integrate it into Drupal 7 programmatically. Roll up your sleeves and be willing to get your hands dirty with code!

This article covers the way FancyBox2 is added to the CTI Flex theme at the time of this writing. This procedure might have changed a little since then.

First, we download the FancyBox plugin from the official web page and unzip it into sites/all/themes/cti_flex/js/fancybox. Next, we edit a file called cti_flex.info as follows:

We must add the following sentence between stylesheets[all] [ ] = css/local.css and stylesheets[print] [ ] = css/print.css:

stylesheets[all][] = js/fancybox/fancybox.css

This instructs Drupal to add the style sheet for the fancybox plugin. Once the style sheet has been added, we have to do the same thing for the jquery scripts that control the behavior of fancybox:

scripts[] = js/fancybox/fancybox.pack.js
scripts[] = js/myfancybox.js

Since we want to create links to images to be displayed in a modal window, the content for myfancybox.js must be the following:

jQuery(document).ready(function() {

  jQuery('a.single_image').fancybox();

});

Now, each link with the class single_image will display the image in a modal window. This is the behaviour by default. To see all available options, please go to the official web page for fancybox.

You can see for yourself that it works by clicking here.