Fancybox
more_horiz
close

on 06th December 2017 / by thomas.john
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. Drupal 7 Fancybox Leave a reply Your email address will not be published. Required fields are marker *