以 JavaScript 啟動 Lightbox 2 (更新版)
之前寫的方法會造成大圖讀取緩慢(因為都是讀原圖),想想還是縮圖比較有禮貌,所以現在貼圖的 HTML 是 blogger 自動插入的:
- <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://原圖.png">
- <img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://縮圖.png" border="0" alt="" id="BLOGGER_PHOTO_ID_some_id" />
- </a>
通常會再刪一點:
- <a href="http://原圖.png">
- <img src="http://縮圖.png" alt="替代文字" />
- </a>
JavaScript 則改為:(使用 Lightbox 2.03.3、Prototype 1.6.0)
- $$('.postcontent img').each( function(i) {
- var fullSrc = i.src; // fullSrc : 原圖的位址
- if( i.up('a') && i.up('a').href )
- {
- var srcExt = i.up('a').href.split('.').pop().toLowerCase();
- if( srcExt == 'png' || srcExt == 'jpg' || srcExt == 'gif' || srcExt == 'bmp' )
- { fullSrc = i.up('a').href; }
- }
- var imageLink = new Element("a", { rel: 'lightbox[post]', href: fullSrc, title: i.alt });
- i.insert({'before': imageLink}); // 'top' insert 在 ie 會出問題
- Event.observe( i, 'click', function(event) { myLightbox.start(imageLink); Event.stop(event); });
- });
有 0 個意見
☂