jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing,
event handling, animating, and Ajax interactions for rapid web development. jQuery
is designed to change the way that you write JavaScript.
The Image Gallery is the common requriment to show the images in a stylish way.If we google for the image gallery plugin's we would get more tha thousands of the plugin's.The best i found in them is this AD Gallery.
I have designed the Page like as shown below.I have add the One Script file and One Style Sheet File
1. jquery.ad-gallery.js
2. jquery.ad-gallery.css
I have taken a datalist for showing the images.In that i have bind the required columns from database using Eval.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SlideShow.aspx.cs"
Inherits="SlideShow" %>
<!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>SlideShow Using jquery in ASP.NET</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script src="Slider/jquery.ad-gallery.js" type="text/javascript"></script>
<link href="Slider/jquery.ad-gallery.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*
{
font-family: "Lucida Grande" , "Lucida Sans Unicode"
, "Lucida Sans" , Verdana, Arial, sans-serif;
color: #333;
line-height: 140%;
}
select, input, textarea
{
font-size: 1em;
}
body
{
padding: 30px;
font-size: 70%;
width: 800px;
}
h2
{
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
border-bottom: 1px dotted #dedede;
}
h3
{
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
}
.example
{
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
}
ul
{
list-style-image: url(list-style.gif);
}
pre
{
font-family: "Lucida Console" , "Courier New" , Verdana;
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
}
code
{
font-family: "Lucida Console" , "Courier New" , Verdana;
margin: 0;
padding: 0;
}
#gallery
{
padding: 30px;
background: #e1eef5;
}
#descriptions
{
position: relative;
height: 50px;
background: #EEE;
margin-top: 10px;
width: 640px;
padding: 10px;
overflow: hidden;
}
#descriptions .ad-image-description
{
position: absolute;
}
#descriptions .ad-image-description .ad-description-title
{
display: block;
font-family: Verdana;
color: Lime;
}
</style>
<script type="text/javascript">
$(function () {
$('img.image1').data('ad-desc', 'Whoa! This description
is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
$('img.image1').data('ad-title', 'Title through $.data');
$('img.image4').data('ad-desc', 'This image is wider
than the wrapper, so it has been scaled down');
$('img.image5').data('ad-desc', 'This image is higher
than the wrapper, so it has been scaled down');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function () {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function () {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function () {
if (!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<h1>
AD Gallery, gallery plugin for jQuery</h1>
<p>
A highly customizable gallery plugin for jQuery.</p>
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
<div class="ad-image" style="width: 600px; height: 400px; top: 0px; left: 0px;">
<p class="ad-image-description" style="width: 400px; bottom: 0px;">
<strong class="ad-description-title">
<%#Eval("empname") %></strong> <span>ABC Ltd</span>
</p>
</div>
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<%-- <p class="ad-image-description" style="width: 586px; bottom: 0px;">
<strong class="ad-description-title">
<%#Eval("empname") %></strong><span> </span>
</p>--%>
<asp:DataList ID="dlphotos" runat="server" CssClass="panel" RepeatDirection="Horizontal">
<ItemTemplate>
<div>
<li><a href='<%#"DisplayImageHandler.ashx?id="+Eval("empid")%>'>
<img src='<%#"DisplayImageHandler.ashx?id="+Eval("empid")%>'
alt='<%#Eval("empname") %>'
style="width: 50px; height: 50px"
/>
</a></li>
</div>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
</div>
</div>
<div id="descriptions">
</div>
<p>
Examples of how you can alter the behaviour on the fly; Effect:
<select id="switch-effect">
<option value="slide-hori">Slide horizontal</option>
<option value="slide-vert">Slide vertical</option>
<option value="resize">Shrink/grow</option>
<option value="fade">Fade</option>
<option value="">None</option>
</select><br>
<a href="#" id="toggle-slideshow">Toggle slideshow</a> | <a href="#" id="toggle-description">
Toggle having description outside of image</a>
</p>
</div>
</form>
</body>
</html>
The Code Behind is given here
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
public partial class SlideShow : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
dlphotos.DataSource = BindData();
dlphotos.DataBind();
}
}
internal DataSet BindData()
{
try
{
string conStr = ConfigurationManager.ConnectionStrings["TESTDB"].ConnectionString;
SqlConnection connection = new SqlConnection(conStr);
string Query = "select * from empdetails";
SqlCommand cmd = new SqlCommand(Query, connection);
connection.Open();
SqlDataAdapter da = new SqlDataAdapter(Query, connection);
DataSet ds = new DataSet();
da.Fill(ds);
int id = Convert.ToInt32(cmd.ExecuteScalar());
if (id > 0)
{
Response.Write("<script>alert('Retrived Successful')</script>");
}
return ds;
cmd.Dispose();
connection.Close();
da.Dispose();
ds.Dispose();
}
catch (Exception exp)
{
throw new ArgumentException(exp.Message);
}
}
}
The Code for Display Handler is given here
<%@ WebHandler Language="C#" Class="DisplayImageHandler" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
public class DisplayImageHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string empid = context.Request.QueryString["id"];
SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["TESTDB"].ConnectionString);
connection.Open();
string Query = "select empimg from empdetails where empid=@empid";
SqlCommand command = new SqlCommand(Query, connection);
command.Parameters.Add(new SqlParameter("@empid", empid));
SqlDataReader dr = command.ExecuteReader();
dr.Read();
context.Response.BinaryWrite((Byte[])dr[0]);
connection.Close();
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
The output demo is image is uploaded please check this image.
Any suggestions are open heartedly welcome.
Thanks to all .
The Source Code is available HERE .