JQueryのライトボックスは起動しません

Question

私はASP.NET MVC 3で動作します。 ポップアップで画像を表示するためのjQueryライトボックススクリプトを読み込むマスターページを継承する子ページがあります。私はhereの例に従っています。 イメージが正しくロードされています（そのサイトの例のようにサムネイルが表示されます）。その1つをクリックすると、そのイメージのみのページにリダイレクトされ、ポップアップは表示されません。 スクリプト（jquery、jquery.lightbox、cssが必要）がすべて正しくロードされています（私はFirebugでデバッグし、ページソースの頭に表示されます）。

ポップアップ効果を得るにはどうすればよいですか？ （私は、例のようにフォトギャラリー$('#gallery a').lightBox();を含むdivにライトボックスを適用する機能を追加しましたが、何もしません）。

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は、サイトを実行しているときにそれらがWebページにロードされているのがわかります。

子ページは、ライトボックスの例から、正確にコードがあります。事前に

<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> 

おかげで、 タマス

Answer 1

は、あなたの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