Assuming that's how you have them installed, it could work. The first suggestion I would have though is to make sure you can get Lightbox 2.04 working on its own, on a page with no other script. It's a complicated script with numerous support files. Once you're sure you have that working, set up the page like so (I've changed the first line of the animated menu script and added a line in front of that, both of those lines highlighted):
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function randomize(min, max) {
if (!min)
min = 0;
if (!max)
max = 1;
return Math.floor(Math.random()*(max+1)+min);
}
function randomBg() {
var bgs = new Array();
bgs.push("backgrounds/01.jpg");
bgs.push("backgrounds/02.jpg");
bgs.push("backgrounds/03.jpg");
bgs.push("backgrounds/04.jpg");
bgs.push("backgrounds/05.jpg");
bgs.push("backgrounds/06.jpg");
bgs.push("backgrounds/07.jpg");
bgs.push("backgrounds/08.jpg");
bgs.push("backgrounds/09.jpg");
bgs.push("backgrounds/10.jpg");
bgs.push("backgrounds/11.jpg");
bgs.push("backgrounds/12.jpg");
bgs.push("backgrounds/13.jpg");
document.body.style.backgroundImage = "url(" + bgs[randomize(0, bgs.length-1)] + ")";
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
/*
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body onload="randomBg();">
</body>
</html>
The order of the scripts is important. Put any additional styles before the first script. Fill in the title tag as desired. Put whatever markup is required in the body.
If you want more help, put up a live demo somewhere I can have a look at it.
Lightbox 2.04 and another script(s)
Reply With Quote
Originally Posted by thephotographer
Bookmarks