In this section, you will learn how to zoom an image section by hovering mouse on it using jQuery. The plug-in ,we are using here, is "zoom.js". For zooming an image you must have image in small size as well as in big size both must be reside in same folder. After that you have to set the image selection area by setting "xzoom" & "yzoom" attribute . These attributes create a moving box which is used for selecting particular section of the image. When you hover this box on image's any area , it will zoom that area.
|<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="zoom/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="zoom/zoom.css" type="text/css" media="screen" />
<div id="wrapper" >
<img src="zoom/jquery_small.jpeg" alt="light" jqimg="zoom/jquery_big.jpeg">
When you hover Image on particular section :
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.