JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

HTML

<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Smooth-Image-Enlargement-Plugin-Zoomer/jquery.fs.zoomer.css">
<script src="https://www.jqueryscript.net/demo/Smooth-Image-Enlargement-Plugin-Zoomer/ie/jquery.fs.zoetrope.min.js"></script>
<button class="zoominn"> Zoomin  </button>
				<button class="zoomoutt"> Zoomout</button>
<div class="zoomer_wrapper zoomer_basic">
					<img src="http://www.w3schools.com/css/img_fjords.jpg">
          
				</div>

CSS

.zoomer_wrapper { border: 1px solid #ddd; border-radius: 3px; height: 500px; margin: 10px 0; overflow: hidden; width: 100%; }

JavaScript

$(document).ready(function() {



$(".zoomer_basic").zoomer();
$(".zoominn").click(function() // click on zoom
										  {
				
        $(".demo .zoomer_basic").zoomer('zoomInn');
					
				});
				

});




/* 
 * Zoomer v3.1.0 - 2015-12-39
 * A jQuery plugin for smooth image exploration. Part of the formstone library. 
 * http://classic.formstone.it/components/zoomer/ 
 * 
 * Copyright 2015 Ben Plum; MIT Licensed 
 *                Marc Brooks; MIT Licensed
 */ 

;(function ($, window) {
	"use strict";

	var $window = $(window),
		$instances,
		animating = false,
		transformSupported = false;

	/**
	 * @options
	 * @param callback [function] <$.noop> ""
	 * @param controls.postion [string] <"bottom"> "Position of default controls"
	 * @param controls.zoomIn [string] <> "Custom zoom control selector"
	 * @param controls.zoomOut [string] <> "Custom zoom control selector"
	 * @param controls.next [string] <> "Custom pagination control selector"
	 * @param controls.previous [string] <> "Custom pagination control selector"
	 * @param customClass [string] <''> "Class applied to instance"
	 * @param enertia [number] <0.2> "Zoom smoothing (0.1 = butter, 0.9 = sandpaper)"
	 * @param increment [number] <0.01> "Zoom speed (0.01 = tortoise, 0.1 = hare)"
	 * @param marginMin [] <> ""
	 * @param marginMax [] <> ""
	 * @param retina [boolean] <false> "Flag for retina image support"
	 * @param source [string | object] <null> "Source image (string) or tiles (object)"
	 */
	var options = {
		callback: $.noop,
		controls: {
			position: "bottom",
			zoomIn: null,
			zoomOut: null,
			next: null,
			previous: null
		},
		customClass: "",
		enertia: 0.2,
		increment: 0.01,
		marginMin: 30, // Min bounds
		marginMax: 100, // Max bounds
		retina: false,
		source: null
	};

	// Internal data
	var properties = {
		images: [],
		aspect: "",
		action: "",
		lastAction: "",
		keyDownTime: 0,
		marginReal: 0,
		originalDOM: "",

		// Gallery
		gallery: false,
		index: 0,

		//...