How to create image gallery in asp.net c# with sql server Database

In this article, we will learn how to create an image gallery in asp.net c# using database sql server .Using of this article, we can also create a product gallery using database. You can also learn how to upload image and save in database using asp.net c#
Database:-




Source Code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to create image gallery in asp.net c# with Database ||Neeraj Code Solutions</title>
     <link type="text/css" rel="stylesheet" href="js/style.css" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script>
    <script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#gallery').galleryView({
                panel_width: 800,
                panel_height: 400,
                frame_width: 100,
                frame_height: 100,
                nav_theme: 'custom'
            });
        });
</script>
</head>
<body>


    <form id="form1" runat="server">

    <div id="gallery" class="galleryview">
            <asp:GridView ID="gdgallery" runat="server" AutoGenerateColumns="false">
            <Columns>
      <asp:TemplateField>
      <ItemTemplate>
     <div class="panel">
                <img src='<%#Eval("image_path") %>' />
                 <div class="panel-overlay">
                    <h2><%# Eval("image_name")%></h2>                  
                </div>            
                </div>
      </ItemTemplate>
      </asp:TemplateField>
      </Columns>
            </asp:GridView>
            <ul class="filmstrip">
            <asp:Repeater ID="rptthumb" runat="server">


        <ItemTemplate>
            <li><img width="100" height="100" src='<%#Eval("image_path") %>'/></li>
        </ItemTemplate>
        </asp:Repeater>
            </ul>
        </div>

    </form>
</body>
</html>


Code behind(c#):-
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{


    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            bindimage();
        }
    }
    protected void bindimage()
    {
        try
        {
            SqlConnection con = new SqlConnection("Data Source=NEERAJ-PC\\NEERAJ;Initial Catalog=CodeSolution;Persist Security Info=True;User ID=sa; password=12345678");
            con.Open();
            SqlCommand cmd = new SqlCommand("select * from tblImage", con);
            SqlDataAdapter da = new SqlDataAdapter(cmd);

            DataSet ds = new DataSet();
            da.Fill(ds);
            gdgallery.DataSource = ds;
            gdgallery.DataBind();
            rptthumb.DataSource = ds;
            rptthumb.DataBind();
            con.Close();
        }
        catch (Exception ex)
        {
            Response.Write(ex);
        }
    }

}
OutPut:-


You can also need to download this project for java script and css file 


How to create image gallery in asp.net c# with sql server Database How to create image gallery in asp.net c# with  sql server Database Reviewed by NEERAJ SRIVASTAVA on 9:50:00 PM Rating: 5

No comments:

Powered by Blogger.