JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<script src="http://scott-pedder.co.nz/jsfiddle/jquery.elevateZoom-3.0.8.min.js"></script>
<script src="http://scott-pedder.co.nz/jsfiddle/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="http://scott-pedder.co.nz/jsfiddle/jquery.fancybox.css">
<script src="http://scott-pedder.co.nz/jsfiddle/jquery.fancybox.js"></script>
<ul>
	
		<li><p><a class='inline' href="#inline_content">Inline HTML</a></p></li>
	</ul>


	
	<div style='display:none'>
			<div id='inline_content' style='padding:10px; background:#fff;'>
			<div class="zoom-left" id="inline1" style="width:400px;display: block;">
					<img style="border:1px solid #e8e8e6;" id="zoom_03f" 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_01f">
			 
					<a href="#" class="elevatezoom-gallery active" data-update="" data-image="http://www.elevateweb.co.uk/wp-content/uploads/2012/01/dp.gif" 
					data-zoom-image="http://www.elevateweb.co.uk/wp-content/uploads/2012/01/dp.gif">
					<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...

JavaScript

$(document).ready(function () {

$('.fancybox').fancybox();

	$(".inline").colorbox({inline:true, width:"50%"});




$("#zoom_03f").bind("click", function(e) {  
  var ez =   $('#zoom_03f').data('elevateZoom');
  ez.closeAll(); //NEW: This function force hides the lens, tint and window	
	$.fancybox(ez.getGalleryList());     
    
  return false;
}); 

}); 

$(document).bind('cbox_complete', function(){
    $("#zoom_03f").elevateZoom({constrainType:"height", constrainSize:274, zoomType: "lens", containLensZoom: true, gallery:'gallery_01f', cursor: 'pointer', galleryActiveClass: "active"}); 
});