[Drupal 7] How to Create a Custom Media Gallery using Fancybox Library

In this article I will be explaining how to create a custom media gallery functionality using the library Fancybox.

First step is to create the content type 'Media Gallery(media_gallery)' and add the following fields in page 'admin/structure/types/manage/media_gallery/fields'

• Title : Text field
• Media Gallery Image(field_media_gallery_image) : Image field

In manage display page admin/structure/types/manage/media_gallery/display of the content type, select an image style or create the required style from the image style setting page admin/config/media/image-styles/add and link the image to the file.

Create a tpl file for the content type 'Media Gallery' and rename it as 'node--media_gallery.tpl.php', you can refer Drupal 7 node.tpl.php.. In our tpl file hide or remove variable $content, so that we can customise our images later. Get the count of images and store it to variable $image_count (for example). Add the following code to the tpl file, here for each image we are adding a tag, with class name 'fancybox' to invoke the fancybox styles and title 'node title' to display the title name. For each image we are displaying the count as well.

<?php
  // We hide the content now so that we can render them later.
  hide($content);
  // Get the number of images in that node
  $image_count = count($node->field_media_gallery_image['und']);
  for ($i = 0; $i < $image_count; $i++) {
    //Create image URL.
    $image_uri = $node->field_media_gallery_image['und'][$i]['uri'];
    $image_style = image_style_url('ckg_gallery_medium', $image_uri); ?>
    <a href="<?php print file_create_url($node->field_media_gallery_image['und'][$i]['uri']); ?>" rel="group-<?php print $node->nid; ?>" class="fancybox" title="<?php print $node->title; ?>">
      <img class="image<?php print ($i + 1);?>" src="<?php print $image_style; ?>" />
    </a>
  <?php } ?>

Create a view page to list all the galleries and display one image from each gallery. See the attached screen-shot below.

When a user click on the image takes them to gallery inner page, where all the images will be listed. See the attached screen-shot below.

To implement the Fancybox feature download the latest files from fancybox.net. Extract the all the files and create a folder 'fancybox' in path 'sites/all/libraries/'. Move all the images and following files 'jquery.easing-1.3.pack.js', 'jquery.fancybox-1.3.4.css', 'jquery.fancybox-1.3.4.js', 'jquery.fancybox-1.3.4.pack.js' and 'jquery.mousewheel-3.0.4.pack.js' to folder 'fancybox'.

In template.php file use the function template_process_page to add the required CSS and JS files.

/**
 * Override or insert variables into the page template.
 */
function template_process_page(&$vars) {
  /*Fancybox plugin for media gallery*/
  if (isset($vars['node'])) {
    if ($vars['node']->type == 'media_gallery') {
      drupal_add_js(libraries_get_path('fancybox') . '/jquery.mousewheel-3.0.6.pack.js');
      drupal_add_js(libraries_get_path('fancybox') . '/jquery.fancybox-1.3.4.pack.js');
      drupal_add_css(libraries_get_path('fancybox') . '/jquery.fancybox.css');
      /*Create a custon js file to display fancybox*/
      drupal_add_js(drupal_get_path('theme', 'theme_name') . '/js/media-gallery.js');
    }
  }
}

Create a custom JS file 'media-gallery.js' to process which all features should be implemented while displaying the images.

(function ($) {
  $( document ).ready(function() {
    $('.fancybox').fancybox({
      'transitionIn' : 'none',
      'transitionOut' : 'none',
      'titlePosition' : 'inside',
      'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
        return 'Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '';
      }
    });
  });
})(jQuery);

Now when a user clicks on the image from gallery page it will be displayed and shown in the screen shot below.

Hope this helps.