javascriptでonclickのgridviewイメージを作成する

Question

私はgridviewを持って、その中にイメージの列を持っています。それは問題なく動作しますが、私はもっと何かが必要です。クリックした画像を大きくして、画面にフォーカスを当てたい。実際に私が今持っているのは、画像がグリッドビューではないのに、グリッドビューに画像が必要だと言ったようなものです。ここに私のCSSは（私はそれが中心になりますので、あまりにも私のCSSを書きたい）である：

#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; 
    } 

私の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> 

そして、私のJSコード：

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

どのようにすることができますグリッドビューでこの種の処理を行うためのjsコードを作成しますか？

Answer 1

あなたは<img>要素にクラスを追加することができますように。

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

そしてクラスにクリックイベントハンドラをバインド

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

は、これが役立つことを願って。