lightbox的使用方法
Lightbox JS 是一個(gè)簡(jiǎn)單而又謙恭的用來(lái)把圖片覆蓋在當(dāng)前頁(yè)面上的腳本. 它能被快速安裝并且運(yùn)作于所有流行的瀏覽器.
使用方法如下：
步驟 1 - 安裝
1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果庫(kù). 將需要外調(diào)這三個(gè) 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、外調(diào) Lightbox CSS 文件 (或添加 Lightbox 樣式到現(xiàn)行的樣式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3、檢查 CSS 并確定調(diào)用的 prev.gif 和 next.gif 文件在正確的位置. 同樣要確定調(diào)用的 loading.gif 和 clo.gif 文件及 lightbox.js 文件在正確的位置.
步驟 2 - 激活
1、添加 rel="lightbox" 屬性到任何一個(gè)鏈接標(biāo)簽去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
可選擇項(xiàng): 使用 title 屬性加上說(shuō)明.
2、如果有一套想分組的相關(guān)圖片, 接著上一部并且又在 rel 屬性中添加一個(gè)帶方括號(hào)的組名. 例如:
<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、沒(méi)有限定每個(gè)頁(yè)面的圖片組數(shù)量和每個(gè)圖片組圖片的數(shù)量。
哪位大俠可以給我講下google那個(gè)圖片特效的原理
這個(gè)很簡(jiǎn)單，我告訴你正解
這里面用到的技術(shù)：ajax，div層的概念，javascript的第三方特效庫(kù)
div層的概念：類似于一個(gè)容器，能夠容納圖片等。用代碼來(lái)解釋就是：“<div>這里存放圖片</div>”
略縮圖和大圖：圖像可以用代碼來(lái)控制顯示的大小，所以你能夠看到小圖和大圖
當(dāng)你點(diǎn)擊略縮圖示，你最先看到一塊白色區(qū)域，中間的地方有個(gè)加載等待圖案，這里面用到了ajax技術(shù)，同時(shí)用到了div層的概念（稍候解釋）。當(dāng)ajax接收到了圖片加載完畢的信息后，會(huì)告知瀏覽器，可以顯示圖片了。
第二步，圖片顯示在白色區(qū)域中。
為什么有些時(shí)候白色區(qū)域會(huì)變小？
因?yàn)檫@里又用到了第三方的js函數(shù)庫(kù)，他的作用的過(guò)渡效果，即div層的移動(dòng)。所以你會(huì)看到白色區(qū)域慢慢的向圖片邊緣靠攏。
問(wèn)什么你點(diǎn)擊不到其他地方？
用技術(shù)的角度來(lái)解釋，就是在你第一次點(diǎn)擊小圖的時(shí)候，他已經(jīng)自動(dòng)創(chuàng)建的一個(gè)透明的div層在上面，所以你點(diǎn)不到他
這就類似于你在桌子上放一幅畫(huà)，而在畫(huà)的上面放上玻璃板，當(dāng)你用筆去往上寫東西的時(shí)候，當(dāng)然不會(huì)寫到畫(huà)上面。
我說(shuō)，大哥，你明白了嗎？我解釋的不容易啊，給分吧
********************************************
我是搞web開(kāi)發(fā)的，如果用我們的專業(yè)術(shù)語(yǔ)來(lái)給你解釋，你能明白嗎？你有什么依據(jù)來(lái)證實(shí)你說(shuō)的是對(duì)的？代碼的編譯原理，程序執(zhí)行的先后順序，我能夠用我的經(jīng)驗(yàn)判斷出來(lái)。如果你想真正弄清楚這是怎么一回事，我希望你看看javascript和html基本語(yǔ)法知識(shí)（特別是div的用法，設(shè)置他的style的z-index屬性和filter屬性，然后就是js的基本語(yǔ)法和dom規(guī)范），然后再來(lái)提問(wèn)。這樣效果會(huì)好一些，前提是你愿意在這上面花費(fèi)一些時(shí)間
*********************************************
頁(yè)面確實(shí)有flash控件，但只有一個(gè)地方用到了，而圖片顯示的時(shí)候沒(méi)有用到。共兩個(gè)文件如下(webroot代表應(yīng)用根目錄)
名稱：flash_ad_relay.swf
目錄：webroot/comic/flasher/ads_data/
名稱：imgad.swf
目錄：webroot/comic/flasher/ads_data/
說(shuō)明：通過(guò)觀察ads.htm（目錄在webroot/comic/flasher/）文件代碼，能夠判斷，flash_ad_relay.swf應(yīng)該是google提供的一個(gè)flash控件，其作用是控制廣告程序的加載進(jìn)度。而imgad.swf則是一個(gè)廣告（ad）程序，當(dāng)當(dāng)網(wǎng)的那個(gè)，在頁(yè)面最下面。
總體來(lái)說(shuō)flash_ad_relay.swf用來(lái)控制imgad.swf文件加載的進(jìn)度并且顯示。
入口方法：tianchaoyu.html文件中<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
此行代碼用來(lái)加載flash廣告程序，這應(yīng)該是遵循了google的命名規(guī)范和目錄結(jié)構(gòu)。
上面這個(gè)是我個(gè)人推測(cè)的，但只有這一個(gè)地方用到flash文件，圖片顯示完全沒(méi)有用到。
**********************************************
lightbox.css文件
目錄：http://www.songzg1.com/comic/flasher/css/lightbox.css
說(shuō)明：#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
上面為lightbox.css代碼片斷，width: 250px;height: 250px;控制了圖片第一次點(diǎn)擊的時(shí)候初始化大小為250像素*250像素 在17寸1024*768分辨率上。加載的過(guò)程中用到了loading.gif圖片（http://www.songzg1.com/comic/flasher/images/loading.gif），你可能是因?yàn)檫@個(gè)原因把它理解成flash吧。這只是一張gif圖而已。
當(dāng)點(diǎn)擊圖片，圖片數(shù)據(jù)傳輸完畢之后，能夠獲得圖片的寬高屬性，根據(jù)這些屬性，那個(gè)div層（<div><img /></div>）會(huì)自動(dòng)擴(kuò)大或縮小，以適應(yīng)新的圖片。這就是你看到的過(guò)渡效果。
處理放大縮小過(guò)渡效果的文件是lightbox.js，而effects.js也有一些坐標(biāo)變化的處理。
lightbox.js是一個(gè)簡(jiǎn)單實(shí)用的用來(lái)把圖片覆蓋在當(dāng)前頁(yè)面上的腳本. 它能被快速安裝并且運(yùn)作于所有流行的瀏覽器.。這個(gè)網(wǎng)站上用的是2.02版本，它是由Lokesh Dhakar人于20060331日創(chuàng)建的，可以通過(guò)http://www.huddletogether.com察看相關(guān)信息。
最后介紹使用方法，非常easy
**********************************************
先說(shuō)一下其他兩個(gè)js框架
prototype.js
它是一個(gè)非常優(yōu)雅的javascript基礎(chǔ)類庫(kù)，對(duì)javascript做了大量的擴(kuò)展，而且很好的支持Ajax，國(guó)外有多個(gè)基于此類庫(kù)實(shí)現(xiàn)的效果庫(kù)，也做得很棒。
像前面提到的lightbox.js和后面要說(shuō)的effects.js是基于prototype.js實(shí)現(xiàn)的，他們通常結(jié)合使用。
scriptaculous.js和effects.js
這是個(gè)動(dòng)畫(huà)效果庫(kù)。
scriptaculous 包含以下幾個(gè)部分：
builder.js ：提供了一種方便的建立html元素的方法
controls.js ：包含自動(dòng)提示和動(dòng)態(tài)編輯兩個(gè)控件
dragdrop.js ： 提供元素拖放的功能
effects.js ： 設(shè)計(jì)優(yōu)良的ajax效果庫(kù)，這篇文章要講的就是這個(gè)
slider.js ： 一個(gè)滑動(dòng)條控件
effects.js中提供了兩種類型的動(dòng)畫(huà)效果，一種稱為核心效果（core effect），一種稱為組合效果（combination effect）
**********************************************
結(jié)合使用
第一步
Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果庫(kù). 你將需要外調(diào)這三個(gè) 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>
第二步
外調(diào) Lightbox CSS 文件 (或添加 Lightbox 樣式到你現(xiàn)行的樣式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
第三步
檢查 CSS 并確定調(diào)用的 prev.gif 和 next.gif 文件在正確的位置. 同樣要確定調(diào)用的 loading.gif 和 clo.gif 文件及 lightbox.js 文件在正確的位置.
方式一：添加 rel="lightbox" 屬性到任何一個(gè)鏈接標(biāo)簽去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
方式二：如果你有一套你想分組的相關(guān)圖片, 接著上一部并且又在 rel 屬性中添加一個(gè)帶方括號(hào)的組名. 例如:
<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>
********************************************
********************************************
基本上就是這么用，我都寫的快吐血了
要是還有不明白的，提出來(lái)，需要詳細(xì)代碼的話，我可以給你做一個(gè)demo
lightbox下載地址：http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip
prototype.js下載地址（你只需要下在lightbox就可以了，里面包含著個(gè)文件了）：
http://www.prototypejs.org/
如何使用lightbox制作登錄窗口
還是老規(guī)矩，先看看實(shí)現(xiàn)的效果吧~~~ 還不錯(cuò)吧，嘿嘿！那接下來(lái)就自己也做一個(gè)吧~~~一、下載Lightbox 大家可以下載Lightbox，目前最新版本是Lightbox JS V 2.04，點(diǎn)此下載吧。 解壓后如下： 二、在ASP.NET中的使用 建立一個(gè)網(wǎng)站，然后添加相應(yīng)的Lightbox文件。 在Photo.aspx頁(yè)面，添加引用，如下： <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" />
三、建立數(shù)據(jù)庫(kù)(略) 在數(shù)據(jù)庫(kù)中存入照片的信息，表結(jié)構(gòu)和數(shù)據(jù)如下： 在此不多說(shuō)了！四、在ASP.NET后臺(tái)調(diào)用數(shù)據(jù)庫(kù)并顯示 1.web.config配置：配置數(shù)據(jù)庫(kù)鏈接字符串 2.在Photo.aspx頁(yè)面加入Repeater控件，用來(lái)顯示照片。代碼如下： <h1>奧運(yùn)相冊(cè)</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后臺(tái)調(diào)用數(shù)據(jù)庫(kù)信息，代碼如下： 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官方地址
在網(wǎng)頁(yè)的下面有演示地址和常用屬性。
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修改樣式
彈出層的樣式修改非常簡(jiǎn)單，只需要會(huì)使用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;
}
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
有關(guān)lightbox 和 jQuery 沖突的問(wèn)題， 我的代碼錯(cuò)在哪，， 比較笨馬上都看2天了
看了一下你的程序，覺(jué)得問(wèn)題可能出現(xiàn)在兩個(gè)地方：
1、你的程序時(shí)gb2312的，jquery支持的是UTF-8，用gb2312經(jīng)常會(huì)出一些意想不到的錯(cuò)誤。
2、你有兩個(gè)庫(kù)js/scriptaculous.js?load=effects和lightbox.js，是在加載jquery之后才加載的，試試把他們放到j(luò)query之前加載。
3、var jq=jQuery.noConflict();這種方式我之前沒(méi)有用過(guò)，不知是否合適，一般來(lái)說(shuō)，是直接寫作jQuery.noConflict();的，然后，你后面所有的jq都以jQuery代替。如果你確定這樣寫是可以的，那么把jQuery(function(){
那行改成jq(function(){
你試試，問(wèn)題估計(jì)應(yīng)該在這三個(gè)地方了。參考的鏈接也可以看一下，應(yīng)該對(duì)你有幫助。
另外，建議你安裝一個(gè)firedebug用于調(diào)試js代碼，以后來(lái)提問(wèn)時(shí)，說(shuō)一下firedebug的錯(cuò)誤提示是什么，否則真的很難猜。
