[Drupal 7] How to Create a Custom Media Gallery using Fancybox Library
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY thomas.john
1 year ago
Drupal-7
0
comments comment

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.

Gallery-Page.jpg

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.

Gallery-Page-Inner.jpg

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.

Media-Gallery.jpg

Hope this helps.


RELATED ARTICLE

more_horiz
close

on 24th January 2012 / by webmaster
By default Drupal 7 has two types of views - The Full node view and the Teaser view. This has been the case for all previous versions of Drupal. However if your requirements are different, then you might have to create a custom view that is tailored to meet your specific needs. Check out how to create a simple custom “View mode” for nodes in Drupal 7.    Step1:    Create a custom moduleStep2: Create an additional view mode -’Grid Pane’ by simply implementing hook_entity_info_alter() in our custom module. /** * Implements hook_entity_info_alter(). */ function CustomModule_entity_info_alter(&amp;$entity_info) { $entity_info['node']['view modes']['grid_pane'] = array( 'label' =&gt; t('Grid Pane'), 'custom settings' =&gt; TRUE, ); } Step3: Now apply some theme and custom layout for the content. We can add a custom node.tpl.php template for this view mode for flexible theming and use standard hook_preprocess_node() function to control the variables available in the template. To make Drupal use a different .tpl.php file for view mode we need to add a new template suggestion in hook_preprocess_node (). Copy the standard node.tpl.php for the content type you need and name it like “node--article--grid_pane.tpl.php”. /** * Implements hook_preprocess_node(). */ function CustomModule_preprocess_node(&amp;$vars) { /*dpm(entity_get_info());*/ if($vars['view_mode'] == 'grid_pane') { $vars['theme_hook_suggestions'][] = 'node__' . $vars['type'] . '__grid_pane'; } } Step4: Install the custom module and we are done. Once we create a new view mode, we can go to Admin-&gt;Structure-&gt;content types-&gt;[Manage Display] page and select which fields to display format and additional options for fields, like which image style to use for image fields etc. For example: Web Development Drupal Drupal Development Drupal 7 Leave a reply Your email address will not be published. Required fields are marker * uk (not verified) access_time 17 Feb 2019 - 19:37 Hi, It would be good if you rename the preprocess function tdbcustom_preprocess_node to CustomModule_preprocess_node Thanks, UK. webmaster access_time 17 Feb 2019 - 19:37 In reply to Hi,It would be good if you by uk (not verified) Thanks for the suggestion. Corrected the module name in the sample code. Add new comment
more_horiz
close

on 08th March 2012 / by webmaster
The attached uc_echecknet module adds support for the eCheck.net payment method of authorize.net for ubercart.  Before using the eCheck.net payment method, please check with authorize.net as to whether payment method is enabled for your account. When you select the eCheck payment method on cart/checkout page, a form to enter the bank details will be displayed.   See the attached image for details:  Drupal Drupal 7 Authorize.net Ubercart Payment Gateway Integration Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 12th March 2012 / by webmaster
The UC eCheck.Net module is a Drupal module that implements eCheck payments using Authorize.Net's eCheck.Net service. In order to use this module, you must have an Authorize.Net account with eCheck.Net enabled. This module defines a new payment method that collects bank account information on the checkout form and processes payment upon review order form submission. Until now, the UC eCheck,Net module was available for Drupal 6. We have managed to update the module to work with Drupal 7 after resolving most of the issues associated with upgrading a module. Details The attached uc_echecknet module adds support for the eCheck.net payment method of authorize.net for ubercart. Before using the eCheck.net payment method, please check with authorize.net as to whether the payment method is enabled for your account. When you select the eCheck payment method on cart/checkout page, a form to enter the bank details will be displayed. See the image for details.   Download uc_echeck.Net Drupal module We have managed to sort out the issues during upgradation to come up with a solid working Drupal 7 module. However in the event that you do find any bugs please feel free to report them to us to help us improve the code. */ Web Development Drupal Zyxware Drupal Modules Drupal Development Drupal 7 Drupal Contributions Leave a reply Your email address will not be published. Required fields are marker *
Leave a reply
Your email address will not be published. Required fields are marker *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.