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").each(function () {
        var $this = $(this);
        var galery = $this.next().attr('id');        
        $this.elevateZoom({
            gallery: galery,
            cursor: 'pointer'
        })
    });


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

});