1

所以我在这里尝试同时使用 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 -->
4

2 回答 2

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

希望这可以帮助！

于 2013-06-06T18:29:34.433 回答
0

尝试在页面中按顺序修改文件，如下所示：

  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  <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>
  <script type="text/javascript" src="js/jquery.prettyPhoto.js"  charset="utf-8"></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" language="javascript">

       // Revolution Slider
        jQuery(document).ready(function() {
        if (jQuery.fn.cssOriginal!=undefined)
            jQuery.fn.css = jQuery.fn.cssOriginal;
            jQuery('.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,.... 
            stopAfterLoops:-1,        // Stop Timer if All slides has been played "x" times. ....
            fullWidth:"on",         
            shadow:0        //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)           
            });                 

            // PrettyPhoto
            jQuery(document).ready(function(){
               jQuery("area[rel^='prettyPhoto']").prettyPhoto();
               jQuery(".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>
于 2013-07-25T16:51:26.643 回答