使用javascript创建gridview图像onclick

我有一个gridview，并有一个图像列。它工作没有问题，但我需要更多东西。我想让点击的图像更大并且让屏幕专注于它。其实我现在所做的是在图像不在gridview中时做这件事，但就像我说我需要gridview中的图像。这里是我的CSS（我想写我的CSS也因为它使聚焦）：使用javascript创建gridview图像onclick

#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代码在gridview中创建这种类型的进程？

来源

2016-04-11 Batuhan Ozdal

可能是您可以在<img>元素上添加班级。

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

而且click事件处理程序绑定到类

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

希望这可以帮助。

来源

2016-04-11 06:46:10

谢谢您的回复，但不幸的是它没有工作 –

请确保您将事件处理程序放在'$（document）.ready'内，并且我建议您不要将'overlayContent'放在'asp：GridView'内，因为它会被创建多次数据编号。 –

使用javascript创建gridview图像onclick

回答

相关问题