jquery prettyPhoto冲突

Question

我提前道歉，如果我没有用正确的术语解释这一点，我主要是在用C#知识快速学习。我有3套jQuery代码prettyPhoto，Nivo图像滑块和jQuery用户界面标签。我在同一页上使用prettyPhoto处理图像和视频。

我的Nivo Image Slider和UI标签都工作得很好，但我就是不能让prettyPhoto正常工作。我搜索过论坛等，并尝试过，

1)这可能是因为我使用了多个库，因此我切换到只使用jquery库(我现在所在的位置)。

2)我也尝试过以几种不同的方式使用jquery.noConflict()；代码，但没有成功。

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

在我的主页主页的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>

我的内容母版页的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>

提前感谢您的帮助。

Answer 1

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

对于那些有这个问题的人来说，上面的方法不能解决你的问题，请注意，我之前使用的是LightBox和VideoBox，它们不能一起运行，因为它们使用的是不同的库。

我用prettyPhoto替换了LightBox和VideoBox，后者使用了jquery (与我使用的其他库相同)。一旦在文档中只使用了一个库，并且应用了上面的库，它就可以工作了。