How to Zoom Image on Mouse Over Preferapely Lens Zoom in Slide show Image.
I have slide showed the images on some interval. in between i have to pause the image and zoom the particular part of the image .I am getting strugle in zoom on mouse over in slide.
how to do, pls help me.
Pls find this below code,
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fire</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
slideshow : 1, autoplay : 1, start_slide : 1,
stop_loop : 0,
random : 0,
slide_interval : 3000,
transition : 6, transition_speed : 10000, new_window : 1, pause_hover : 0, keyboard_nav : 1, performance : 1, image_protect : 1,
min_width : 0, min_height : 0, vertical_center : 1, horizontal_center : 1, fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, fit_landscape : 0,
slide_links : 'blank',
thumb_links : 1,
thumbnail_navigation : 0,
slides : [ // Slideshow Images
{image : "img/1.jpg", title : 'Zone-1', thumb : 'img/11.jpg'},
{image : 'img/2.jpg', title : 'Zone-2', thumb : 'img/22.jpg'},
{image : 'img/3.jpg', title : 'Zone-3', thumb : 'img/33.jpg'},
{image : 'img/4.jpg', title : 'Zone-4', thumb : 'img/44.jpg'},
{image : 'img/5.jpg', title : 'Zone-5', thumb : 'img/55.jpg'},
{image : 'img/6.jpg', title : 'Zone-6', thumb : 'img/66.jpg'},
{image : 'img/7.jpg', title : 'Zone-7', thumb : 'img/77.jpg'},
{image : 'img/8.jpg', title : 'Zone-8', thumb : 'img/88.jpg'},
{image : 'img/9.jpg', title : 'Zone-9', thumb : 'img/99.jpg'}
],
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
});
</script>
</head>
<style type="text/css">
ul#demo-block{ margin:0 15px 15px 15px; }
ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
ul#demo-block li a{ color:#eee; font-weight:bold; }
#gallery img{border:2px solid white;width: 96px;}
.activeborder img{border:2px solid #333 !important;}
#image
{
width: 590px;
}
</style>
<body>
<ul id="demo-block">
</ul>
<!--End of styles-->
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
</body>
</html>
Help me to do the zoom the part of the image on mouse over.
Regards,
priya