(JQuery lightbox image slideshow in Datalist asp.net) – Lightbox là một plugin jquery phổ biến được sử dụng để hiển thị hình ảnh và nội dung trong cửa sổ popup. Bài viết dưới đây sẽ giới thiệu với các bạn cách lấy danh sách hình ảnh từ thư mục và kết hợp với jquery Lightbox để tạo Gallery và trình diễn nó.
- B1: Tạo Project trong Microsoft Visual Studio 2010Trong Visual Studio tạo 1 Class có tên: FileSystemItem và nhập đoạn Code phía dưới cho Class này.
C# Code
using System.IO;
public class FileSystemItem
{
public FileSystemItem(FileInfo file)
{
this.Name = file.Name;
this.FullName = file.FullName;
}
public string Name { get; set; }
public string FullName { get; set; }
}
VB.NET Code
Imports System.IO
Public Class FileSystemItem
Public Sub New(ByVal file As FileInfo)
Me.Name = file.Name
Me.FullName = file.FullName
End Sub
Public Property Name As String
Public Property FullName As String
End Class
- B2: Tạo thư mục Images trong Project, Download thư viện ảnh tại đây và Copy vào thư mục vừa tạo
- B3: Download file jquery.lightbox-0.5.css -> Copy vào thư mục Styles
- B4: Download jquery-1.3.2.js, jquery.lightbox-0.5.js-> Copy vào thư mục Styles
- B5: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
C# Code
<%@ PageTitle="Use jQuery Lightbox in Asp.net Datalist" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryLightboxDatalist._Default" %>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"runat="server">
</asp:ScriptManager>
<h3>
Use jQuery Lightbox in Asp.net Datalist
</h3>
<script type="text/javascript">
function pageLoad() {
$('#gallery a').lightBox();
};
</script>
<asp:UpdatePanel ID="updatePanel"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2"cellspacing="3"width="100%">
<tr>
<td>
<asp:DataList ID="lstEmployees" runat="server" CellPadding="0" CellSpacing="0" Width="100%"
RepeatDirection="Horizontal"RepeatColumns="6"OnItemDataBound="lstEmployees_ItemDataBound">
<ItemTemplate>
<table class="box" align="center">
<tr id="gallery">
<td valign="middle"align="center">
<asp:HyperLink id="lnkEmployee"runat="server"CssClass="Image">
<asp:Image id="imgEmployee"runat="server"ImageAlign="Middle"Width="100px"hspace="0"vspace="0"></asp:Image>
</asp:HyperLink>
</td>
</tr>
<tr>
<td valign="middle"align="center">
<asp:Label ID="lblName"Text='<%# Eval("Name") %>' Runat="server" />
</td>
</tr>
</table>
</ItemTemplate>
<ItemStyle VerticalAlign="Top"/>
</asp:DataList>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
VB.NET Code
<%@ PageTitle="Use jQuery Lightbox in Asp.net Datalist" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="jQueryLightboxDatalist._Default" %>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"runat="server">
</asp:ScriptManager>
<h3>
Use jQuery Lightbox in Asp.net Datalist
</h3>
<script type="text/javascript">
function pageLoad() {
$('#gallery a').lightBox();
};
</script>
<asp:UpdatePanel ID="updatePanel"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2"cellspacing="3"width="100%">
<tr>
<td>
<asp:DataList ID="lstEmployees" runat="server" CellPadding="0" CellSpacing="0" Width="100%" RepeatDirection="Horizontal" RepeatColumns="6">
<ItemTemplate>
<table class="box" align="center">
<tr id="gallery">
<td valign="middle"align="center">
<asp:HyperLink id="lnkEmployee"runat="server"CssClass="Image">
<asp:Image id="imgEmployee"runat="server"ImageAlign="Middle"Width="100px"hspace="0"vspace="0"></asp:Image>
</asp:HyperLink>
</td>
</tr>
<tr>
<td valign="middle"align="center">
<asp:Label ID="lblName" Text='<%# Eval("Name") %>' Runat="server" />
</td>
</tr>
</table>
</ItemTemplate>
<ItemStyle VerticalAlign="Top"/>
</asp:DataList>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>- B4: Viết Code cho file Default.aspx
C# Code
//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
using System;
using System.Data;
using System.IO;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web;
using System.Collections;
using System.Collections.Generic;
namespace jQueryLightboxDatalist
{
public partial class _Default : System.Web.UI.Page
{
#region"Private Members"
private stringFilePath = "";
#endregion
#region"Private Methods"
private voidSetFilePath()
{
FilePath = MapPath("~/Images");
if (!Directory.Exists(FilePath))
{
Directory.CreateDirectory(FilePath);
}
}
private stringGetFullyQualifiedFolderPath(string folderPath)
{
if (folderPath.StartsWith("~"))
{
return Server.MapPath(folderPath);
}
else
{
return folderPath;
}
}
#endregion
#region"Bind Data"
private voidBindData()
{
DirectoryInfo currentDirInfo = new DirectoryInfo(GetFullyQualifiedFolderPath(FilePath));
dynamic folders = currentDirInfo.GetDirectories();
dynamicfiles = currentDirInfo.GetFiles();
List<FileSystemItem> fsItems = new List<FileSystemItem>(folders.Length + files.Length);
foreach (var file in files)
fsItems.Add(new FileSystemItem(file));
lstEmployees.DataSource = fsItems;
lstEmployees.DataBind();
}
#endregion
#region"Datalist Methods"
protected voidlstEmployees_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
{
FileSystemItem item = (FileSystemItem)e.Item.DataItem;
Image imgEmployee = (Image)e.Item.FindControl("imgEmployee");
if (imgEmployee != null)
{
imgEmployee.ImageUrl = Page.ResolveUrl("Images/"+ item.Name);
}
}
}
#endregion
#region"Event Handles"
protected void Page_Load(objectsender, System.EventArgs e)
{
try
{
if (!IsPostBack)
{
SetFilePath();
BindData();
}
}
catch
{
}
}
#endregion
}
}
VB.NET Code
'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
Imports System.IO
Namespace jQueryLightboxDatalist
Public Class _Default
Inherits System.Web.UI.Page
#Region "Private Members"
Private FilePath As String = ""
#End Region
#Region "Private Methods"
Private SubSetFilePath()
FilePath = MapPath("~/Images")
If Not Directory.Exists(FilePath) Then
Directory.CreateDirectory(FilePath)
End If
End Sub
Private FunctionGetFullyQualifiedFolderPath(ByVal folderPath As String) As String
If folderPath.StartsWith("~") Then
Return Server.MapPath(folderPath)
Else
Return folderPath
End If
End Function
#End Region
#Region "Bind Data"
Private SubBindData()
Dim currentDirInfo AsNew DirectoryInfo(GetFullyQualifiedFolderPath(FilePath))
Dim folders = currentDirInfo.GetDirectories()
Dim files = currentDirInfo.GetFiles()
Dim fsItems As New List(Of FileSystemItem)(folders.Length + files.Length)
For Each file In files
fsItems.Add(NewFileSystemItem(file))
Next
lstEmployees.DataSource = fsItems
lstEmployees.DataBind()
End Sub
#End Region
#Region "Datalist Methods"
Private SublstEmployees_ItemDataBound(ByVal sender As Object, ByVal e As DataListItemEventArgs) HandleslstEmployees.ItemDataBound
If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then
Dim item AsFileSystemItem = CType(e.Item.DataItem, FileSystemItem)
Dim lnkEmployee AsHyperLink = DirectCast(e.Item.FindControl("lnkEmployee"), HyperLink)
If NotlnkEmployee Is NothingThen
lnkEmployee.NavigateUrl = Page.ResolveUrl("Images/"& item.Name)
Dim imgEmployee AsImage = DirectCast(lnkEmployee.FindControl("imgEmployee"), Image)
If NotimgEmployee Is NothingThen
imgEmployee.ImageUrl = Page.ResolveUrl("Images/" & item.Name)
End If
End If
End If
End Sub
#End Region
#Region "Event Handles"
Protected SubPage_Load(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Me.Load
Try
IfPage.IsPostBack = False Then
SetFilePath()
BindData()
End If
Catch ex As Exception
End Try
End Sub
#End Region
End Class
End Namespace
Bây giờ chạy Project bạn sẽ có kết quả như ảnh phía dưới.
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment