Image gallery using jQuery Light Gallery plugin in ASP.Net

Last Reply on Mar 29, 2017 11:03 AM By fahimahmed

Posted on Mar 29, 2017 03:01 AM

I've tried to use light gallery through database by using gridview but unable to zoom image. 

https://codeload.github.com/sachinchoolur/lightGallery/zip/master

 

Pls help.

 

<asp:DataList ID="DataListImageGallery" runat="server" RepeatDirection="Horizontal" >
<ItemTemplate>
<ul id="lightgallery" class="list-unstyled row">
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive='<%# Eval("ImageURL") %>' data-src='<%# Eval("ImageURL") %>' data-sub-html='<%# Eval("ProductCode")%>'>
<a href="" ><asp:Imagebutton ID="Imagebutton1" runat="server" Height="150px" Width="150px" ImageUrl='<%# Eval("ImageURL")%>' CausesValidation="false" /></a>
</li>
</ul>
</ItemTemplate>   
</asp:DataList>

 

Dim mySelection As String
        mySelection = "select * from ProductImages where ProductCode='" & "IB-1001" & "' and PrimarySecondary='" & "Secondary" & "'"
        Dim adp As New System.Data.OleDb.OleDbDataAdapter(mySelection, cn0)
        Dim dt As New System.Data.DataTable
        adp.Fill(dt)
        DataListImageGallery.DataSource = dt22
        DataListImageGallery.DataBind()
        DataListImageGallery.DataKeyField = "ID"

 

Posted on Mar 29, 2017 04:37 AM

Hi fahimahmed,

if you have close look on below line of code where the "data-src" property is used their they have used bigger size image url so you need to have bigger size image which will get displayed when you click on the thumbnail image

 <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800"
    data-src="img/1-1600.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
    <a href="">
        <img class="img-responsive" src="img/thumb-1.jpg">
    </a>
</li>

so now basically you need to have same two images with different sizes and display them according to it.


Posted on Mar 29, 2017 05:12 AM Modified on on Mar 29, 2017 05:14 AM

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