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

December 06, 2017 - 16:02

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.

  // We hide the content now so that we can render them later.
  // 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; ?>" />
  <?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() {
      'transitionIn' : 'none',
      'transitionOut' : 'none',
      'titlePosition' : 'inside',
      'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
        return 'Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '';

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.

Get Drupal updates straight to your inbox

To prevent automated spam submissions leave this field empty.

Post your comments / questions