JQuery的Lightbox不會啓動

我使用ASP.NET MVC 3. 我有一個子頁面，它繼承了一個加載jQuery Lightbox腳本的母版頁，用於在彈出窗口上顯示圖像。我遵循here的例子。圖像加載正確（我可以從該網站的示例中看到縮略圖），但是當我點擊其中一個圖像時，我會被重定向到僅包含該圖像的頁面，並且不會顯示彈出窗口。腳本（來自jquery，jquery.lightbox，所需的CSS）全部正確加載（我使用Firebug進行調試，並且可以在頁面源頭查看它們）。JQuery的Lightbox不會啓動

我該如何獲得彈出效果？（我也添加了在包含照片庫$('#gallery a').lightBox();的div上應用lightbox的功能，就像在示例中一樣，但stil沒有任何功能）。

EDIT

從主頁的示例代碼：

script src="<%=Html.Resolve("/Content/MediaHelpers/js/jquery.js") %>" type="text/javascript"></script>

「類型=」文本/ JavaScript的」字符集= 「UTF-8」>

「類型=」文本/ CSS的「媒體=」屏幕「/>

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#Item_StartDate").datepicker(); 
     $("#Item_EndDate").datepicker(); 
     $("#Item_CheckInDate").datepicker(); 
     $("#Item_CheckOutDate").datepicker(); 
     $("#Item_DepartTime").datepicker(); 
     $("#Item_ArrivalTime").datepicker(); 
     $("#Item_PickUpDate").datepicker(); 
     $("#Item_DropOffDate").datepicker(); 
     $('#gallery a').lightBox(); 
    });

Html.Resolve運行良好，因爲我可以在運行網站時看到它們加載到網頁上。

的子頁面已經從收藏例子正好代碼：

<div id="gallery"> 
<ul> 
    <li> 
     <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();"> 
      <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> 
     </a> 
    </li> 
    <li> 
     <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> 
      <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> 
     </a> 
    </li> 
    <li> 
     <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> 
      <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> 
     </a> 
    </li> 
    <li> 
     <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> 
      <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> 
     </a> 
    </li> 
    <li> 
     <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();"> 
      <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> 
     </a> 
    </li> 
</ul>

在此先感謝，塔馬斯

來源

2011-12-14 Tamas Ionut

你初始化上的document.ready燈箱？沒有一個樣本很難「猜測」，但也許你在DOM準備好之前（在項目在頁面上之前）初始化燈箱。因此沒有任何東西正在初始化。 – 2011-12-14 20:56:06

我已經添加了來自網頁的代碼示例。 – 2011-12-14 21:05:52

你的HTML標記看起來是這樣的：

HTML：

<div id="gallery"> 
     <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar."> 
      <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> 
     </a> 
     <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar."> 
      <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> 
     </a> 
     <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar."> 
      <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> 
     </a> 
     <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar."> 
      <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> 
     </a> 
     <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar."> 
      <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> 
     </a> 
</div>

文件準備JS：

$('#gallery a').lightBox();

工作實例HERE

來源

2011-12-14 21:20:44

JQuery的Lightbox不會啓動

回答

相關問題