[Drupal 7] How to Create a Custom Media Gallery using Fancybox Library
BY thomas.john
3 years ago

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.



on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Drupal Technical StumbleThis Sean (not verified) access_time 20 Sep 2021 - 17:58 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon... How can I fix this? Thanks, Sean webmaster access_time 20 Sep 2021 - 17:58 In reply to Icon doesn&#039;t show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 20 Sep 2021 - 17:58 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks.

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Anonymous (not verified) access_time 20 Sep 2021 - 17:58 Hello. I'm trying to make example.com show as www.example.com, and I'm running into difficulties. I'm on Apache 2.0 and using the following lines in my httpd.conf file: RewriteEngine on RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com$ [NC] RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [L,R=301] When I go to http://xxxxxxxxxx.com, I get http://www.xxxxxxxxxx.com (as expected). However, when I go to http://xxxxxxxxxx.com/node/1 (it's a Drupal site), I get a 404 thrown and the URL changes to xxxxxxxxxx.com/var/www/drupal/node/1. Same thing with www.xxxxxxxxxx.com/node/1. Any suggestions? I want to run without Drupal's .htaccess file (instead incorporating these calls into my httpd.conf file). webmaster access_time 20 Sep 2021 - 17:58 In reply to Rewrite including filesystem path by Anonymous (not verified) I think the problem is with the base path which results in the redirection to /var/www/ part. The best approach I would think is to start with drupal htaccess and then strip out parts and move to httpd SNVC (not verified) access_time 20 Sep 2021 - 17:58 This is definitely a good guide. Thanks for this. wellyson access_time 20 Sep 2021 - 17:58 This is really nice and helpful.

on 08th February 2008 / by webmaster
Attachment Size slashdotit.tar.gz 173.55 KB Similar to the StumbleThis module that we had created earlier we have created another bookmarking Drupal Technical Slashdotit Shlomi Fish (not verified) access_time 20 Sep 2021 - 17:58 Hi! I'm interested in this module, but Drupal 6.2 complains that it's incompatible with it. Can you please update it or tell me how? Regards, Shlomi Fish shlomifish.org webmaster access_time 20 Sep 2021 - 17:58 In reply to Can you update it for Drupal-6.x? by Shlomi Fish (not verified) Sure we are working on this currently and will post an update soon. Also we will post this module on www.drupal.org as well Cheers Anoop John Team Zyxware Anonymous (not verified) access_time 20 Sep 2021 - 17:58 Hello! Nice Article very interesting, thanks