(submit said I was trying to post an image so I've changed image everywhere to <img>
I am trying to get jQuery to replace an <img>
inside a datalist. The original <img>
is the thumbnail image of a product on a category page. The small <img>
I am clicking on are swatch images for the different colors of a product. I can get it to work using a div tag around the <img>
tag inside the ItemTemplate. I don't need to use a div tag if I can get the images to swap- I was just using it because that is sample code I found and it works for the first product in the category.
<asp:HyperLink ID="ProductNav" runat="server" NavigateUrl='<%#Eval("NavigateUrl") %>'>
<div id="ladiv" runat="server">
<asp:Image runat="server" ID="ProdThumb" />
</div>
</asp:HyperLink>
<asp:PlaceHolder ID="phSwatches" runat="server"></asp:PlaceHolder>
The ProdThumb <img>
is added from the code behind and the swatches are added from the code behind
swatches.Controls.Add(new LiteralControl("<table><tr>"));
foreach(OptionChoice optionChoice in option.Choices)
{
string swatchThumbnail = string.Format("<img ID=\"{0}\" src=\"{1}\" border=\"0\" class=\"{2}\" />","swatch" + optionChoice.OptionChoiceId.ToString(), ResolveUrl(optionChoice.ThumbnailUrl),"imgthumb");
swatches.Controls.Add(new LiteralControl("<td>"));
swatches.Controls.Add(new LiteralControl(swatchThumbnail));
swatches.Controls.Add(new LiteralControl("</td>"));
}
swatches.Controls.Add(new LiteralControl("</tr></table>"));
prodThumb.ImageUrl = product.ThumbnailUrl;
prodThumb.AlternateText = product.ThumbnailAltText;
prodThumb.CssClass = "Thumbnail";
The jQuery is:
$(function() {
$("img.imgthumb").click(function(e) {
var t = $(this);
var newImg = '<img src=' + t.attr("src").replace("sws", "swl") + '></img>';
$('#ladiv').html($(newImg));
});
});
Both images are named similar, except the swatch contains "sws" and the larger one is the some only with "swl".
I have spent several days searching but am not able to get it to work.
If I try something like $("#<%=ladiv.ClientID %>")
the code can't find it.
I appreciate any help.