lightbox的使用方法
Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.
使用方法如下：
步骤 1 - 安装
1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 将需要外调这三个 Javascript 文件在的 header.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到现行的样式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3、检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 clo.gif 文件及 lightbox.js 文件在正确的位置.
步骤 2 - 激活
1、添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
可选择项: 使用 title 属性加上说明.
2、如果有一套想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
3、没有限定每个页面的图片组数量和每个图片组图片的数量。
哪位大侠可以给我讲下google那个图片特效的原理
这个很简单，我告诉你正解
这里面用到的技术：ajax，div层的概念，javascript的第三方特效库
div层的概念：类似于一个容器，能够容纳图片等。用代码来解释就是：“<div>这里存放图片</div>”
略缩图和大图：图像可以用代码来控制显示的大小，所以你能够看到小图和大图
当你点击略缩图示，你最先看到一块白色区域，中间的地方有个加载等待图案，这里面用到了ajax技术，同时用到了div层的概念（稍候解释）。当ajax接收到了图片加载完毕的信息后，会告知浏览器，可以显示图片了。
第二步，图片显示在白色区域中。
为什么有些时候白色区域会变小？
因为这里又用到了第三方的js函数库，他的作用的过渡效果，即div层的移动。所以你会看到白色区域慢慢的向图片边缘靠拢。
问什么你点击不到其他地方？
用技术的角度来解释，就是在你第一次点击小图的时候，他已经自动创建的一个透明的div层在上面，所以你点不到他
这就类似于你在桌子上放一幅画，而在画的上面放上玻璃板，当你用笔去往上写东西的时候，当然不会写到画上面。
我说，大哥，你明白了吗？我解释的不容易啊，给分吧
********************************************
我是搞web开发的，如果用我们的专业术语来给你解释，你能明白吗？你有什么依据来证实你说的是对的？代码的编译原理，程序执行的先后顺序，我能够用我的经验判断出来。如果你想真正弄清楚这是怎么一回事，我希望你看看javascript和html基本语法知识（特别是div的用法，设置他的style的z-index属性和filter属性，然后就是js的基本语法和dom规范），然后再来提问。这样效果会好一些，前提是你愿意在这上面花费一些时间
*********************************************
页面确实有flash控件，但只有一个地方用到了，而图片显示的时候没有用到。共两个文件如下(webroot代表应用根目录)
名称：flash_ad_relay.swf
目录：webroot/comic/flasher/ads_data/
名称：imgad.swf
目录：webroot/comic/flasher/ads_data/
说明：通过观察ads.htm（目录在webroot/comic/flasher/）文件代码，能够判断，flash_ad_relay.swf应该是google提供的一个flash控件，其作用是控制广告程序的加载进度。而imgad.swf则是一个广告（ad）程序，当当网的那个，在页面最下面。
总体来说flash_ad_relay.swf用来控制imgad.swf文件加载的进度并且显示。
入口方法：tianchaoyu.html文件中<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
此行代码用来加载flash广告程序，这应该是遵循了google的命名规范和目录结构。
上面这个是我个人推测的，但只有这一个地方用到flash文件，图片显示完全没有用到。
**********************************************
lightbox.css文件
目录：http://www.songzg1.com/comic/flasher/css/lightbox.css
说明：#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
上面为lightbox.css代码片断，width: 250px;height: 250px;控制了图片第一次点击的时候初始化大小为250像素*250像素 在17寸1024*768分辨率上。加载的过程中用到了loading.gif图片（http://www.songzg1.com/comic/flasher/images/loading.gif），你可能是因为这个原因把它理解成flash吧。这只是一张gif图而已。
当点击图片，图片数据传输完毕之后，能够获得图片的宽高属性，根据这些属性，那个div层（<div><img /></div>）会自动扩大或缩小，以适应新的图片。这就是你看到的过渡效果。
处理放大缩小过渡效果的文件是lightbox.js，而effects.js也有一些坐标变化的处理。
lightbox.js是一个简单实用的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.。这个网站上用的是2.02版本，它是由Lokesh Dhakar人于20060331日创建的，可以通过http://www.huddletogether.com察看相关信息。
最后介绍使用方法，非常easy
**********************************************
先说一下其他两个js框架
prototype.js
它是一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国外有多个基于此类库实现的效果库，也做得很棒。
像前面提到的lightbox.js和后面要说的effects.js是基于prototype.js实现的，他们通常结合使用。
scriptaculous.js和effects.js
这是个动画效果库。
scriptaculous 包含以下几个部分：
builder.js ：提供了一种方便的建立html元素的方法
controls.js ：包含自动提示和动态编辑两个控件
dragdrop.js ： 提供元素拖放的功能
effects.js ： 设计优良的ajax效果库，这篇文章要讲的就是这个
slider.js ： 一个滑动条控件
effects.js中提供了两种类型的动画效果，一种称为核心效果（core effect），一种称为组合效果（combination effect）
**********************************************
结合使用
第一步
Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.
代码：
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
第二步
外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
第三步
检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 clo.gif 文件及 lightbox.js 文件在正确的位置.
方式一：添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
方式二：如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
********************************************
********************************************
基本上就是这么用，我都写的快吐血了
要是还有不明白的，提出来，需要详细代码的话，我可以给你做一个demo
lightbox下载地址：http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip
prototype.js下载地址（你只需要下在lightbox就可以了，里面包含着个文件了）：
http://www.prototypejs.org/
如何使用lightbox制作登录窗口
还是老规矩，先看看实现的效果吧~~~ 还不错吧，嘿嘿！那接下来就自己也做一个吧~~~一、下载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="rver">
<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 nder, 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;
}
如何使用jquery插件lightbox
1.Lightbox_me插件功能
用于显示弹出层
2.Lightbox_me官方地址
在网页的下面有演示地址和常用属性。
3.Lightbox_me使用方法
1.首先引用jquery.js与jquery.lightbox_me.js
<script
src="/ref/jquery-1.7.2.min.js"></script>
<script
src="/ref/lightbox_me/jquery.lightbox_me.js"></script>
2.使用的代码
<script
type="text/javascript">
$(function()
{
$('#login').click(function(e)
{
$('#loginbox').lightbox_me({
centered:
true,
onLoad:
function()
{
$('#loginbox').find('input:first').focus()
}
});
e.preventDefault();
});
$('#cancel').click(function(){
$('#loginbox').trigger('clo');
//alert('aaa');
});
});
</script>
4.Lightbox_me修改样式
弹出层的样式修改非常简单，只需要会使用css就可以了。例如一下代码：
#loginbox{
width:400px;
display:none;
background:white;
border:1px
solid
#ccc;
}
body
{
font-size:12px;
font-family:微软雅黑;
}
.loginbox-title
{
background:
#eef2f7;
border-bottom:
1px
solid
#ccc;
margin-bottom:10px;
padding:8px
0;
font-size:14px;
text-align:center;
}
.loginbox-footer{
padding:8px
0;
border-top:1px
solid
#ccc;
text-align:center;
background:#eef2f7;
}
table
{
width:98%;
margin:0
8px;
}
th,
td
{
padding:8px
0;
}
th
{
text-align:left;
}
.big
{
padding:5px
18px;
}
以上所述就是本文的全部内容了，希望大家能够喜欢。
有关lightbox 和 jQuery 冲突的问题， 我的代码错在哪，， 比较笨马上都看2天了
看了一下你的程序，觉得问题可能出现在两个地方：
1、你的程序时gb2312的，jquery支持的是UTF-8，用gb2312经常会出一些意想不到的错误。
2、你有两个库js/scriptaculous.js?load=effects和lightbox.js，是在加载jquery之后才加载的，试试把他们放到jquery之前加载。
3、var jq=jQuery.noConflict();这种方式我之前没有用过，不知是否合适，一般来说，是直接写作jQuery.noConflict();的，然后，你后面所有的jq都以jQuery代替。如果你确定这样写是可以的，那么把jQuery(function(){
那行改成jq(function(){
你试试，问题估计应该在这三个地方了。参考的链接也可以看一下，应该对你有帮助。
另外，建议你安装一个firedebug用于调试js代码，以后来提问时，说一下firedebug的错误提示是什么，否则真的很难猜。
