Image Zoom Tour with jQuery

Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the "zoom" effect by enlarging the current image and fading in the new one.
ImageZoomTour

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.

The images used in the demos can be found here:
image1: City Crowd
image1_5: Office
image2: Ikea Room
image3_n: Portimão Marina
Background Pattern by http://www.blunia.com/ on http://subtlepatterns.com/

The HTML Structure

For the HTML structure we will have a main container and each image inside of a div with the class “zt-item”:

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

<img class="zt-current" src="images/imageX.jpg" /> is the image in each step. The item then have tags with certain attributes.
The data attributes are the following:

  • 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

The example structure above has the first initial image (zt-item-1) with two tags that lead to zt-item-2 and zt-item-3. zt-item-2 and zt-item-3 only have the back tag. As you can see, the back tag has another class “zt-tag-back” and a data-dir value of -1.

The position of the tags is defined in the style attribute and you can also add another size for it, too.

Options

The following are the default options:

$('#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	: ''	
});

We hope you like this little script and find it useful!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 56

Comments are closed.
  1. Thanks for the post, I can see this Jquery coming in pretty useful in the not to distant future! Im sure with a few additions we can have product names titles etc displaying too. Keep up the good work.

  2. Really cool, reminds me lately of the movie Limitless… at the beginning of the movie there was a kind of “infinite zoom”

  3. Simply great, thanks for a gently share Mary Lou !

    For all people: any suggestion for a way to automate-timing the tour- zooming ?

  4. As always great script!
    Is it possible to integrate it in a WordPress theme? Some of you has tryed to do this? Thanks

  5. great stuff, love it.
    but when I tried it using Jquery hashchange event plugin by Ben Alman it seems failed to work.
    can you help me?