开发者

Two jquery scripts conflict

I'm having truble adding a lightbox script to my site, it's because i'm using the code from this tutorial http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/ at the start of my site, so it loads an animation upon entering the site, however `

$(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'
        ]
    });
});

The above code cancels out anything i use from the lightbox script found here: http://leandrovieira.com/projects/jquery/lightbox/#

How do I get the two to work together?

I'm adding them to my header as follows (it's within wordpress):

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="shortcut icon" hre开发者_JS百科f="<?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>

Any suggestions will do!


you should add a callback to the splash screen plugin to initialize lightbox once it's finished.

the callback should be executed on the click event which closes the spash

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

then pass the callback when creating the object

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

EDIT add the condole.log's to see what code actually gets reached.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜