Question

如果我没有用正确的术语解释这一点，我会事先通知我，我正在学习主要是C＃知识。我有3套jQuery代码prettyPhoto，Nivo Image滑块和jQuery UI Tabs。我在同一页面上为图像和视频使用了prettyPhoto。

我的Nivo Image Slider和我的UI标签都运行良好，但我不能为我的生活，让prettyPhoto工作。我已经搜索了论坛等，并尝试过，

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

2）我也尝试过使用jquery.noConflict（）;代码以几种不同的方式运气。

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

在我的主页Master的头标记中，

<%--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（与我正在使用的其他库相同）。在文档中只使用了1个库并应用了上述文件后，它就可以了。

jquery prettyPhoto冲突

1 个答案: