JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<ul class="zoom-pan">
       <li><img src="http://dev.assets.huffingtonpost.com/gadgets/slideshows/11041/slide_11041_145442_large.jpg"></li>
       <li><img src="http://placekitten.com/550/400"></li>
</ul>

<a class="sfajax_zoom_tool" href="#">zoom Image</a>

JavaScript

/*
    Zoom, Pan and Navigation Window jQuery Plugin
    @author Sobia Ali ([email protected])
    
*/
(function($){
    
    // Define any defaults here. 
    var defaultOptions = {
        
        zoomInElem : '', // if empty, clicking on the image itself will activate zoom
        navWindowRatio : 4, // used to determine the size of the navigation window at the bottom left
        zoomedImageRatio : 2, // if no height and width provided for the large image, this ratio will be used
        largeImgWidth : '1024',
        largeImgHeight : '745',
        
        
        // default styles
        css: [
            '.zoom-wrapper {position:relative; overflow:hidden;}'+
            '.zoom-wrapper .zoom-image {position:absolute; left:0; top:0;}'+
            '.zoom-wrapper .zoom-nav-window {position:absolute; bottom:0; left:0; z-index:3; overflow:hidden;}'+
            '.zoom-wrapper .zoom-nav-opaque {opacity:0.5; background-color:#000; z-index:4; position:absolute; top:0; left:0;}'+
            '.zoom-wrapper .mini-zoom-window {position:absolute; overflow:hidden; top:0; left:0;}'+
            '.zoom-wrapper .mini-zoom-container {position:relative; height:20px; width:20px;}'+
            '.zoom-wrapper .mini-zoom-image {position:absolute; left:0; top:0; z-index:5;}'+
            '.zoom-wrapper .zoom-out {background-color:#333; color:#fff; text-align:center; display:block; margin-top:3px; padding:2px 0;}'+
            '.zoom-wrapper .zoom-out a {color:#fff; font-size:11px; text-decoration:none;}'
        ].join('')
        
    };

    $.zoomAndPan = function( customOptions ) {
        
        if ( customOptions.elems ) {
            
            var $zoomAndPanImages = customOptions.elems,
                cssLoaded = false;
            
            customOptions = customOptions || {};
            
            $zoomAndPanImages.each( function(index) {
            
                
                // Overriding default options with any custom optionss         ...