漂亮圖片演示ajax制作教程－lightbox

這種效果就像你關閉計算機時所得到的那種效果。在不刷新頁面的情況下實現大圖片瀏覽。過渡完美。
大家可以看看效果：http://www.evaxp.com/pic/

這個演示我是用golive做得。手動添加。錯亂排列。主要就是添加這么一段代碼

<DIV?class=thumbnail><a?href="pic/large_000.jpg"?rel="lightbox[ziyi]"><img?src="pic/small_000.jpg"></a></div>

但是pic/large_000.jpg這個數值就沒想到什么好的方法批量改變。希望高手指教一下。。今天添加了80張。一共135張。剩下的下次添加。是幫朋友kk-ziyi(重慶魔獸MM，現在是model一名)做的一個照片集。

那么要實現這樣的效果應該如何做呢?

首先把要用到的js和css下下來。點擊這里下載。

解壓后把images js css 這三個文件夾復制到你的頁面跟目錄

然后在你要添加的頁面之間添加

<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>

<link?rel="stylesheet"?href="css/lightbox.css"?type="text/css"?media="screen"?/>

如果你修改了目錄名。請根據自己改的修改代碼。

做完上面的就是在你要添加這個特效的圖片連接上加上

rel="lightbox"

這個參數
比如：

<a?href="大圖連接"?rel="lightbox"><img?src="小圖連接"></a>

這個是單圖用的。

要添加一系列圖的話用下面代碼：

<a?href="大圖連接"?rel="lightbox[ziyi]"><img?src="小圖連接"></a>

其中[ziyi]這個是任意取的參數。參數相同就是同一系列的圖片。那么你打開圖片后點擊半圖就連接到上一張。右半圖就連接到下一張！

簡單的應用吧！

轉載于:https://www.cnblogs.com/QDuck/archive/2006/06/06/418879.html

總結

以上是生活随笔為你收集整理的漂亮图片演示ajax制作教程－lightbox的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。