Image Zoom Tour with jQuery

Image Zoom Tour with jQuery
File Size: 517 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Image Zoom Tour with jQuery that zoom into certain parts of the image by clicking on tags, using another image for the closer view.

Usage:

1. Include jQuery Library and other necessary javascripts:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.zoomtour.js"></script>

2. Call the plugin

<script type="text/javascript">
$(function() {
	$('#zt-container').zoomtour();
});
</script>

3. Markup

<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>

4. Options

data-dir is either 1 or -1 depending on whether we want to “zoom in” (1) or “zoom back out” (-1)
data-link will indicate to which item we connect the tag to (based on the data-id we give to each item)
data-zoom is the factor of zooming. Set very low, the image we zoom into or zoom back to will only enlarge slightly.
data-speed the animation speed in milliseconds
data-delay the delay time for the new image to appear

This awesome jQuery plugin is developed by codrops. For more Advanced Usages, please check the demo page or visit the official website.