gistfile1.txt

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>
<div class="easyzoom easyzoom--overlay">
    <a href="http://cssglobe.com/lab/easyzoom/small.jpg" >
        <img src="http://cssglobe.com/lab/easyzoom/large.jpg" alt="" height="300"/>
    </a>
</div>




TEMP2

<script type="text/javascript" src="https://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>

<script type="text/javascript">
	
jQuery(function($){
	
	$('a.zoom').easyZoom();

});

<p><a href="http://cssglobe.com/lab/easyzoom/large.jpg" class="zoom"><img src="http://cssglobe.com/lab/easyzoom/small.jpg" alt="New York"></a></p>

TEMP3


<a href="http://cssglobe.com/lab/easyzoom/large.jpg" class="easyzoom">
<img src="http://cssglobe.com/lab/easyzoom/small.jpg" alt="New York"/>
</a>

<script type="text/javascript" src="https://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>


TEMP4

			<div class="easyzoom easyzoom--overlay">
				<a href="https://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg">
					<img src="https://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg" alt="" width="640" height="360" />
				</a>
			</div>
			
			
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="https://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>
	<script>
		// Instantiate EasyZoom instances
		var $easyzoom = $('.easyzoom').easyZoom();

		// Setup thumbnails example
		var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');

		$('.thumbnails').on('click', 'a', function(e) {
			var $this = $(this);

			e.preventDefault();

			// Use EasyZoom's `swap` method
			api1.swap($this.data('standard'), $this.attr('href'));
		});

		// Setup toggles example
		var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');

		$('.toggle').on('click', function() {
			var $this = $(this);

			if ($this.data("active") === true) {
				$this.text("Switch on").data("active", false);
				api2.teardown();
			} else {
				$this.text("Switch off").data("active", true);
				api2._init();
			}
		});
	</script>
	
TEMP5

			<!-- Placeholder for demo purposes only -->
			<div style="float: right; width: 310px; height: 400px; background: #EEE;"></div>

			<div class="easyzoom easyzoom--adjacent">
				<a href="https://i-like-robots.github.io/EasyZoom/example-images/2_zoom.jpg">
					<img src="https://i-like-robots.github.io/EasyZoom/example-images/2_standard.jpg" alt="" width="310" height="400" />
				</a>
			</div>
				<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="https://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>
	<script>
		// Instantiate EasyZoom instances
		var $easyzoom = $('.easyzoom').easyZoom();

		// Setup thumbnails example
		var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');

		$('.thumbnails').on('click', 'a', function(e) {
			var $this = $(this);

			e.preventDefault();

			// Use EasyZoom's `swap` method
			api1.swap($this.data('standard'), $this.attr('href'));
		});

		// Setup toggles example
		var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');

		$('.toggle').on('click', function() {
			var $this = $(this);

			if ($this.data("active") === true) {
				$this.text("Switch on").data("active", false);
				api2.teardown();
			} else {
				$this.text("Switch off").data("active", true);
				api2._init();
			}
		});
	</script>
	
TEMP6
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://cssglobe.com/lab/easyzoom/easyzoom.js"></script>
<script type="text/javascript">
	
jQuery(function($){
	
	$('a.zoom').easyZoom();

});

</script>
<style>

/*

Copy/paste this into your own stylesheet.
Edit width, height and placement of the dynamically created image zoom box. 

*/

#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:60px;
	left:400px;
	overflow:hidden;
	-moz-box-shadow:0 0 10px #777;
	-webkit-box-shadow:0 0 10px #777;
	box-shadow:0 0 10px #777;
	/* vertical and horizontal alignment used for preloader text */
	line-height:400px;
	text-align:center;
	}

</style>

<p><a href="http://cssglobe.com/lab/easyzoom/large.jpg" class="zoom"><img src="http://cssglobe.com/lab/easyzoom/small.jpg" alt="New York"></a></p>

TEMP7
        <div class="zoom-box">
            <img src="https://source.unsplash.com/6TIpY5KqCYo/600x450" width="200" height="150" />
        </div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/magnify-image-hover/js/jquery.jqZoom.js"></script>
<script>
    $(function(){
        $("img").jqZoom({
            selectorWidth: 30,
            selectorHeight: 30,
            viewerWidth: 400,
            viewerHeight: 300
        });

    })
</script>

<script type="text/javascript" src="https://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script> <script type="text/javascript"> jQuery(function($){ $('a.zoom').easyZoom(); });