I've successfully implemented a gridview with an image column, but I'm looking to enhance the functionality. Specifically, I want to enlarge the clicked image and bring it into focus on the screen. I've managed to achieve this when the images are not within a gridview, but I need them to be part of the gridview. Here is the CSS I'm using to handle the focusing:
#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;
}
Here is my gridview markup:
<asp:GridView ID="GridViewEvents" CssClass="mGrid" AutoGenerateColumns="false" runat="server" DataSourceID="EntityDataSourceEvents">
<Columns>
<asp:TemplateField HeaderText="Vehicle">
<ItemTemplate>
<%#GetPlate(Convert.ToInt16(Eval("CarId"))) %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Driver">
<ItemTemplate>
<%#GetDriverId(Convert.ToInt16(Eval("DriverId"))) %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Start 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="End KM">
<ItemTemplate>
<asp:Image ID="ImageLast" ImageUrl='<%#Eval("LastKmImage") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Start Date">
<ItemTemplate>
<%#Eval("FirstDate") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="End Date">
<ItemTemplate>
<%#Eval("LastDate") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Route">
<ItemTemplate>
<%#Eval("Route") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Status">
<ItemTemplate>
<%#Status(Convert.ToBoolean(Eval("Done")))%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Here is my JavaScript code:
function Tiklandi() {
$("#imgBig").attr("src", $(this).prop('src'));
$("#overlay").show('slow');
$("#overlayContent").show('slow');
}
Any ideas on how I can modify my JavaScript code to achieve the desired functionality within the gridview?