[Solved] HTML zoom & lightbox

by


The ElevateZoom example looks flawed. The code displayed seems to have errors, like duplicate IDs in the HTML and non-existent IDs referenced in the JavaScript, and doesn’t seem to match the code being executed in the demo. Not sure what’s going on there.

Mainly, the ID you’re using to initiate ElevateZoom doesn’t exist in your HTML code. In my example below, I store the “gallery” element in a variable for later use so that I only need to specify that ID once.

I couldn’t get the ElevateZoom code to work with the recent version of FancyBox. The object provided by ElevateZoom seems not to be formatted correctly for FancyBox, so I rewrote that part.

jQuery(function($) {

  // define the gallery object
  var $gallery = $('#gallery_01');

  // Build array of objects to open in Fancybox.
  var $imgs = [];
  $('a', $gallery).each(function() {
    $imgs.push({'src': $(this).data('zoom-image')});
  });

  // Initiate ElevateZoom
  $("#zoom").elevateZoom({
    gallery: $gallery.attr('id'),
    cursor: 'pointer',
    galleryActiveClass: 'active',
    imageCrossfade: true,
    loadingIcon: '//www.elevateweb.co.uk/spinner.gif'
  });

  // Bind Fancybox to clicking the zoom image.
  // Open it to the currently active index.
  $("#zoom").on("click", function(e) {
    e.preventDefault();
    var active_index = $('a.active', $gallery).index();
    $.fancybox.open($imgs, false, active_index);
  });

});
#gallery_01 img {
  border: 2px solid white;
  width: 96px;
}

#gallery_01 .active img {
  border: 2px solid #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" rel="stylesheet" />

<img id="zoom" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg" width="411">

<div id="gallery_01">

  <a href="#" class="elevatezoom-gallery active" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg">
    <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" width="100"></a>

  <a href="#" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg">
    <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" width="100"></a>

  <a href="#" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg">
    <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" width="100"></a>

  <a href="#" class="elevatezoom-gallery" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg">
    <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" width="100"></a>

</div>

4

solved HTML zoom & lightbox