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>Firetitle>
<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>
<div id="prevthumb">div>
<div id="nextthumb">div>
<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>
<div id="progress-back" class="load-item">
<div id="progress-bar">div>
div>
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/>a>
<div id="slidecounter">
<span class="slidenumber">span> / <span class="totalslides">span>
div>
<div id="slidecaption">div>
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/>a>
<ul id="slide-list">ul>
div>
div>
body>
html>
Regards,
priya
Pankaj PandeyPosted Jun 7, 2013, 2:51 AM
Mark as answered if help..
Pankaj PandeyPosted Jun 7, 2013, 2:41 AM
download code and use it
http://www.c-sharpcorner.com/Blogs/11742/zoom-image-in-different-way-in-Asp-Net.aspx