Fancybox issue with code behind created images

Question

behind images with ashx from database images counts (using 'for'). Problem is every images showing twice.. I searched it but couldnt find solution.Thank You..

fancybox ver : 2.1.5 jquery : latest ver.

 Label lbl = new Label();
                lbl.Text = "<a  class=fancybox rel=group href=picture0.ashx?id=" + dt.Rows[i]["id"].ToString() + "    style=margin-right:15px;>";
                 Panel1.Controls.Add(lbl);



                Image img = new Image();
                img.ImageUrl = "Picture0.ashx?id="+dt.Rows[i]["id"].ToString();
                img.Width = 110;
                img.Height = 80;                  
                Panel1.Controls.Add(img);

                Label lbl2 = new Label();
                lbl2.Text = "</a>";
                Panel1.Controls.Add(lbl2);

and html part is;

$(document).ready(function () { $('.fancybox').fancybox({ 'type': 'image', }); });

---

     <asp:Panel ID="Panel1" runat="server">

Answer 1

This is happening because of the way you are generating the link, ASP.NET Label controls translate to an html span element and the text is what goes between the opening and closing tags. Basically what is happening is you have broken html and your browser is appending additional opening and closing a tags and making duplicates in the process.

Your rendered output looks like this:

<span>
    <a  class=fancybox rel=group href=picture0.ashx?id=someid>
    <img src=yoursrc/>
</span>
</a>

Change your Label controls to Literals and your code should work, you should also enclose your html attributes in quotes.

EDIT: Unless there is a reason to create the control in the codebehind I would suggest using the ASP.NET markup and then setting the properties you need to fill out dynamically in the codebehind.