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的click事件上执行回调

 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以查看实际到达的代码。

两个jquery脚本冲突

1 个答案: