Friday, January 1, 2016 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.  

No comments:

Post a Comment