I'm trying to update the source of an image using jQuery. The problem is that the img is running server side as its initial source is being set on load.
Here is the ASPX/HTML:
<h2><asp:Label ID="lblTitle" runat="server" /></h2>
<img id="largeImg" runat="server" width="320" alt="Large Image" />
<p class="thumbs">
<a id="imgBACK" runat="server" title="Back"><img id="imgBACK_Thumb" runat="server" /></a>
<a id="imgFRONT" runat="server" title="Front"><img id="imgFRONT_Thumb" runat="server" /></a>
<a id="imgINSIDELEFT" runat="server" title="Inside Left"><img id="imgINSIDELEFT_Thumb" runat="server" /></a>
<a id="imgINSIDERIGHT" runat="server" title="Inside Right"><img id="imgINSIDERIGHT_Thumb" runat="server" /></a>
</p>
The sample jQuery code being used can be found here or below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Replacement</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: 580px;
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: 550px;
height: 400px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}
</style>
</head>
<body>
<h2>Illustrations</h2>
<p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></p>
<p class="thumbs">
<a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>
<a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a>
<a href="images/img4-lg.jpg" title="Image 4"><img src="images/img4-thumb.jpg" /></a>
<a href="images/img5-lg.jpg" title="Image 5"><img src="images/img5-thumb.jpg" /></a>
<a href="images/img6-lg.jpg" title="Image 6"><img src="images/img6-thumb.jpg" /></a>
</p>
</body>
</html>
Currently, all image sources are perfect at load (the small and large images are being loaded via the codebehind). However, clicking on the thumbnails does not change the large image because it's running server side.
Any ideas on how to fix this?
Thank you very much in advance! After banging my head against the wall for far too many hours, I'm finally throwing in the towel (for at least a few hours).
Thanks!
-Adam
This should work, besides two points:
srcof the image can be changed at client side, but don't expect to see that on the server side after a postback. Images aren't posted, only input fields.Your
imgisrunat="server"- this means itsidchanges on the page (unless it's on the root level, eg, no master page, panels, repeaters, etc). You need to useWhich is quite ugly, or simply add a class and use that in your selector: