On Click Zoom Image Tour with jQuery

File Size:518.06 KB
Views Total:255
Last Update:December 25, 2017
Publish Date:December 25, 2017
Official Website:Go to website
License:MIT

Today we are share a image zoom tour  on click with back button . Showing a main image  with selected area image border on click to see zoom image  with different-different effect with more example.

How It Use :

1.  Use and include the files Html :

<div id="zt-container" class="zt-container">
	<div class="zt-item" data-id="zt-item-1">
		<img class="zt-current" src="images/image1.jpg" />
		<div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="5" data-speed="700" data-delay="50" style="top:138px;left:151px;"></div>
		<div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="6" data-speed="700" data-delay="50" style="top:253px;left:520px;"></div>
	</div>
	<div class="zt-item" data-id="zt-item-2">
		<img class="zt-current" src="images/image1_1.jpg" />
		<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="5" data-speed="500" data-delay="0"></div>
	</div>		
	<div class="zt-item" data-id="zt-item-3">
		<img class="zt-current" src="images/image2_2.jpg" />
		<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="6" data-speed="500" data-delay="0"></div>
	</div>			
</div>

2. Use and include the files jquery :

<script type="text/javascript">
			$(function() {
				$('#zt-container').zoomtour({
	// if true the tags are rotated depending on their position
	rotation		: true,
	// zoom out animation easing. Example: easeOutBounce , easeOutBack	
	zoominEasing	: '',  
	// zoom out animation easing
	zoomoutEasing	: ''	
});
			});
</script>

Done 🙂