Hi fahimahmed,
I have created a sample which full fill your requirement you need to modify the code according to your need and the required js and css file can be downloaded from below link
LightBox Gallery
Refer below sample code
HTML
<div class="home">
<div class="demo-gallery">
<ul id="lightgallery" class="list-unstyled row">
<asp:Repeater ID="rptImages" runat="server">
<ItemTemplate>
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive='<%#Eval("ImageUrl") %>' data-src='<%#Eval("BigImageUrl") %>'
data-sub-html='<%#Eval("ProductName") %>'><a href="">
<img class="img-responsive" src='<%#Eval("ImageUrl") %>'>
</a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
<div>
<link href="dist/css/lightgallery.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{
background-color: #152836;
}
.demo-gallery > ul
{
margin-bottom: 0;
}
.demo-gallery > ul > li
{
float: left;
margin-bottom: 15px;
margin-right: 20px;
width: 200px;
}
.demo-gallery > ul > li a
{
border: 3px solid #FFF;
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
float: left;
}
.demo-gallery > ul > li a > img
{
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery > ul > li a:hover > img
{
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery > ul > li a:hover .demo-gallery-poster > img
{
opacity: 1;
}
.demo-gallery > ul > li a .demo-gallery-poster
{
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery > ul > li a .demo-gallery-poster > img
{
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery > ul > li a:hover .demo-gallery-poster
{
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .justified-gallery > a > img
{
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery .justified-gallery > a:hover > img
{
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img
{
opacity: 1;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster
{
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster > img
{
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster
{
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img
{
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
.demo-gallery.dark > ul > li a
{
border: 3px solid #04070a;
}
.home .demo-gallery
{
padding-bottom: 80px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="dist/js/lightgallery.js" type="text/javascript"></script>
<script src="lib/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="dist/js/lg-fullscreen.js" type="text/javascript"></script>
<script src="dist/js/lg-thumbnail.js" type="text/javascript"></script>
<script src="dist/js/lg-video.js" type="text/javascript"></script>
<script src="dist/js/lg-autoplay.js" type="text/javascript"></script>
<script src="dist/js/lg-zoom.js" type="text/javascript"></script>
<script src="dist/js/lg-hash.js" type="text/javascript"></script>
<script src="dist/js/lg-pager.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#lightgallery').lightGallery();
});
</script>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("ProductName"), new DataColumn("ImageUrl"), new DataColumn("BigImageUrl") });
dt.Rows.Add("Lighthouse", "Images/Lighthouse.jpg", "BigImages/Lighthouse.jpg");
dt.Rows.Add("Koala", "Images/Koala.jpg", "BigImages/Koala.jpg");
dt.Rows.Add("Jellyfish", "Images/Jellyfish.jpg", "BigImages/Jellyfish.jpg");
dt.Rows.Add("Penguins", "Images/Penguins.jpg", "BigImages/Penguins.jpg");
rptImages.DataSource = dt;
rptImages.DataBind();
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("ProductName"), New DataColumn("ImageUrl"), New DataColumn("BigImageUrl")})
dt.Rows.Add("Lighthouse", "Images/Lighthouse.jpg", "BigImages/Lighthouse.jpg")
dt.Rows.Add("Koala", "Images/Koala.jpg", "BigImages/Koala.jpg")
dt.Rows.Add("Jellyfish", "Images/Jellyfish.jpg", "BigImages/Jellyfish.jpg")
dt.Rows.Add("Penguins", "Images/Penguins.jpg", "BigImages/Penguins.jpg")
rptImages.DataSource = dt
rptImages.DataBind()
End Sub
Screenshot
