燈箱+ jQuery衝突

Lightbox我做了一個製表導航使用jQuery .. Chrome可視化是好的，但在Firefox是一團糟。燈箱+ jQuery衝突

我做錯了什麼，因爲event.preventDefault();和return false不工作（我不得不使用滾動點擊錨a href="#id_name的選項卡控制器後搬回到頁面的底部）

任何幫助將不勝感激。

頭：

<!-- Lightbox + Prototype + jQuery -->  
<script type="text/javascript" src="js/prototype.js"></script> 
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> 
<script type="text/javascript" src="js/lightbox.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script type="text/javascript"> 
     if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='js/jquery-1.8.0.min.js' type='text/javascript'%3E%3C/script%3E")); } 
</script>

的jQuery的標籤導航：

<script type="text/javascript"> 
    $(document).ready(function() { 
     //Default Action 
     $(".tab_content").hide(); //Hide all content 
     $("ul.bmenu li:first").addClass("active").show(); //Activate first tab 
     $(".tab_content:first").show(); //Show first tab content      

     //On Click Event 
     $("ul.bmenu li").click(function(event) { 
      event.preventDefault(); //non impedisce di scrollare to Top 
      $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 
      $("ul.bmenu li").removeClass("active"); //Remove any "active" class 
      $(this).addClass("active"); //Add "active" class to selected tab 
      $(".tab_content").hide(); //Hide all tab content 
      var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
      $(activeTab).fadeIn(); //Fade in the active content 
      return false; //non impedisce di scrollare to Top 
     });         
    }); 
</script>

一些HTML的：

<div class="tab_content content" id="tab2"> 
    <div class="images_grid"> <!-- images_grid_collezione --> 
     <!-- Riga 1 --> 
     <a href="imgs_grid/Rosso_01.png" rel="lightbox[medardo_rosso]"><img class="grid_img" src="imgs_grid/Rosso_01.png" alt="" /></a> 
     <a href="imgs_grid/Rosso_02.png" rel="lightbox[medardo_rosso]"><img class="grid_img" src="imgs_grid/Rosso_02.png" alt="" /></a>

我上傳的臨時目錄here的網站。

來源

2012-08-23 Andrea Vaccarella

廣場<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 在頭

來源

2012-08-23 09:08:20 Sowmya

謝謝，但這樣的選項卡導航打破（不知道爲什麼說實話） –

問題的第一行是要包括jquery在那些依靠jQuery的最後和其他庫之前，jQuery的。訂單是否有問題包括它在開始，你應該很好

<script type="text/javascript" src="js/prototype.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script type="text/javascript" src="js/lightbox.js"></script> 
<script type="text/javascript"> 
     if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='js/jquery-1.8.0.min.js' type='text/javascript'%3E%3C/script%3E")); } 
</script> 
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

來源

2012-08-23 09:10:23

謝謝你的回答，但仍然燈箱不工作.. –

@AndreaVaccarella你有JavaScript的錯誤該頁面嘗試先刪除它們 –

我解決了它通過使用jQuery noConflict模式。長篇小說：原型簡短符號「$」與jQuery短符號「$」相沖突。

在腳本的開頭添加「jQuery.noConflic（）」，並將「$」替換爲「jQuery」或簡單地添加一個變量（我使用「j」）。

$j(document).ready(function() { $j(".tab_content").hide(); //Some Other actions ...

問題solved.Thanks大家的幫助！ :)

來源

2012-08-23 21:25:18

燈箱+ jQuery衝突

回答

相關問題