jquery - 两个jquery脚本冲突

Question

我在向我的网站添加灯箱脚本时遇到了麻烦，这是因为我正在使用本教程 http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/ 中的代码在我的网站的开头，因此它在进入网站时加载动画，但是`

$(document).ready(function(){

    // Calling our splashScreen plugin and
    // passing an array with images to be shown

    $('#promoIMG').splashScreen({
        textLayers : [
            'img/thinner.png',
            'img/more_elegant.png',
            'img/our_new.png'
        ]
    });
});

上面的代码取消了我从此处找到的灯箱脚本中使用的任何内容:http://leandrovieira.com/projects/jquery/lightbox/#

如何让两者协同工作？

我将它们添加到我的标题中，如下所示(在 WordPress 中):

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Javascript/jquery.splashscreen.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Javascript/script.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/Javascript/lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/Javascript/lightbox/css/jquery.lightbox-0.5.css" media="screen" />

    <script type="text/javascript">

    $(function() {
        $('#sidebar-menu a').lightBox();
    });
    </script>

任何建议都可以!

Answer 1

您应该向启动屏幕插件添加一个回调，以在完成后初始化灯箱。

回调应该在关闭spash的点击事件上执行

 splashScreen.click(function(){
    console.log('click event');
    splashScreen.fadeOut('slow', function(){
        console.log('callback 1');
        if(settings.finished != null) settings.finished();
    });    
});

然后在创建对象时传递回调

$('#promoIMG').splashScreen({
    textLayers : [
        'img/thinner.png',
        'img/more_elegant.png',
        'img/our_new.png'
    ],
    finished: function(){
         console.log('callback 2');
         $('#sidebar-menu a').lightBox();                 
    }
});

编辑添加condole.log以查看实际到达的代码。