jquery prettyPhoto 冲突答案

【问题标题】：jquery prettyPhoto conflictjquery prettyPhoto 冲突
【发布时间】：2012-04-11 09:37:50
【问题描述】：

如果我没有用正确的术语解释这一点，我提前道歉，我主要是在学习 C# 知识。我有 3 组 jQuery 代码 prettyPhoto、Nivo Image 滑块和 jQuery UI 选项卡。我对同一页面上的图像和视频都使用了 prettyPhoto。

我的 Nivo Image Slider 和 UI 选项卡都可以正常工作，但我一辈子都无法让 prettyPhoto 正常工作。我搜索了论坛等，并尝试过，

1) 可能是因为我使用了多个库，因此我转而只使用 jquery 库（我现在所在的位置）。

2) 我也尝试过使用 jquery.noConflict();以几种不同的方式编写代码，但没有运气。

目前我认为这可能是由于使用了多个版本的 jquery，但老实说，我对如何解决它有点过头了。我的代码如下，

在我的主页Master的head标签中，

<%--PretyBox (media viewer)--%>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">var $jq161 = jQuery.noConflict();</script>
<link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"></script>

<script type="text/javascript">
    $jq161(document).ready(function () {
        $("a[rel^='prettyPhoto']").prettyPhoto(); // Select all links that contain prettyPhoto in the attribute rel
        //$('a.prettyPhoto').prettyPhoto(); // Select all links with prettyPhoto class
        //$('a').prettyPhoto(); // Select all links in the page
        //$('#gallerythumbnails a').prettyPhoto(); // Select all links in object with gallery ID
        //$('#gallerythumbnails a').width(400);
    });
</script>

<%--Nivo Image Slider--%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">var $jq142 = jQuery.noConflict();</script>
<link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
    $jq142(window).load(function () {
        $('#slider').nivoSlider({
            pauseTime: 6000, // How long each slide will show
            directionNav: false, // Next & Prev navigation
            controlNav: false, // 1,2,3... navigation
            effect: 'fold' // Specify sets like: 'fold,fade,sliceDown'
        });
    });
</script>

我的 Content Master 页面的 head 标签中的代码，

    <%--PretyPhoto (media viewer)--%>
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">var $jq161 = jQuery.noConflict();</script>
    <link href="Styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="Scripts/jquery.prettyPhoto.js" type="text/javascript"></script>

    <script type="text/javascript">
        $jq161(document).ready(function () {
            $("a[rel^='prettyPhoto']").prettyPhoto(); // Select all links that contain prettyPhoto in the attribute rel
            //$('a.prettyPhoto').prettyPhoto(); // Select all links with prettyPhoto class
            //$('a').prettyPhoto(); // Select all links in the page
            //$('#gallerythumbnails a').prettyPhoto(); // Select all links in object with gallery ID
            //$('#gallerythumbnails a').width(400);
        });
    </script>

    <%--UI Tabs--%>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">var $jq142 = jQuery.noConflict();</script>
    <script src="Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <link href="Styles/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $jq142(function () {
            $("#tabs").tabs();
            $("#subtabs-1").tabs();
            $("#subtabs-2").tabs();
            $("#subtabs-3").tabs();
            $("#subtabs-4").tabs();

            var $tabs = $('#tabs').tabs();

            $('.to-stonetab').click(function () {
                $tabs.tabs('select', 0);
                return false;
            });

            $('.to-quarrytab').click(function () {
                $tabs.tabs('select', 1);
                return false;
            });

            $('.to-valuetab').click(function () {
                $tabs.tabs('select', 2);
                return false;
            });

            $('.to-faqtab').click(function () {
                $tabs.tabs('select', 3);
                return false;
            });
        });
    </script>

还有一个HTML引用的例子，

<a href='<%#DataBinder.Eval(Container.DataItem, "PageLink") %>' rel="prettyPhoto">
                            <img src='Images/<%#DataBinder.Eval(Container.DataItem, "Image") %>' alt='<%#DataBinder.Eval(Container.DataItem, "AltTag") %>' />
</a>

提前感谢您的帮助。

【问题讨论】：

包含多个（和所有过时的）jQuery 版本的原因是什么？
没有比我关注这些使用教程的特殊原因（在我知道多个版本可能会导致冲突之前）。我现在已经修改了这个，它现在正在工作。没有下一个/上一个按钮，但我相信我可以对此进行排序。干杯！！

标签： jquery jquery-ui prettyphoto

【解决方案1】：

更新：通过删除 jquery 的多个版本并替换为当前版本 (jquery-1.7.2.min.js) 解决了该问题。

对于那些遇到上述问题并不能解决您的问题的人，请注意我之前使用的是 LightBox 和 VideoBox，因为它们使用了不同的库，所以它们不能一起运行。

我用使用 jquery 的 prettyPhoto 替换了 LightBox 和 VideoBox（与我使用的其他库相同）。一旦文档中只使用了 1 个库并应用了上述内容，它就可以工作了。

【讨论】：