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
Reviewed by NEERAJ SRIVASTAVA
on
9:50:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
9:50:00 PM
Rating:
Where is JS and Css file
ReplyDeletePlease download the code for Js and CSS files
Delete