JQuery 灯箱不会触发

Question

我使用 ASP.NET MVC 3。 我有一个继承母版页的子页面，该母版页加载用于在弹出窗口上显示图像的 jQuery Lightbox 脚本。我遵循了 here 的示例。 图像已正确加载（我可以像在该站点的示例中一样看到缩略图），但是当我单击其中一个时，我被重定向到只有该图像的页面，并且没有出现弹出窗口。 脚本（来自 jquery、jquery.lightbox、所需的 css）都已正确加载（我使用 Firebug 进行调试，我可以在页面源代码的头部看到它们）。

我应该怎么做才能获得弹出效果？ （我还添加了在包含照片库$('#gallery a').lightBox(); 的 div 上应用灯箱的功能，就像在示例中一样，但仍然没有）。

编辑

母版页的示例代码：

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

" type="text/javascript" charset="utf-8">

" type="text/css" media="screen"/>

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

提前致谢， 塔马斯

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