lightlightbox

好一陣子沒寫新東西了,前陣子其實在把一些舊的Script重新寫過,像是hiddenlinks(想到新名字後才會放出:P)和這裡的表單檢查等等,主要是想脫離jQuery,當然不是嫌它不好,而是覺得自己blog的東西不用特別用jQuery來縮減開發時間,而且寫好的東西大部分都還會公開出來。其中最後要處理的就是lightbox特效,我之前是用thickbox這個套件,本來是想改用FancyZoom,不過他的縮放特效遇到一些特定情況時會變很慢,最早的lightbox又不是用DOM方法來處理,在XHTML 1.1下無用武之地,更不用說2.0用了prototype,最後我決定自己寫一個lightbox,完成後我把它取名為lightlightbox,因為真的很輕量,程式碼不到100行XD。

想看效果的可以直接點,如果不想開在lightbox裡面,可以壓著ctrl或alt鍵再點擊。全部是三個檔案,一個js檔,一個讀取中的gif動畫檔,一個關閉按鈕的圖檔,讀取中的gif動畫我是用Ajax Loading Gif Generator做的,關閉按鈕的圖則是先用FancyZoom的那張,和蘋果網站上用的很像,因為權利問題我不直接提供連結。在功能上預設是把所有連到jpg、jpeg、gif、png這四種檔案的連結都套上lightbox特效,另外也可以設定classFilter來判斷class,變成可以用class來決定哪些連結要有lightbox,哪些不要,檔案下載:

另外有一個fade in/out版的:

使用前先記得修改llbox.js裡面的讀取中動畫和關閉按鈕的圖檔位置,目前版本在IE7、Firefox 3 beta5、Safari 3.1、Opera 9.26上測試過都沒問題。有兩個已知問題,一是png圖在IE6以前的版本會有透明色的問題,另一個是鍵盤控制沒有處理,等修正後會放出1.1版。

更新:結果今天就花時間把兩個問題都處理完了,更新版的檔案在原位置。

comments powered by Disqus