September 16,2011 15:40

[Javascript + jQuery] 動態相本

現在很多部落格都使用 很酷炫的圖片播放器
整個畫面會變暗,然後刷出一張圖來,還可以點左右鍵透過炫麗的特效來切換圖片。
這就是使用Javascript + jQuery製作的囉~

先人已經開發好的成熟組件有相當多,
fancybox、lightbox、colorbox. . .
因為我一開始接觸到的就是lightbox,用起來也頗好用,所以就也沒換過了。

這邊分享套用步驟還有未來延伸應用的時候會碰到的問題。





套用Lightbox  (單圖瀏覽)  (多圖瀏覽)

首先我們先到 Lightbox 2 的官網下載套件。
這裡是 懶人連結 ,請安心使用,這是直接導向官方下載點。

下載解壓縮後可以看到以下檔案
 
_MACOSX這個資料夾,用力Delete,這是MAC系統的壓縮自動產生的東西。
index.html只是它套給你看的範例檔案,如果本人的教學你看不懂,就自己摸索一下這個index.html吧。

接下來我們隨便打開一個我們要套用的網頁
然後在</head>之前加入以下這一串

<head>
<script type="text/javascript" src="js/prototype.js"></script> <!-- lightbox --> 
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <!-- lightbox --> 
<script type="text/javascript" src="js/lightbox.js"></script> <!-- lightbox --> 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <!-- lightbox -->
...
..
.
</head>

Lightbox這一類的組件都是 透過超連結的標籤 來辨認要產生特效的物件。
一般這類的組件都會有 單圖模式 還有 相本模式。
如果是單圖模式就是特效結束以後,就只能選擇關閉。
而相本模式則是可以左右切換上一張、下一張圖。

單圖模式

<a rel="lightbox" title="這裡放圖片的說明" href="images/aaa.jpg"><img src="images/aaa.jpg" border="0"></a>


多圖模式

相本1
<a rel="lightbox[album1]" title="這裡放圖片的說明" href="images/aaa.jpg"><img src="images/aaa.jpg" border="0"></a>
<a rel="lightbox[album1]" title="這裡放圖片的說明" href="images/bbb.jpg"><img src="images/bbb.jpg" border="0"></a>
<a rel="lightbox[album1]" title="這裡放圖片的說明" href="images/ccc.jpg"><img src="images/ccc.jpg" border="0"></a>

相本2
<a rel="lightbox[album2]" title="這裡放圖片的說明" href="images/ddd.jpg"><img src="images/ddd.jpg" border="0"></a>
<a rel="lightbox[album2]" title="這裡放圖片的說明" href="images/eee.jpg"><img src="images/eee.jpg" border="0"></a>
<a rel="lightbox[album2]" title="這裡放圖片的說明" href="images/fff.jpg"><img src="images/fff.jpg" border="0"></a>
<a rel="lightbox[album2]" title="這裡放圖片的說明" href="images/ggg.jpg"><img src="images/ggg.jpg" border="0"></a>

<!-- rel: 用來辨識特效的標籤 -->
<!-- title: 瀏覽相片的時候,在title標籤中的文字都會被顯示出來 -->

多圖模式與單圖模式的 差別僅在於rel這個標籤 裡的字, 一定要使用lightbox當辨識 ,他才認得出來喔,
多圖模式,就是在標籤裡加上[],而[]裡面的字,則是用來辨識是不是屬於同一個相本。

如同上面相本2的範例連結裡,第一本相本album1左右切換就只會出現3張圖,第二本相本album2則會出現4張圖囉~
如此簡單的套用就完成了。




變更Lightbox預設的id標籤

未來隨著越來越多的應用,我們可能在瀏覽不同張相片的時候增加一些描述文字,
但是死板板的文字看起來不是很舒服, Lightbox允許你使用html標籤 來美化你的圖片描述。

但是如果HTML的基礎夠深厚,一下子就看出問題所在了。
title標籤的用途在HTML中的定義就是讓你滑鼠停頓在上面的時候,會show出title標籤裡的描述。
這樣尷尬了,如果我為了讓圖片描述漂漂亮亮而去打了一堆HTML碼,
當使用者滑鼠移上去時,就會出現一大串的程式碼. . . 相當的噁心。
所以 我們必須要把Lightbox的辨識標籤置換掉
讓Lightbox讀取圖片描述的時候不要去讀title而使用其他的標籤。

打開目錄下 js/lightbox.js 
我們Ctrl+F搜尋一下"title",會發現以下程式碼。

if ((imageLink.rel == 'lightbox'))

 // if image is NOT part of a set, add single image to imageArray 
 this.imageArray.push([imageLink.href, imageLink.title]); 
} else 

 // if image is part of a set.. 
 this.imageArray = 
 $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]'). 
 collect(function(anchor){ return [anchor.href, anchor.title]; }). 
 uniq(); 

 while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; } 
}

那兩個黃色的"title"就是我們要換掉的標籤了。
我是使用id來置換,所以我的程式碼會變成

if ((imageLink.rel == 'lightbox'))

 // if image is NOT part of a set, add single image to imageArray 
 this.imageArray.push([imageLink.href, imageLink.id]); 
}
 else 

 // if image is part of a set.. 
 this.imageArray = 
 $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]'). 
 collect(function(anchor){ return [anchor.href, anchor.id]; }). 
 uniq(); 

 while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; } 
}

相對,前台的網頁中,也就必須更換一下對應的標籤。

<a rel="lightbox" title="這裡放圖片的說明" href="images/aaa.jpg"><img src="images/aaa.jpg" border="0"></a>
換成
<a rel="lightbox" id="這裡放圖片的說明" href="images/aaa.jpg"><img src="images/aaa.jpg" border="0"></a>

這樣就解決囉~




當Lightbox與其他jQuery衝突

隨著未來又更延伸的應用,有可能一個網站套用了許許多多的套件。
但是像我一樣的Javascript初學者一定會碰到這類的問題。
就是當我使用其他的jQuery套件時,發現其中一組會失效!!

原因是 Lightbox目錄中 prototype.js與jQuery.js檔案的衝突。
他們都 一起搶用了$這個符號
 Lightbox官方 有提供解決的辦法,就是使用jQuery.noConlict();來解決。

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
 jQuery.noConflict();
 
 
 // Use jQuery via jQuery(...)
 
 jQuery(document).ready(function()
 
{
  
jQuery("div").hide();
 
 
});
 
 
// Use Prototype with $(...), etc.
 
 $
('someid').hide();
</script>

只要將衝突到的套件$置換掉即可。
像上述的範例 
 $('
div
').hide();  
這個衝突到了,那就將他換成  jQuery("div").hide(); 即可


有了以上三招,大家應該都能擁有美麗的相本了。
謝謝收看。






  • pokey00000000 發表於樂多回應(0)引用(0)程式 >> Javascript編輯本文

    引用URL

    http://cgi.blog.roodo.com/trackback/16783815

     
     


     
    -
    贊助商廣告