jQuery is one of the most popular JavaScript frameworks that have powerful tools for developers to improves the designs integration with web sites and applications. In this post I will tell you to use jQuery Ligtbox effect, to help you implemented in your site or web project. jQuery lightBox is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.
Free Download
Controls and Properties:
1. Web Form: name=”Default.aspx”.
2. DataList Control: name=”FeaturedList”.
Default.aspx
Source code:
<form id="form1" runat="server">
<div id="gallery">
<asp:DataList ID="FeaturedList" runat="server" RepeatLayout="Table" Width="100%" RepeatColumns="5">
<ItemTemplate>
<a href='<%#getHREF(Container.DataItem)%>' title='<%# DataBinder.Eval(Container.DataItem, "Rep_FirstName")%>'>
<img src='<%# getSRC(Container.DataItem) %>' align="top" title='<%# DataBinder.Eval(Container.DataItem, "Rep_FirstName")%>' height="100" width="100"/>
</a>
</ItemTemplate>
</asp:DataList>
</div>
</form>
JavaScript Code to use jQuery LightBox:
<head id="Head1" runat="server">
<title>JQueryLightBox Example</title>
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function () {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 2px;
width: 800px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
</head>
Aspx.cs Code:
1. PageLoad Event to Bind DataList with Images :
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetImagesFromDatabase();
}
}
public void GetImagesFromDatabase()
{
conn = new SqlConnection();
conn.ConnectionString = "Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database.mdf;Integrated Security=True;User Instance=True";
if (conn.State == ConnectionState.Closed)
conn.Open();
cmd = new SqlCommand();
cmd.CommandText = "Select * from JQueryLightBox_tbl";
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
dataTable = new DataTable();
sqlAdapter = new SqlDataAdapter();
sqlAdapter.SelectCommand = cmd;
sqlAdapter.Fill(dataTable);
FeaturedList.DataSource = dataTable.DefaultView;
FeaturedList.DataBind();
}
2. getHREF() and getSRC() to show the Images when selected :
public string getHREF(object sURL)
{
DataRowView dRView = (DataRowView)sURL;
return ResolveUrl("Rep_Images/" + dRView["Rep_Img_Name"].ToString());
}
public string getSRC(object imgSRC)
{
DataRowView dRView = (DataRowView)imgSRC;
return ResolveUrl("Rep_Images/" + dRView["Rep_Img_Name"].ToString());
}
[...] Source: jquery – Google Blog Search [...]
How can i change the height and width of main image that display after clicking the thumbnail…