Description:-
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.
Download files:- JQuery.js, JQuery.ImageLens.js
Default.aspx:-
<div><table><tr><td>
<p><i>Quick Note
- If you are using IE 8 or lower than you will see a square lens</i></p>
<h3>Default
lens</h3>
<p><img id="zoom_01"
src="images/Chrysanthemum.jpg"
width="384"
height="240"
/></p>
<p> </p><h3>Custom
lens size</h3>
<p><img id="zoom_02"
src="images/Desert.jpg"
width="384"
height="240"
/></p>
</td><td><p> </p>
<h3>Custom
image source</h3><p>
<img id="zoom_03"
src="images/Jellyfish.jpg"
width="384"
height="240"
/></p>
<p> </p><h3>Other lens
properties</h3>
<p><img id="zoom_04"
src="images/Penguins.jpg"
width="384"
height="240"
/></p>
</td><td valign="top"
style="text-align: right;">
</td></tr></table>
</div>
Using
JQuery and JavaScript we will create lens effect in images.
<script
src="JQuery/jquery.js"
type="text/javascript"></script>
<script
src="JQuery/jquery.imageLens.js"
type="text/javascript"></script>
<script
type="text/javascript"
language="javascript">
$(function () {
$("#zoom_01").imageLens();
$("#zoom_02").imageLens({
lensSize: 200 });
$("#zoom_03").imageLens({
imageSrc: "images/Jellyfish.jpg"
});
$("#zoom_04").imageLens({
borderSize: 8, borderColor: "#13f"
});
});
</script>
Use
Some Style for Create Pretty Layout.
<style type="text/css">
body{margin: 0px; font-family: "Trebuchet
MS" , Arial,
Sans-Serif; font-size:
14px; }
a{color: #0066CC; text-decoration: none;
}
a:hover{color: #CC0000; text-decoration: underline;
}
</style>
Now
Open Webpage in your browser to see lens effects.
Thanks for comments.....