JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<link rel="stylesheet" href="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.fancybox.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.fancybox.pack.js"></script>
<div class="zoom-wrapper">
<div class="zoom-left">
<img style="border:1px solid #e8e8e6;" class="zoom_03" src="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"
width="411"  />
<div id="gallery_01" style="width="500pxfloat:left; ">
 
<a  href="#" class="elevatezoom-gallery" data-update="" 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="tester" 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="tester" class="elevatezoom-gallery" 
    ...

JavaScript

$(document).ready(function () {

$(".zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer'}); 


$(".zoom_03").bind("click", function(e) {  
  var ez =   $('.zoom_03').data('elevateZoom');	
	$.fancybox(ez.getGalleryList());
  return false;
}); 

});