Fancybox Overlay

Question

Я использую рамку iframe, чтобы создать наложение для отображения содержимого другой страницы.У меня есть webhierarchicaldatagrid, и при нажатии на ссылку на столбец шаблона создается оверлей.Кажется, он работает только для первой строки таблицы, а для всех остальных строк он просто открывает страницу без наложения. Есть ли что-то, чего мне не хватает в коде.Ниже код, который я использую:

          <ig:TemplateDataField Key="Sipoc" Width ="06%">
    <ItemTemplate>
   <a class="iframe" id="ifrm" href="<%# String.Format("Sipoc.aspx?proj_id={0}&func_id={1}&subfunc={2}&jurisdiction_id={3}&proj_name={4}&owner_id={5}", Eval("Proj_Type_ID"), Eval("Function_Name"), Eval("Sub_Function_Name"), Eval("Jurisdiction_Name"),Eval("Proj_Type_Name"),Eval("Proj_Type_Owner_ID")) %>">

     <asp:Image ID="Image1" ImageUrl='<%# Convert.ToString(Eval("Sipoc")) == "True"? "Sipoc.jpg": " " %>' runat="server" Visible='<%# Convert.ToString(Eval("Sipoc")) == "True"? true: false %>' ></asp:Image>          
          </a>

            </ItemTemplate><header Text="Sipoc" />
            </ig:TemplateDataField>



          $(document).ready(function () {
           $("#ifrm").fancybox({
               'width': '100%',
               'height': '100%',
               "padding": 0,
               "overlayShow": true,
               "overlayOpacity": 0.5,
               "zoomSpeedIn": 500, // has nothing to do with AJAX-ZOOM
               "zoomSpeedOut": 500, // has nothing to do with AJAX-ZOOM
               "hideOnContentClick": false, // important

               "centerOnScroll": false,
               "imageScale": true,
               "easingIn": "swing",
               "easingOut": "swing"
           });


       });