JSFiddle - React, Tailwind, and code Playground

by vaibviad

HTML

<script src="https://github.com/elevateweb/elevatezoom/blob/master/images/large/image1.jpg"></script>
<script src="https://github.com/elevateweb/elevatezoom/blob/master/images/large/image2.jpg"></script>
<script src="https://rawgit.com/elevateweb/elevatezoom/master/jquery.elevatezoom.js"></script>
<script src="https://raw.github.com/elevateweb/elevatezoom/master/jquery.elevatezoom.js"></script>

<img style="border:1px solid #e8e8e6;" id="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">
 
<a  href="#" class="elevatezoom-gallery active" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg">
    <img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-image="http://image.motortrend.com/f/roadtests/overview/1301_2013_mercedes_benz_gl450_vs_2012_e350_4matic_wagon/45952740/2013-Mercedes-Benz-GL450-front-view-in-motion.jpg" data-zoom-image="http://image.motortrend.com/f/roadtests/overview/1301_2013_mercedes_benz_gl450_vs_2012_e350_4matic_wagon/45952740/2013-Mercedes-Benz-GL450-front-view-in-motion.jpg">
<img src="http://image.motortrend.com/f/roadtests/overview/1301_2013_mercedes_benz_gl450_vs_2012_e350_4matic_wagon/45952740/2013-Mercedes-Benz-GL450-front-view-in-motion.jpg" width="100"  />
</a>

<a ...

JavaScript

//$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'crosshair', galleryActiveClass: "active", zoomType: "inner" }); 


/*var image = $('#gallery_01 a');
var zoomConfig = {  };
var zoomActive = false;

image.on('click', function(){

        $.removeData(image, 'elevateZoom');//remove zoom instance from image
  
        image.elevateZoom(zoomConfig);//initialise zoom
    
});*/
var zoomConfig = {cursor: 'crosshair', zoomType: "inner" }; 
var image = $('#gallery_01 a');
var zoomImage = $('img#zoom_03');

zoomImage.elevateZoom(zoomConfig);//initialise zoom

image.on('click', function(){
    // Remove old instance od EZ
    $('.zoomContainer').remove();
    zoomImage.removeData('elevateZoom');
    // Update source for images
    zoomImage.attr('src', $(this).data('image'));
    zoomImage.data('zoom-image', $(this).data('zoom-image'));
    // Reinitialize EZ
    zoomImage.elevateZoom(zoomConfig);
});