jquery colorbox燈箱~進階版 @ Border的快樂生活記錄

當然如果照著官方給的範例做自然會產生燈箱效果

但在實務上要在a 裡面添加class名稱

如果是已經寫好的程式光是加這個class 就會顯得非常辛苦

這時候就要動點頭腦了官方的範例只是基本用法

會變化的程式設計師才是頂尖的

假設原始的碼是這樣寫的

這會連到一張圖片我要他變成用colorbox燈箱顯示

我們可以參考範例的基本寫法範例是這樣寫的

   $(".group1").colorbox({rel:'group1',maxWidth:"90%", maxHeight:"90%"});

意思是說有一個class名稱為group1的我就跳燈箱

現在我們想一下我們只要讓$(".group1")這個物件被抓到並不一定要class 對吧

我們可以利用下面寫法

   $(document).ready(function(){
       $("a img").click(function(e){
           // 取得a連結的位置
           str = $(e.target).parents("a").attr("href");
 
           // 如果連結的位置是一張圖片  就跳燈箱
           if(str.search("jpg") != -1 || str.search("JPG") != -1 || str.search("gif") != -1 || str.search("GIF") != -1 || str.search("png") != -1 || str.search("PNG") != -1 || str.search("jpg") != -1 )
              $(e.target).parents("a").colorbox({rel:'group1',maxWidth:"90%", maxHeight:"90%"});  // 直接送參數給colorbox
       });
   });

這樣輕鬆簡單就完成改寫

可以參考我的範例檔

http://i-rich.tw/border_blog/colorbox_sample/

另外有件事值得一提如果用js關閉colorbox燈箱呢?

就用這個寫法