使用Lightbox从ListView弹出图像 [英] Popup image from ListView using Lightbox
本文介绍了使用Lightbox从ListView弹出图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PhotoViewer.aspx.cs" Inherits="PhotViewer" %>
<!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>Untitled Page</title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.lightbox-0.5.js" type="text/javascript"></script>
<link href="css/jqu<big></big>ery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$(''#images a'').lightBox({ fixedNavigation: true });
});
</script>
<%--<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,slider"></script>
<script type="text/javascript" src="js/lightview.js"></script>
<link rel="stylesheet" href="lightview.css" type="text/css" media="screen" />
--%></head>
<body>
<a href ="Images/13.jpg" ><asp:Image ID="Image1" Height="50%" Width ="50%" runat="server"/></a>
<form id="form1" runat="server">
<table>
<tr>
<td>
<asp:ListView ID="lvPhotoViewer" runat="server" GroupItemCount="1">
<LayoutTemplate>
<table ID="groupPlaceholderContainer" runat="server" border="1">
<tr ID="groupPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<td id="Td4" align="center" style="background-color: #eeeeee;">
<div id="images">
<a href=''<%# Eval("Photo") %>'' >
<asp:Image runat="server" ID="imPhoto" Height="450px" Width="450px" ImageUrl=''<%# "~"+Eval("Photo") %>'' />
</a><br />
<asp:Label ID="DefaultPhotIDLabel" runat="server"
Text=''<%# Eval("PhotoName") %>'' />
</div>
</td>
</ItemTemplate>
<GroupTemplate>
<tr ID="itemPlaceholderContainer" runat="server">
<td ID="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
</asp:ListView>
</td>
</tr>
<tr>
<td align="center">
<asp:DataPager ID="DataPager1" runat="server"
PagedControlID="lvPhotoViewer" PageSize="1"
onprerender="DataPager1_PreRender">
<Fields>
<asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="true" ShowPreviousPageButton="true"
ShowLastPageButton="True" ShowNextPageButton="true"
PreviousPageText="<< " NextPageText=">>" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</form>
</body>
</html>
代码落后
code behind
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string photoID = Request.QueryString["PhotoID"];
string albumID = Request.QueryString["AlbumID"];
ViewState["hfAlbumID"] = albumID;
//Get Page number by passing photo id
int index = GetPageNumber(int.Parse(photoID), int.Parse(albumID));
DataPager1.SetPageProperties(index, 1, true);
}
}
/// <summary>
/// Since the pagesize is 1 the row number can be taken as page number
/// </summary>
/// <param name="PhotoID"></param>
/// <param name="AlbumID"></param>
/// <returns></returns>
public int GetPageNumber(int PhotoID,int AlbumID)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
con.Open();
SqlCommand com = new SqlCommand("SELECT PageNumber FROM (SELECT row_number() Over (order by photoid asc) AS PageNumber,photoid,Albumid FROM PhotAlbum where Albumid=" + AlbumID.ToString() + ") As Photos where photoid=" + PhotoID.ToString() + " and Albumid=" + AlbumID.ToString(), con);
SqlDataReader dr = com.ExecuteReader();
int pageno = 1;
if (dr.Read())
{
pageno = int.Parse(dr["PageNumber"].ToString());
}
dr.Close();
con.Close();
return (pageno - 1);
}
public DataTable GetPhoto(string query)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
SqlDataAdapter ada = new SqlDataAdapter(query, con);
DataTable dtEmp = new DataTable();
ada.Fill(dtEmp);
return dtEmp;
}
protected void DataPager1_PreRender(object sender, EventArgs e)
{
lvPhotoViewer.DataSource = GetPhoto("Select * from PhotAlbum where AlbumID = " + ViewState["hfAlbumID"].ToString());
lvPhotoViewer.DataBind();
}
}
推荐答案
（function（）{
(function () {
（''#images a''）。lightBox（{fixedNavigation：true}）;
}）;
< / script>
<％ - < script type =text / javascriptsrc =prototype.js>< / script>
< script type =text / javascriptsrc =js / scriptaculous.js？load = effects，slider>< / script>
< script type =text / javascriptsrc =js / lightview.js>< / script>
< link rel =stylesheethref =lightview.csstype =text / cssmedia =screen/>
- ％>< / head>
< body>
< a href =Images / 13.jpg>< asp：Image ID =Image1Height =50％Width =50％runat =server/>< / A>
< form id =form1runat =server>
< table>
< tr>
< td>
< asp：ListView ID =lvPhotoViewerrunat =serverGroupItemCount =1>
< LayoutTemplate>
< table ID =groupPlaceholderContainerrunat =serverborder =1>
< tr ID =groupPlaceholderrunat =server>
< / tr>
< / table>
< / LayoutTemplate>
< ItemTemplate>
< td id =Td4align =centerstyle =background-color：#eeeeee;>
< div id =images>
< a href =''<％＃Eval（Photo）％>''>
< asp：Image runat =serverID =imPhotoHeight =450pxWidth =450pxImageUrl =''<％＃〜+ Eval（Photo）％> ''/>
< / a>< br />
< asp：Label ID =DefaultPhotIDLabelrunat =server
Text =''<％＃Eval（PhotoName）％>''/>
< / div>
< / td>
< / ItemTemplate>
< GroupTemplate>
< tr ID =itemPlaceholderContainerrunat =server>
< td ID =itemPlaceholderrunat =server>
< / td>
< / tr>
< / GroupTemplate>
< / asp：ListView>
< / td>
< / tr>
< tr>
< td align =center>
< asp：DataPager ID =DataPager1runat =server
PagedControlID =lvPhotoViewerPageSize =1
onprerender =DataPager1_PreRender>
< Fields>
< asp：NextPreviousPagerField ButtonType =LinkShowFirstPageButton =trueShowPreviousPageButton =true
ShowLastPageButton =TrueShowNextPageButton =true
PreviousPageText =<< NextPageText = >> 中/>
< / Fields>
< / asp：DataPager>
< / td>
< / tr>
< / table>
< / form>
< / body>
< / html>
(''#images a'').lightBox({ fixedNavigation: true }); }); </script> <%--<script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,slider"></script> <script type="text/javascript" src="js/lightview.js"></script> <link rel="stylesheet" href="lightview.css" type="text/css" media="screen" /> --%></head> <body> <a href ="Images/13.jpg" ><asp:Image ID="Image1" Height="50%" Width ="50%" runat="server"/></a> <form id="form1" runat="server"> <table> <tr> <td> <asp:ListView ID="lvPhotoViewer" runat="server" GroupItemCount="1"> <LayoutTemplate> <table ID="groupPlaceholderContainer" runat="server" border="1"> <tr ID="groupPlaceholder" runat="server"> </tr> </table> </LayoutTemplate> <ItemTemplate> <td id="Td4" align="center" style="background-color: #eeeeee;"> <div id="images"> <a href=''<%# Eval("Photo") %>'' > <asp:Image runat="server" ID="imPhoto" Height="450px" Width="450px" ImageUrl=''<%# "~"+Eval("Photo") %>'' /> </a><br /> <asp:Label ID="DefaultPhotIDLabel" runat="server" Text=''<%# Eval("PhotoName") %>'' /> </div> </td> </ItemTemplate> <GroupTemplate> <tr ID="itemPlaceholderContainer" runat="server"> <td ID="itemPlaceholder" runat="server"> </td> </tr> </GroupTemplate> </asp:ListView> </td> </tr> <tr> <td align="center"> <asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvPhotoViewer" PageSize="1" onprerender="DataPager1_PreRender"> <Fields> <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="true" ShowPreviousPageButton="true" ShowLastPageButton="True" ShowNextPageButton="true" PreviousPageText="<< " NextPageText=">>" /> </Fields> </asp:DataPager> </td> </tr> </table> </form> </body> </html>
代码落后
code behind
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string photoID = Request.QueryString["PhotoID"];
string albumID = Request.QueryString["AlbumID"];
ViewState["hfAlbumID"] = albumID;
//Get Page number by passing photo id
int index = GetPageNumber(int.Parse(photoID), int.Parse(albumID));
DataPager1.SetPageProperties(index, 1, true);
}
}
/// <summary>
/// Since the pagesize is 1 the row number can be taken as page number
/// </summary>
/// <param name="PhotoID"></param>
/// <param name="AlbumID"></param>
/// <returns></returns>
public int GetPageNumber(int PhotoID,int AlbumID)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
con.Open();
SqlCommand com = new SqlCommand("SELECT PageNumber FROM (SELECT row_number() Over (order by photoid asc) AS PageNumber,photoid,Albumid FROM PhotAlbum where Albumid=" + AlbumID.ToString() + ") As Photos where photoid=" + PhotoID.ToString() + " and Albumid=" + AlbumID.ToString(), con);
SqlDataReader dr = com.ExecuteReader();
int pageno = 1;
if (dr.Read())
{
pageno = int.Parse(dr["PageNumber"].ToString());
}
dr.Close();
con.Close();
return (pageno - 1);
}
public DataTable GetPhoto(string query)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
SqlDataAdapter ada = new SqlDataAdapter(query, con);
DataTable dtEmp = new DataTable();
ada.Fill(dtEmp);
return dtEmp;
}
protected void DataPager1_PreRender(object sender, EventArgs e)
{
lvPhotoViewer.DataSource = GetPhoto("Select * from PhotAlbum where AlbumID = " + ViewState["hfAlbumID"].ToString());
lvPhotoViewer.DataBind();
}
}
这篇关于使用Lightbox从ListView弹出图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
