JSFiddle - React, Tailwind, and code Playground

by shorif2000

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="https://gateway.spectrumasa.com:10443/mcmap/plugins/magiczoom-commercial/magiczoom/magiczoom.js"></script>
<link rel="stylesheet" href="https://gateway.spectrumasa.com:10443/mcmap/plugins/magiczoom-commercial/magiczoom/magiczoom.css">
<div id="seisUrl" style="display:none">
<a class="fancyboxseismic" href="https://gateway.spectrumasa.com:10443/mcmap/public/filespool/2/270/thumbnail_seismic_CroatianAdriatic3.jpg" rel="zoom-id:zoom; seismic" rev="https://gateway.spectrumasa.com:10443/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic3.jpg">    
</a>
<a class="fancyboxseismic" href="https://gateway.spectrumasa.com:10443/mcmap/public/filespool/2/270/thumbnail_seismic_CroatianAdriatic2.jpg" rel="zoom-id:zoom; seismic" rev="https://gateway.spectrumasa.com:10443/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic2.jpg">    
</a>
</div>

JavaScript

function basename(path) {
    return path.replace( /.*\//, "" );
}

function dirname(path) {
    return path.match( /.*\// );
}

// Activate fancyBox
$(".fancyboxseismic").fancybox({
		padding: 1,
	    overlayOpacity: .1,
	    overlayShow: true,
	    margin      : [20, 60, 20, 60],
	    helpers : { 
	    	  overlay : {closeClick: false} // disable close on click anywhere on screen
	    	},
	    afterLoad: function() {	  
	    },
		afterShow:function(){ //apply zoom function
			filename = basename(this.href);
			filepath = dirname(this.href);
			var large = filename.split("thumbnail_");			
			var $image = $('.fancybox-image');			
			
			$(this.inner[0].childNodes[0]).wrap(
				    $('<a />')
				     .attr('href', filepath + large[1] ) // this.href gets the "href" of the current image
				     .addClass('MagicZoom')
				     .attr("id","zoom")				     
				    ); // wrap

			MagicZoom.options = {					
				'opacity-reverse' : true,
			    'hint' : false,
			    'drag-mode' : true,
			    'preserve-position' : true,
			    'click-to-activate' : true,
			    'selectors-mouseover-delay' : 200,
			    'show-title' : 'false',
			    'zoom-position' : 'inner'
			}
			MagicZoom.refresh(); 
			
			//resize nav controls
			$('.fancybox-nav').each(function(){	    		
	    		$(this).attr('style', 'width:10% !important');	    		
	    	});			
		}
	});


// Launch fancyBox on first element
$(".fancyboxseismic").trigger('click');