JSFiddle - React, Tailwind, and code Playground

by Nadja Voss

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
<div id="gridwrap">

 <div class="griddiv">
  <img id="main01" class="imgzoom" src="http://sauva.co/editora/wp-content/uploads/sites/6/2017/06/teste/sheep.jpg" width="250px">
   <a class="buttongallery launchergallery" href="javascript:;" id="launchergallery">gallery</a>
   <a id="buttonfull launcherfull" href="javascript:;" id="launcherfull">fullscreen</a>
   <a href="" class="zoomin">ZOOM+</a>
   <a href="" class="zoomout">ZOOM-</a>

  <div class="hidden" id="fancybox-popup-form">
    <a href="http://sauva.co/editora/wp-content/uploads/sites/6/2017/06/teste/01.jpg" class="fancybox" rel="gallery"><img src="http://sauva.co/editora/wp-content/uploads/sites/6/2017/06/teste/01.jpg"></a>
    <a href="http://sauva.co/editora/wp-content/uploads/sites/6/2017/06/teste/02.jpg" class="fancybox" rel="gallery"><img src="http://sauva.co/editora/wp-content/uploads/sites/6/2017/06/teste/02.jpg"></a>
        <a href="http://sauva.co/editora/wp-content/uploads/sites/6/2017/06/teste/sheep.jpg" class="fancyboxfull"><img src="http://sauva.co/editora/wp-content/uploads/sites/6/2017/06/teste/sheep.jpg"></a>
  </div>
</div>

 <div class="griddiv">
  <img id="main02" class="imgzoom" src="http://sauva.co/editora/wp-content/uploads/sites/6/2017/06/teste/desert.jpg" width="250px">
   <a class="buttongallery launchergallery" href="javascript:;" id="launchergallery">gallery</a>
   <a class="buttonfull launcherfull" href="javascript:;" id="launcherfull">fullscreen</a>
   <a href="" class="zoomin">ZOOM+</a>
   <a href="" class="zoomout">ZOOM-</a>

  <div class="hidden" id="fancybox-popup-form">
    <a href="http://sauva.co/editora/wp-content/uploads/sites/6/2017/06/teste/03.jpg" class="fancybox" rel="gallery"><img...

CSS

.hidden { display: none; }
#gridwrap {width:100%;padding-left:5%;}
.griddiv {width:250px;height:350px;float:left;background:white;border:0px solid black;}

JavaScript

$(".fancybox").fancybox();
$(".launchergallery").on("click", function(){
 $(".fancybox").eq(0).trigger("click");
});
$(".fancyboxfull").fancybox();
$(".launcherfull").on("click", function(){
 $(".fancyboxfull").eq(0).trigger("click");
});

$(document).on('click','.elevatezoom-gallery',function(e){
  e.preventDefault();
  var dataZoomImg = $(this).attr('data-zoom-image');
  var dataImg = $(this).attr('data-image');
  //alert(dataImgg + dataZoomImg);
  var mainImg = $('.imgzoom');
  //mainImg.attr('src',dataImg).attr('data-zoom-image',dataZoomImg).elevateZoom();
// $("#img_01").data('zoom-image',dataZoomImg).elevateZoom();
  mainImg.attr('src',dataImg);
 mainImg.data('zoom-image',dataZoomImg).elevateZoom();
  
});
$(document).on('click','.zoomin',function(e){
  e.preventDefault();
  $("#main01").elevateZoom();
    $("#main02").elevateZoom();

})
$(document).on('click','.zoomout',function(e){
  e.preventDefault();
         $('.zoomContainer').remove();
         })