Youtube Video Fancybox Gallery In Drupal

Youtube Video Fancybox Gallery

In technical terms: Creating field formatter to display youtube videos in fancybox, when clicking on video thumbnails.

Fancybox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page, it has received widespread popularity due to its simple and elegant style. There are modules available to display fancybox type content, but I have faced couple of issues while implementing the same, hence I have integrated fancybox library with Drupal using Media and Media Youtube modules.

1. To create gallery of images & clicking on image open related video in box, follow the steps:

2. You will need to install Media and Media Youtube module with its dependencies.

  • Add code mentioned in step 3 in previously created custom module or you can create a new custom module by following the steps:
  • Go to drupal modules directory i.e /sites/all/modules and create a directory named 'custom' and inside custom, create another directory named 'gallery'. So final path of your custom module is /sites/all/modules/custom/gallery

At least two files are needed to create a module. These are .info and  .module. So create gallery.info and gallery.module file in gallery directory. Remember that file name must match with your module name. We additionally need fancybox js & css. Place fancybox css in css/fancybox folder so that its path is "css/fancybox/jquery.fancybox.css". Also add js in js/fancybox folder so that path of js files are "js/fancybox/jquery.fancybox.pack.js" & "js/fancybox/jquery.fancybox-media.js".

Youtube Video Fancybox Gallery
Youtube Video Fancybox Gallery
Youtube Video Fancybox Gallery

Also add custom.css in css folder with following code:

.fancybox-media::before {
            background: transparent url("../image/play.png") no-repeat scroll center center / 30px auto;
            content: " ";
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 9999;
          }
          .fancybox-media {
            display: inline-block;
            position: relative;
          }

 

Youtube Video Fancybox Gallery

Add custom.js in js folder with following code:

 jQuery(document).ready(function(){
            jQuery('.fancybox-media').fancybox({
              openEffect  : 'none',
              closeEffect : 'none',
              helpers : {
                media : {}
              }
            });
          });

 

Youtube Video Fancybox Gallery

Structure of .info file (Follow https://www.drupal.org/node/542202 to add more information in .info file)

name = Gallery
          description = Video Fancybox Gallery
          package = Gallery
          core = 7.x

          stylesheets[all][] = css/fancybox/jquery.fancybox.css
          stylesheets[all][] = css/custom.css

          ; SCRIPTS
          scripts[] = 'js/fancybox/jquery.fancybox.pack.js'
          scripts[] = 'js/fancybox/jquery.fancybox-media.js'
          scripts[] = 'js/custom.js'

 

Youtube Video Fancybox Gallery

3. Now write the following code in gallery.module file.

Here .module file acts as a .php file. So do not forget to use php opening tags. Do not close the php tag. Also Do not use php short tag i.e Always use php long tag. Add an extra blank line at the end of the file.

<?php
      /**
       * @file
       * Create a field formatter
       */


      /**
       * Implements hook_field_formatter_info().
       */
      function gallery_field_formatter_info() {
        return array(
          'video_formatter' => array(
            'label' => t('Video Fancybox'),
            'field types' => array('file'),
            'default settings' => array(
              'image_style' => '',
            ),
            'file formatter' => array(
              'mime types' => array('video/youtube'),
            ),
          ),
        );
      }

      /*
       * Create a view formatter to build out the get directions block
       */
      function gallery_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {

        // Set Fancybox popup on video formatter by generating image
        if( $display['type'] == 'video_formatter') {
          $element = array();
          foreach ($items as $key => $value) {
            $scheme = file_uri_scheme($value['uri']);
            if ($scheme == 'youtube') {
              $wrapper = file_stream_wrapper_get_instance_by_uri($value['uri']);
              $url = file_create_url($value['uri']);


              $image = array(
                '#theme' => 'image',
                '#path' => $wrapper->getLocalThumbnailPath(),
                '#alt' => !empty(trim($value['alt'])) ? $value['alt'] : $value['filename'],
              );

              $element[$key]['youtube_title'] = array(
                '#markup' => '<h3><a href="/file/'.$value['fid'].'">'.$value['filename'].'</a></h3>'
              );
              $element[$key]['youtube_image'] = array(
                '#theme' => 'link',
                '#text' => drupal_render($image),
                '#path' => $url,
                '#options' => array(
                  'attributes' => array('class' => array('fancybox-media')),
                  'html' => TRUE,
                ),
              );
            }
          }

          // Return custom formatters
          return $element;
        }
      }

 

4Do not forget to enable the module from /admin/modules.

Youtube Video Fancybox Gallery

5. Now go to any content type ex. Gallery & add a new file field as per screenshots.

Youtube Video Fancybox Gallery
Youtube Video Fancybox Gallery
Youtube Video Fancybox Gallery

6. From manage display, set "FORMAT" as "Video Fancybox".

Youtube Video Fancybox Gallery

7. Add content & your gallery is ready. :)

Youtube Video Fancybox Gallery
Youtube Video Fancybox Gallery

Hope this blog is quickly and easily guide to Youtube video fancybox on your website. Need more assistance regarding Web Design and Development Services Contact us now!