Updating Image (runat server) Src using jQuery/ASP.NET_问答_开发者

Updating Image (runat server) Src using jQuery/ASP.NET

开发者 https://www.devze.com 2022-12-13 18:37 出处：网络

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.

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: largePa开发者_如何学Goth, 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:

The src of 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 img is runat="server" - this means its id changes on the page (unless it's on the root level, eg, no master page, panels, repeaters, etc). You need to use
```
$('#<%=largeImg.ClientID%>')
```
Which is quite ugly, or simply add a class and use that in your selector:
```
<img id="largeImg" runat="server" width="320" alt="Large Image"
     CssClass="LargeImage" />

$(".LargeImage").attr({ src: largePath, alt: largeAlt });
```