Lightbox2 圖片顯示特效

以下資料是從這個網址直接複製再翻譯的,翻得不好,請指教^^

Lightbox2

http://www.huddletogether.com/projects/lightbox2/

How to Use

Part 1 - Activate

  1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
    (將以下語法加到Html檔的 <head>...</head> 之間)
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
  2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
    (包含下語法也要加到Html檔的 <head>...</head> 之間)
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />  

  3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate


  1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
    (將 rel = "lightbox"屬性加到任何一個有超連結的標韱中,例:)
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>  
    Optional: Use the title attribute if you want to show a caption. (選項:如果要顯示圖片說明內容,可以設定title屬性)

  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
    (如果有一組相關照片,可以加上群組名稱使用以下這種方式設定,設定群組可以在瀏覽圖片時直接點點切換下一張例:)
    <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>
    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!(每一頁及群組中的圖片數量沒有限制)

留言

小虹寫道…
其實jquery也是不錯用的方法之一喔!!
小虹寫道…
jquery也是個不錯的語法喔!!

可以學學看,對網頁製作很有幫助~