ARTICLE
jQuery Image Swapping gallary using ASP.NET
This tutorial is about image swapping gallery where you can showcase multiple images without jumping to another page using jQuery in ASP.NET.
Download
Files:
This tutorial is about image
swapping gallery or you can say photo album where you can showcase multiple
images without jumping to another page, generally used for personal websites,
blogs etc.
Example
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>jQuery
Photo Album</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("h2").append('<em></em>')
$(".thumbs a").click(function
() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src:
largePath, alt: largeAlt });
$("h2 em").html("
(" + largeAlt + ")");
return false;
});
});
</script>
<style type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 454px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg
{
border: solid 1px
#ccc;
width: 439px;
height: 248px;
padding: 5px;
}
.thumbs img {
border: solid 1px
#ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color:
#FF9900;
}
</style>
</head>
<body>
<h2 style="font-family:
Verdana; font-size:
small; font-weight:
bold">Indian Historical Monument - </h2>
<p><img id="largeImg" src="pic1.jpg" alt="Large image" /></p>
<p class="thumbs">
<a href="pic1.jpg" title="Taj Mahal"><img src="pic1.jpg" /></a>
<a href="pic2.jpg" title="Aakshardham
Temple"><img
src="pic2.jpg"
/></a>
<a href="pic3.jpg" title="Lotus Temple"><img src="pic3.jpg" /></a>
<a href="pic4.jpg" title="Red Fort"><img src="pic4.jpg" /></a>
</p>
</body>
</html>
Output
As you can see when you click
over little thumbnails on the bottom the big box with the picture swaps the
current image with the one that you clicked over. Now click on another image and
see how does it swaps the older image.
