DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 對 lightbox JS 圖片控件進行了一下改造, 使其他支持復雜的圖片說明
對 lightbox JS 圖片控件進行了一下改造, 使其他支持復雜的圖片說明
編輯:關於JavaScript     
修改的 lightbox 版本是 2.04 版。
下面是使用我們在使用 lightbox 來顯示圖片時的基本設置:
復制代碼 代碼如下:
<a href="image-url" rel="lightbox" title="image-remark">
  content
</a>

主要是給連接加了一個 rel="lightbox" 屬性
以上面的試設置好連接時, 當點擊此連接,lightbox 將會顯示連接上的圖片,並使用連接的 title 屬性作為圖片的說明,如果要為圖片添加詳細的圖片說明,並為圖片的說明設置一些格式,如字體的大小、顏色等,那麼使用 title 這個屬性來設置這些說明信息是沒辦法實現的。
由於客戶一定要此功能,所以只好去查看 lightbox 的源代碼,檢查是否可以對其進行改造,以滿足這個需要,幸運的是 lightbox 主要的代碼量不是很大,而且可以對其進行一個小小的修改,就可以滿足這個需要,主要是對 prototype.js 這個JS 框架不太熟悉。
以下是修改的過程 :
打開 lightbox.js 文件,原 218 行的代碼為:
this.imageArray.push([imageLink.href, imageLink.title]);
可以看到這裡是直接讀取連接對象的 title 屬性,所以我們只需要把 imageLink.title 改一下就可以了:
this.imageArray.push([imageLink.href, document.getElementById(imageLink.contentId).innerHTML]);

把 imageLink.title 改成了 document.getElementById(imageLink.contentId).innerHTML 了;
從這一句可以看出來,我們需要為連接對象設置一個 contentId 屬性,這個屬性的值是某個 DOM 元素的 ID 號,圖片的說明就是此元素的內容了。
修改完之後就可以在 HTML 這樣設置圖片說明了:
復制代碼 代碼如下:
<a href="image-url" rel="lightbox" contentId="imgDesc" title="image">
  <div id="imgDesc" style="display:none">description</div>
  content
</a>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved