3

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" 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>

Any suggestions will do!

Improve this question

1 Answer 1

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Nothing happend, i added the first code to my splash.js file between lines 34 - 38 but still nothing and added the bottom part to my script.js file? am i missing something?
I've tried running your code above but i'm not good with js/jquery nor know how to check it for errors.
in chrome or safari: ctrl + shift + j then all console.log should show up in the console tab.
Thank you all for the helpful comments, I was able to solve my problem by replacing $(document).ready(function() with jQuery(document).ready(function() and conflict issue solved.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.