posted 2/9/2011 by Raghav Khunger
In this blog I will show how to show images in lightbox whose paths are stored in database. I have used sample data in the codebehind to fill the datasource for images's repeater. You can fill the datasource from data fetched from DB via ADO.NET. Below is the sample code:
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ Import Namespace="System.Collections.ObjectModel" %> <script runat="server"> /// <summary> /// Handles the Load event of the Page control. /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Bindlist(); } } /// <summary> /// Bindlists this instance. /// </summary> private void Bindlist() { //I have fetched the images source just in harcoded way //You can fill the datasource with your DB data var list = new Collection<MyImage> { new MyImage { ImageID= 1,Title = "title1",ImageSRC = "photos/image1.jpg",ThumbImageSRC = "photos/thumb_image1.jpg"}, new MyImage {ImageID = 2,Title = "title2",ImageSRC = "photos/image2.jpg",ThumbImageSRC = "photos/thumb_image2.jpg"}, new MyImage {ImageID = 3,Title = "title3",ImageSRC = "photos/image3.jpg",ThumbImageSRC = "photos/thumb_image3.jpg"}, new MyImage {ImageID = 4,Title = "title4",ImageSRC = "photos/image4.jpg",ThumbImageSRC = "photos/thumb_image4.jpg"}, new MyImage {ImageID = 5,Title = "title5",ImageSRC = "photos/image5.jpg",ThumbImageSRC = "photos/thumb_image5.jpg"}, }; Repeater1.DataSource = list; Repeater1.DataBind(); } public class MyImage { public int ImageID { get; set; } public string Title { get; set; } public string ImageSRC { get; set; } public string ThumbImageSRC { get; set; } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <!-- 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" /> <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin --> <!-- Ativando o jQuery lightBox plugin --> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <style type="text/css"> /* jQuery lightBox plugin - Gallery style */#gallery { background-color: #444; padding: 10px; width: 520px; } #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> <body> <form id="form1" runat="server"> <h2 id="example"> Example</h2> <p> Click in the MyImage and see the <strong>jQuery lightBox plugin</strong> in action.</p> <div id="gallery"> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <ul> </HeaderTemplate> <ItemTemplate> <li><a runat="server" href='<%# Eval("ImageSRC") %>' title='<%# Eval("Title") %>'> <img src='<%# Eval("ThumbImageSRC") %>' width="72" height="72" alt="" /> </a></li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> </div> </form> </body> </html>
You can download the LightBox related files from http://leandrovieira.com/projects/jquery/lightbox/Hope this helps!
What kind of email newsletter would you prefer to receive from CodeAsp.Net?18
