如何使用lightbox制作登录窗口

Posted 2023-05-05

RT

还是老规矩，先看看实现的效果吧~~~ 还不错吧，嘿嘿！那接下来就自己也做一个吧~~~一、下载Lightbox 大家可以下载Lightbox，目前最新版本是Lightbox JS V 2.04，点此下载吧。 解压后如下： 二、在ASP.NET中的使用 建立一个网站，然后添加相应的Lightbox文件。 在Photo.aspx页面，添加引用，如下： <script type="text/javascript" language="javascript" src="JS/prototype.js"></script>
<script type="text/javascript" language="javascript" src="JS/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" language="javascript" src="JS/lightbox.js"></script>

<link rel="Stylesheet" href="CSS/lightbox.css" type="text/css" media="screen" />
三、建立数据库(略) 在数据库中存入照片的信息，表结构和数据如下： 在此不多说了！四、在ASP.NET后台调用数据库并显示 1.web.config配置：配置数据库链接字符串 2.在Photo.aspx页面加入Repeater控件，用来显示照片。代码如下： <h1>奥运相册</h1>
<div id="page">
<div id="images">
<ul class="gallery">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li><a href=\'<%#Eval("Path") %>\' rel="lightbox[roadtrip]" title=\'<%#Eval("Remark") %>\' style="color:Red; size:14pt"><img src=\'<%#Eval("Path") %>\' alt=\'<%#Eval("Remark") %>\' style="width:120px; height:80px" /></a></li>
</ItemTemplate>
</asp:Repeater>

</ul>
</div>
</div> 3.Photo.aspx后台调用数据库信息，代码如下： protected void Page_Load(object sender, EventArgs e)

Bind();


private void Bind()

string SqlConn = GetSQLConn();
SqlConnection conn = new SqlConnection(SqlConn);
conn.Open();

string sqlstr = "Select * From Picture";
DataSet ds = new DataSet();
SqlDataAdapter sda = new SqlDataAdapter(sqlstr,conn);
sda.Fill(ds);
Repeater1.DataSource = ds.Tables[0].DefaultView;
Repeater1.DataBind();


private string GetSQLConn()

string conn = ConfigurationSettings.AppSettings["SQLConnString"];
return conn;
参考技术A conn.Open();

string sqlstr = "Select * From Picture";
DataSet ds = new DataSet();
SqlDataAdapter sda = new SqlDataAdapter(sqlstr,conn);
sda.Fill(ds);
Repeater1.DataSource = ds.Tables[0].DefaultView;
Repeater1.DataBind();


private string GetSQLConn()

string conn = ConfigurationSettings.AppSettings["SQLConnString"];
return conn;

lightbox灯箱效果

Lightbox插件可以轻松的实现浏览图片相册的友好用户体验！

1、下载地址：http://www.lokeshdhakar.com/projects/lightbox2/

2、如何使用：

2.1、引入插件

<script type="text/javascript" src="js/lightbox/lightbox.min.js"></script>

2.2、引入css样式

<link href="js/lightbox/css/lightbox.css" rel="stylesheet" />

使用情景一（单张浏览）：

<a href="img/image-1.jpg" data-lightbox="img1" data-title="图片一">图片一</a>

使用情景二（图片集浏览）：

<a href="img/image-1.jpg" data-lightbox="group2" data-title="图片一">图片一</a>
<a href="img/image-2.jpg" data-lightbox="group2" data-title="图片二">图片二</a>
<a href="img/image-3.jpg" data-lightbox="group2" data-title="图片三">图片三</a>
<a href="img/image-4.jpg" data-lightbox="group2" data-title="图片四">图片四</a>

局部修改，增加用户体验：

将：return"Image "+a+" of "+b
修改为：return a+"/"+b

最后附上两效果图吧：