Description:-
JavaScript:-
We will Assign Some Script for Generating different Effect of Zoom
In this
example we will see how to use lens zoom effects in asp.net. Here we will
create images and using JQuery through we will zoom image in different lens in
browser. It will magnify your image in browser to see.
Default.aspx:-
<div><table><tr><td>
<p><img id="image1" border="0" src="images/Desert.jpg" style="width: 300px; height: 225px" /></p><p> </p>
<p><img id="image2" border="0" src="images/Jellyfish.jpg" style="width: 300px; height: 225px" /></p></td>
<td><p> </p><p>
<img id="image3" border="0" src="images/Penguins.jpg" style="width: 300px; height: 225px" /></p></td>
<td valign="top" style="text-align: right;">
</td></tr></table>
</div>
Using
JQuery we will create lens effect in images.
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/Umesh.js"></script>
JavaScript:-
We will Assign Some Script for Generating different Effect of Zoom
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300, 300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'images/Desert.jpg' //<--
No comma after last option!
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400, 400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: 'images/Jellyfish.jpg' //<--
No comma after last option!
})
$('#image3').addimagezoom()
})
</script>
Style:-
Use Some Style for Create Pretty Layout.
Use Some Style for Create Pretty Layout.
<style type="text/css">
.magnifyarea{box-shadow: 5px 5px 7px #818181; -webkit-box-shadow:
5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181,
offX=5, offY=5, positive=true); background:
white; }
</style>
Now
Open Webpage in your browser to see lens effects.
Thanks for comments.....