Wednesday, December 30, 2015

How to create photo album in – Part III

This article is the last part of implement photo album functionality in website.  In this article I am going to explain how to create image gallery in

How to create photo album in – Part III

 Here we have to option to view the gallery, 1st click on album page and we are redirects to gallery page. 2nd click on view gallery button (upload image page). 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
@albumid int
Select * from Tb_Photo where AlbumId = @albumid

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 () {
                //Examples of how to assign the ColorBox event to elements
                $(".test").colorbox({ rel: 'group1', transition: "none", width: "700px " });

    <form id="form1" runat="server">
    <div style="margin-left:30px">
    <tr><td><asp:Button ID="btnalbum" runat="server" Text="Create New Album" /></td><td></td><td><asp:Button ID="Button1" runat="server" Text="Add More photo" /> </td></tr>
        <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;
        adp.SelectCommand.Parameters.AddWithValue("@albumid", Convert.ToInt32(Session["albumid"].ToString()));
        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
        adp.SelectCommand.Parameters.AddWithValue("@albumid", Convert.ToInt32(Session("albumid").ToString()))
        Dim dt As New DataTable()
        dlimage.DataSource = dt
    End Sub

Redirect to create new album and add more photo to album.
C# Code:
protected void btnalbum_Click(object sender, EventArgs e)
    protected void Button1_Click(object sender, EventArgs e)
    } Code:
  Protected Sub btnalbum_Click(sender As Object, e As System.EventArgs) Handles btnalbum.Click
    End Sub

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
    End Sub

Build and run the application. Now test the developed application.


How to create photo album in – Part III

 In this article we have learn how to create photo album in using  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