views:

201

answers:

0

(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.