Create a image gallery using colorbox Jquery plugin - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial Create a image gallery using colorbox Jquery plugin

 In this article I am going to explain how to create image gallery in using colorbox Jquery plugin

To implement this functionality I am using datalist control. When we click on image, it open in popup and we can see the entire images here via using forward and backward button. I am using the Colorbox jquery plugin to open images in popup.

Create store procedure to fetch images from database table (Tb_Photo)
Create proc Sp_gallery
Select * from Tb_Photo

HTML Markup of webform:
<html xmlns="">
<head id="Head1" runat="server">
     table tr td
             text-align: center;
     a{ text-decoration: none;}
     padding: 4px;
    border: 2px solid #000;
    border-radius: 12px;
    margin: 5px;
    <link href="css/colorbox.css" rel="stylesheet" type="text/css" />
                        <script src=""></script>
                        <script src="js/jquery.colorbox.js"></script>
            $(document).ready(function () {
                $(".test").colorbox({ rel: 'group1', transition: "none", width: "700px " });

    <form id="form1" runat="server">
    <div style="margin-left:30px">        
        <asp:DataList ID="dlimage" runat="server" RepeatDirection="Horizontal" DataKeyField="AlbumId" RepeatColumns="5">
         <tr><td> <a href='<%# Eval("PhotoPath","img/{0}") %>' class='test' title='<%# Eval("photoname") %>'><asp:Image ID="img"  runat="server" ImageUrl='<%# Eval("PhotoPath","~/img/{0}") %>'  Height="150px" Width="200px"/>
          <tr><td><asp:Label ID="lbldescription" runat="server" Text='<%# Eval("photoname") %>'></asp:Label></td></tr>

Add the namespace
C# Code:
using System.Data;
using System.Data.SqlClient;
using System.Configuration; Code:
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Data

Create sqlconnection
C# Code:

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString()); Code:
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())

Populate the datalist
Create a method to bind the data to datalist and call it on page load event.
C# Code:
protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)

    public void BindDatalist() 
        SqlDataAdapter adp = new SqlDataAdapter("Sp_gallery", con);
        adp.SelectCommand.CommandType = CommandType.StoredProcedure;
        DataTable dt = new DataTable();
        dlimage.DataSource = dt;
    } Code:
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
    End Sub
    Public Sub BindDatalist()
        Dim adp As New SqlDataAdapter("Sp_gallery", con)
        adp.SelectCommand.CommandType = CommandType.StoredProcedure
        Dim dt As New DataTable()
        dlimage.DataSource = dt
    End Sub

Build and run the application. Now test the developed application.
DEMO: Create a image gallery using colorbox Jquery plugin
 In this article we have learn how to create image gallery in using  Colorbox Jquery Plugin (C# and I hope you enjoyed this article. Please post you comment, query and feedback about this article. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.  

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.