close


第一次發表：2006-08-22 05:15:52
利用JAVA SCRIPT 產生很棒的秀出圖片方框，官方網站很簡潔有力
真的佩服外國人對任何東西的專著....真是夠專業！
http://www.huddletogether.com/projects/lightbox2/#overview

試用的結果還不錯用，不過他會跟一些東西打架，會造成效果開的大小會過大
還是在找找看是什麼問題？

再度測試的結果，發現他會記憶之前的影像大小，所以才會造成上述的問題
例如：A.JPG 原先大小是 500px X 500px，先執行過此效果(網頁)，再將影像改變大小
變成 300px X 300px 邊框動畫就會錯亂，再將他跑一下，前後頁翻動一下，就恢復正常的
所以這東西真的很棒喔！

使用說明：
Lightbox JS V2.0是個圖片預覽程序，擺脫一般在預覽縮略圖時都會以新視窗開放的不便，以透明的PNG背景讓圖片在同一頁面上開成透明層進而預覽圖片，只要以鼠標點圖，便可關閉浮動層回到原來的畫面，非常的實用且美觀，更優的是Lightbox JS相容於IE/NS/Firefox等瀏覽器，獨立的JS讓安裝更容易。

程序演示：http://mysheji.com/blog/attachments/lightbox2/index.html

如何去使用Lightbox JS V2.0?

1.把JS置於<head>與</head>之間

程序代碼 程序代碼
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


2.把CSS置於<head>與</head>之間

程序代碼 程序代碼
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


3.你可以自由製作更換X與UP,DOWN的圖片.

(1).加入個 rel="lightbox" 到你想使用Lightbox的地方. 例子:

程序代碼 程序代碼
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>


另外可以更換TITLE裡的名字，用於顯示圖片名稱 title="修改為圖片說明文字"

(2).如果你想使用幾張圖片,以UP,DOWN箭頭來更換顯示. 例子:
程序代碼 程序代碼
<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).對於一組圖片或者多少組圖片的數量是沒有限制的..行動吧！

程式作者 Lokesh Dhakar
下載地址：Lightbox v2.03.3
arrow
arrow
    全站熱搜

    kevin0523 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄