Image Zoom Tour with jQuery

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.