Tool Pages

Lightbox 和 jQuery 衝突, 導致無法顯示效果

Lightbox 是圖片效果的 JavaScript, 跟某些 jQuery 程式庫元素會衝突.  也就是共同的javascript元素搶著執行, 其中一種效果就被忽略.
例如使用 slide toggle, 在網頁上的實際效果卻不見.
然後... 明明沒錯, 哼哼... 繼續死命地改程式碼. 依然看不見滑動效果. 最後只能一一檢查各種js插件. 這就是亂玩部落格的後果...

這時候不需要改lightbox的js檔案. 可以發現在宣告jQuery的函數時, 定義相同的元素造成所有動作停止.
例如︰Lightbox, jQuery 定義了相同的元素 - $(document)
關於這一點衝突, jQuery程式庫有做出調解修正方法. Click here

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

或是

jQuery.noConflict();
(function($) {
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

這時候如果有人願意翻譯這一段外星文, 我會很感激...
將含有 $ 變量所定義的元素, 確認控制權為網頁上實現的第一個javascript, 於指定標的控制權讓渡給另一jQuery程式庫.
其實還有更簡單的解釋方式, 針對 $ 符號造成的神經錯亂, 只要將所有jQuery的函數裡的 $ 換成另一個符號即可.
亦即︰$ = jQuery

* Step 1. 在jQuery程式庫下方增加一項宣告, 如下︰

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
 <script type='text/javascript'>var jQuery=$;</script>

* Step 2. 宣告函數時, 遇到 $ 就用 jQuery代替, 如下︰
原本的語法

$(document).ready(function(){
$("element-1").click(function(){
    $("element-2").slideToggle("slow");
  });
});

修改後的語法

jQuery(document).ready(function(){
jQuery("element-1").click(function(){
    jQuery("element-2").slideToggle("slow");
  });
});

然後就可以在網頁裡看到滑動效果了. 而不需要修改lightbox的程式碼.