javascript - Revolution Slider 和 PrettyPhoto 中的 jQuery 冲突

Question

所以我尝试在这里同时使用 Revolution Slider 和 PrettyPhoto - http://vgoford.com/index3.html

但是他们的 jQuery 可能存在冲突。 PrettyPhoto 拒绝工作。知道可能是什么问题吗？

这是它们的代码 -

<!-- Revolution Slider -->
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.revolution.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/fullwidth.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/revolution-settings.css" media="screen" />

<script type="text/javascript">

            var tpj=jQuery;
            tpj.noConflict();

            tpj(document).ready(function() {

            if (tpj.fn.cssOriginal!=undefined)
    tpj.fn.css = tpj.fn.cssOriginal;

    tpj('.fullwidthbanner').revolution(
    {
    delay:9000,
    startwidth:890,
    startheight:450,

    onHoverStop:"on",        // Stop Banner Timet at Hover on Slide on/off

    thumbWidth:100,        // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
    thumbHeight:50,
    thumbAmount:3,

    hideThumbs:200,
    navigationType:"bullet",        //bullet, thumb, none, both     (No Shadow in Fullwidth Version !)
    navigationArrows:"verticalcentered",        //nexttobullets, verticalcentered, none
    navigationStyle:"round",                //round,square,navbar

    touchenabled:"on",        // Enable Swipe Function : on/off

    navOffsetHorizontal:0,
    navOffsetVertical:20,

    stopAtSlide:-1,        // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
    stopAfterLoops:-1,        // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic

    fullWidth:"on",

    shadow:0        //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)

    });

        });
        </script>

<!-- /Revolution Slider -->

和

    <!-- PrettyPhoto -->
    <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
    $("area[rel^='prettyPhoto']").prettyPhoto();

    $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',theme:'pp_default',slideshow:4000, opacity: 0.50, deeplinking: false, overlay_gallery: false, autoplay_slideshow: false});

});
    </script>
    <!-- /PrettyPhoto -->

Answer 1

我相信问题出在这里:

var tpj=jQuery;
tpj.noConflict();

如果您要使用noConflict，那么您必须确保它是一致的，因为它将应用于整个 jQuery。

在我通常做过的几乎所有情况下:

$('selector') // normal way
jQuery('selector') // safe way

var $js = jQuery.noConflict(); // safe way
$j('selector')

另一个好的选择是:

(function($) { 
    // document.ready code can go here
    // $('selector').hide(); for example
})(jQuery);

希望这有帮助!