ASP.NET - design

Asked By hiren dhameliya on 09-Nov-11 05:02 PM
HI, there 
    Currently i making e-commerce website. I want to know how i can zoom feature . It means customer click or drag mouse  on image then image automatically zoom . 

plz reply me as soon as possible ..
thankx
Riley K replied to hiren dhameliya on 09-Nov-11 08:30 PM



You can use jQuery for zooming of images effect in your project

It has got a simple plugin which is easy to use

here is a good example of it

http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx

Here is another site that i suggest for good image effects, ready to use scripts

http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm


Regards
Jitendra Faye replied to hiren dhameliya on 09-Nov-11 10:50 PM

Use this javascript function-

<

script type="text/jscript">

var nW, nH, oH, oW;

function zoomToggle(iWideSmall, iHighSmall, iWideLarge, iHighLarge, whichImage) {

oW = whichImage.style.width; oH = whichImage.style.height;

if ((oW == iWideLarge) || (oH == iHighLarge)) {

nW = iWideSmall; nH = iHighSmall;

}

else {

nW = iWideLarge; nH = iHighLarge;

}

whichImage.style.width = nW;

whichImage.style.height = nH;

}

</

script>

call this function in onmouseover() Event.

<

img alt="" border="0" src="Images/flash.gif" onmouseover="zoomToggle('100px','100px','200px','200px',this);" style="width: 63px; height: 59px"/>

Try this and let me know.
Suchit shah replied to hiren dhameliya on 10-Nov-11 12:03 AM

Ajax seadragon control, It has zoom and reset as well as fullscreen feature.

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Seadragon/Seadragon.aspx


http://www.codeproject.com/KB/web-image/ASPImaging1.aspx

http://www.obout.com/imagezoom/
Anoop S replied to hiren dhameliya on 10-Nov-11 12:10 AM
Zoom In

var parentwin = external.menuArguments;
var doc = parentwin.document;
var w;
var h;

if ( parentwin.event.srcElement.tagName == "IMG" )
{
h = parentwin.event.srcElement.height * 1.414;
parentwin.event.srcElement.height = h;

w = parentwin.event.srcElement.width * 1.414;
parentwin.event.srcElement.width = w;
}
else
alert ("You must right-click on an image to Zoom.");


===================

Zoom Out

var parentwin = external.menuArguments;
var doc = parentwin.document;
var w;
var h;

if ( parentwin.event.srcElement.tagName == "IMG" )
{
h = parentwin.event.srcElement.height / 1.414;
parentwin.event.srcElement.height = h;

w = parentwin.event.srcElement.width / 1.414;
parentwin.event.srcElement.width = w;
}
else
alert ("You must right-click on an image to Zoom.");
dipa ahuja replied to hiren dhameliya on 10-Nov-11 03:06 AM
Untitled document
Use FancyBox

Download the fancybox library:
 
http://fancybox.net/
 
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script src="fbox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
 
   <link href="fbox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
     $(document).ready(function () {
 
       $("a#small_Img").fancybox();
     });
  </script>
 
   <a id="small_Img" href="1.bmp">
     <img src="1.bmp" height="100px" width="150px" alt="" /></a>