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.
精彩评论