Drupal + PhotoSwipe + CloudZoom

Making work together PhotoSwipe module and CloudZoom jquery script (v3.x) in Drupal 7.

What we get:

1. Image gallery with big one and small images at the bottom;

2. Big image will have magnifier (zoom, lens) and on click show original image as gallery for swiping;

3. Smalls at the bottom as slider of images - unlimit count;

4. These plugins have mobile support, and easily work on android/iphone;

5. I won't use Drupal CloudZoom module, since it's use the old version of CloudZoom plugin (but, of course it's free).

Let's start coding and setup:

1. I'll setup for article node type with image_field - multivalued image field.

2. Download and install PhotoSwipe module and it's jquery script into libraries from above links.

3. Create image style: "scale01" - scale 300x300. Important: cropping shouldn't applied to this style, otherwise zoom will work incorrectly. Also I use ready to use "thumbnail" for small images. You can use own styles, in this case rename style names in code (see comments).

4. Add to your theme downloaded CloudZoom files as next (v3.1, you can use trial, if no want to buy):

  • THEME/js/cloudzoom/ajax-loader.gif
  • THEME/js/cloudzoom/cloudzoom.css
  • THEME/js/cloudzoom/cloudzoom.js
  • THEME/js/cloudzoom/thumbelina.css
  • THEME/js/cloudzoom/thumbelina.js

5. Add to your theme template.php file next:


/**
 * Override or insert variables into the page template.
 */
function THEME_preprocess_page(&$variables) {
  // ...
  // I want to show for article node type. You can choose any rule...
  if (isset($variables['node']) && ($variables['node']->type == 'article')) {
    drupal_add_js(drupal_get_path('theme', 'YOURTHEME') . '/js/cloudzoom/cloudzoom.js');
    drupal_add_js(drupal_get_path('theme', 'YOURTHEME') . '/js/cloudzoom/thumbelina.js');
    drupal_add_css(drupal_get_path('theme', 'YOURTHEME') . '/js/cloudzoom/cloudzoom.css');
    drupal_add_css(drupal_get_path('theme', 'YOURTHEME') . '/js/cloudzoom/thumbelina.css');

    // Rename script.js to your own js file in next line, if you already have one 
    drupal_add_js(drupal_get_path('theme', 'YOURTHEME') . '/js/script.js');

    photoswipe_load_assets();
  }
  // ...
}

6. Add next big code to page--article.tpl.php. Create own if no one by copying node.tpl.php and renaming it to the page--article.tpl.php (or use own templates).

<div id="bigimg1" class="img">
<?php
  // We use wrapper
  $wrapper = entity_metadata_wrapper('node', $node);
  if (isset($wrapper->field_image[0]->file)) {
    // Make first image big one
    $file = $wrapper->field_image[0]->file->value();
    $title = isset($wrapper->field_image[0]->title) ? $wrapper->field_image[0]->title->value() : '';
    print theme('image_style', array(
      'style_name' => 'scale01', // Rename this to your own style.
      'path' => $file->uri,
      'attributes' => array(
        'title' => $title,
        'class' => 'cloudzoom',
        // next are zooming options, read CloudZoom documentation for additional info
        'data-cloudzoom' => "zoomSizeMode:'zoom', zoomPosition: 4, autoInside:550, captionPosition:'bottom', " . 
          "zoomImage:'" . file_create_url($file->uri) . "'",
      ),
    ));
  }

?>
</div>

<?php
  // Collect multivalued images into item list for thumbs
  $li = array();
  $inv = array();
  foreach ($wrapper->field_image->getIterator() as $delta => $item_wrapper) {
    $file = $item_wrapper->file->value();
    $title = isset($item_wrapper->title) ? $item_wrapper->title->value() : '';

    if (!isset($file->width) || !isset($file->height)) {
      $fs = image_get_info($file->uri);
      $file->width = $fs['width'];
      $file->height = $fs['height'];
    }

    $inv[] = l('', file_create_url($file->uri), array('attributes' => array('class' => 'photoswipe', 'data-size' => $file->width . 'x' . $file->height, 'data-overlay-title' => $title)));
    $midimg = image_style_url('scale01', $file->uri);
    $li[] = theme('image_style', array(
      'style_name' => 'thumbnail', // Rename, if you use own thumb style
      'path' => $file->uri,
      'attributes' => array(
        'title' => $title,
        'class' => 'cloudzoom-gallery',
        'data-cloudzoom' => "useZoom:'.cloudzoom', image:'" . $midimg . "', zoomImage:'" . file_create_url($file->uri) . "'",
      ),
    ));
  }

?>
<div id="slider1">
  <div class="thumbelina-but horiz left disabled">˂</div>
<?php
  print theme('item_list', array('items' => $li, 'attributes' => array('class' => 'thumbelina')));
?>
  <div class="thumbelina-but horiz right">˃</div>
</div>
<div class="photoswipe-gallery element-invisible">
  <?php
    // This is printing invisible links, for simulation PhotoSwipe click
    print implode('', $inv);
  ?>
</div>

7. Add script.js to your theme (or use own custom js):

(function($) {

/**
 * Custom js code.
 */
Drupal.behaviors.custom_bhvr = {
  attach: function (context, settings) {
    var active_tl = 0;
    if (jQuery().Thumbelina) {
      CloudZoom.quickStart();

      $('#slider1').Thumbelina({
        maxSpeed: 50,
        $bwdBut:$('#slider1 .left'), 
        $fwdBut:$('#slider1 .right')
      });

      $('#slider1 .cloudzoom-gallery').click(function() {
        active_tl = $('#slider1 .cloudzoom-gallery').index(this);
      });
    }

    if (Drupal.behaviors.photoswipe !== undefined) {
      $('.cloudzoom').bind('click',function() {
        var cloudZoom = $(this).data('CloudZoom');
        cloudZoom.closeZoom();
        $('a.photoswipe').eq(active_tl).click();
        return false;
      });
    }

  }
};

})(jQuery);

8. Add fixing CSS styles for fixing slider to the image styles:

#slider1 {
  width: 300px;
  position: relative;
  height: 100px;
  margin-left: 20px;
}
#slider1 img {
  cursor: pointer;
}
.thumbelina-but.horiz {
  height: 100px;
  line-height: 100px;
  top: 0;
}

Try click above images, slide and swipe...

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.