javascript ile ızgara görünümü resmi onclick yapın

Question

Izgara görünümüm ve içinde resim sütunu var. Problemsiz çalışıyor ama daha fazlasına ihtiyacım var. Tıklanan görüntüyü büyütmek ve ekrana odaklanmak istiyorum. Aslında şu an sahip olduğum şey, görüntüleri gridview'de değilken, gridview'imde görüntülere ihtiyacım olduğunu söylediğim gibi yapıyor. İşte (Ben odaklama yapar beri benim de css yazmak istiyorum) benim css geçerli:

#overlay { 
     position: fixed; 
     width: 100%; 
     height: 100%; 
     top: 0px; 
     left: 0px; 
     background-color: #000; 
     opacity: 0.7; 
     filter: alpha(opacity = 70) !important; 
     display: none; 
     z-index: 100; 
    } 

    #overlayContent { 
     position: fixed; 
     width: 100%; 
     top: 100px; 
     text-align: center; 
     display: none; 
     overflow: hidden; 
     z-index: 100; 
    } 

    #contentGallery { 
     margin: 0px auto; 
    } 

    #imgBig, #imgSmall { 
     cursor: pointer; 
    } 

Benim GRIDVIEW:

<asp:GridView ID="GridViewEvents" CssClass="mGrid" AutoGenerateColumns="false" runat="server" DataSourceID="EntityDataSourceEvents"> 
    <Columns> 
     <asp:TemplateField HeaderText="Araç"> 
      <ItemTemplate> 
       <%#GetPlate(Convert.ToInt16(Eval("CarId"))) %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Sürücü"> 
      <ItemTemplate> 
       <%#GetDriverId(Convert.ToInt16(Eval("DriverId"))) %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Alış KM"> 
      <ItemTemplate> 
       <div id="overlayContent"> 
        <img id="imgBig" src="" alt="" /> 
       </div> 
       <div id="grid"> 
        <img id="imgSmall" onclick="Tiklandi()" alt="" src='<%#Eval("FirstKmImage") %>' /> 
       </div> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="İade KM"> 
      <ItemTemplate> 
       <asp:Image ID="ImageLast" ImageUrl='<%#Eval("LastKmImage") %>' runat="server" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Alış Tarih"> 
      <ItemTemplate> 
       <%#Eval("FirstDate") %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="İade Tarih"> 
      <ItemTemplate> 
       <%#Eval("LastDate") %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Güzergah"> 
      <ItemTemplate> 
       <%#Eval("Guzergah") %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="İş Durumu"> 
      <ItemTemplate> 
       <%#IsDurumu(Convert.ToBoolean(Eval("Done")))%> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

Ve js kodu:

function Tiklandi() { 
     $("#imgBig").attr("src", $(this).prop('src')); 
     $("#overlay").show('slow'); 
     $("#overlayContent").show('slow'); 
    } 

Nasıl Js kodumu, bu tür bir prosedüre gridview yapmak için mi yapıyorum?

Answer 1

<img> öğesinde sınıf ekleyebilirsiniz.

<asp:Image ID="ImageLast" ImageUrl='<%#Eval("LastKmImage") %>' runat="server" class="Tiklandi" /> 

Ve o sınıfın

$('.Tiklandi').click(function() { 
     $("#imgBig").attr("src", $(this).prop('src')); 
     $("#overlay").show('slow'); 
     $("#overlayContent").show('slow'); 
    }) 

bu yardımcı olabilir Umut tıklama olay işleyicisi bağlamak.