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“＆gt;

“type =”text / css“media =”screen“/＆gt;

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

提前致谢，的Tamas

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>

Doc Ready JS：

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

工作示例HERE

JQuery Lightbox不会开火

1 个答案: