This article will show you how you can create a dynamic
image gallery in asp.net using jQuery data from SQL server table.
Some of my previous articles are as follows:
Jquery
DatePicker Calendar With Week Number in Asp.Net, Show
Loading While Page Loads Using jQuery in Asp.net, Credit
Card Data Format Validation Using jQuery In Asp.Net, Dynamic
Google Scatter Chart In an Asp.Net MVC Using C# and Javascript, How
To Create Dynamic Google Column Chart In an Asp.Net MVC Using C# and Javascript,
Dynamic
Vertical Css Menu Using jQuery, Css and C#.net In Asp.net MVC, Dynamic
Css Menu Creation in Asp.Net Using C#.Net.
This article I have referred the below gallery.
Now we will create sql table for storing data. Which we will retrieve in code.
Now for this article first we will create a new asp.net
application and add the below code into the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dynamic
Image Gallery Using jQuery in Asp.net c#</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.photo-thumbnails
.thumbnail').click(function () {
//
Setting class "current" to the thumbnail that was clicked.
jQuery('.photo-thumbnails .thumbnail').removeClass('current');
jQuery(this).addClass('current');
//
Getting "src" attribute of the image that was clicked.
var
path = jQuery(this).find('img').attr('src');
//
Setting "src" attribute of the big image.
jQuery('#big-photo img').attr('src',
path);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="gallery-photos clearfix">
<div class="photo-thumbnails" runat="server"
id="divGallery">
</div>
<div id="big-photo" class="big-photo">
<img src="images/1.jpg" alt="" />
</div>
</div>
</form>
</body>
</html>
|
In above code I have added simply a jquery reference and
make the photo-thumbnails runat server and provided id to it.
Now lets check the code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Text;
namespace WebApplication3
{
public partial class WebForm1 : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
BindGallery();
}
public
void BindGallery()
{
SqlConnection
objcon = new SqlConnection("Data Source=VINAY-PP;Initial
Catalog=DEMO;Integrated Security=True");
DataTable
objdt = new DataTable();
string
query = "select * from ImageGallery;";
SqlDataAdapter
objda = new SqlDataAdapter(query,
objcon);
objcon.Open();
objda.Fill(objdt);
objcon.Close();
StringBuilder
objstring = new StringBuilder();
if
(objdt.Rows.Count > 0)
{
for
(int i = 0; i < objdt.Rows.Count; i++)
{
string
cssClass = i == 0 ? "thumbnail current"
: "thumbnail";
objstring.Append("<div class='" + cssClass + "'>");
objstring.Append("<div
class=\"thumbnail-inner\">");
objstring.Append("<img src='" + objdt.Rows[i]["ImagePath"].ToString() + "' alt=\"\" />");
objstring.Append(" </div>");
objstring.Append(" </div>");
}
divGallery.InnerHtml =
objstring.ToString();
}
}
}
}
|
In above code I have taken data from database and then
prepare a string for gallery with the image path. After preparing the string I have
bind it to the divgallery.
Now we have done to check the output.
DOWNLOAD
About the Author
Excelente!!!!
ReplyDeleteThanks..
DeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis is not working bro! Can you help me please
ReplyDeleteI am only getting the 1.jpg image
Bro its working....
DeleteThakns