kennethjaysoneI'm creating a site that i'd like to integrate the lightbox effect and also some UI functionality that Jquery tools have to offer
What i need is the (Scrollable and Tabs) functionality from Jquery tools
http://flowplayer.org/tools/index.html
And the lightbox effect via the lightbox-2 plugin (i've installed the plugin)
http://wordpress.org/extend/plugins/lightbox-2/
They both work..but i have a problem..they don't work together (i'm assuming scripts conflict)
This is my header.php file
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/style.css" type="text/css" />
<meta charset="UTF-8" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="header">
<div class="innerwrap">
<h1 id="logo">
<a href="<?php bloginfo('url'); ?>" title="Lahir Auto">
Lahir Auto
</a>
</h1>
<div id="search">
<form method="get" id="searchForm" action="<?php bloginfo('url'); ?>">
<input type="text" value="search" id="s" name="s" />
<input type="submit" value="Search" id="searchSubmit" />
</form>
</div><!-- end of #search div -->
</div><!-- end of .innerwrap div -->
</div><!-- end of #header div -->
<div id="nav">
<div class="innerwrap">
<ul>
<?php wp_list_pages('exclude=2,8&title_li='); ?>
<?php wp_list_categories('exclude=1&title_li=&hide_empty=0'); ?>
<?php wp_list_pages('exclude=4&sort_column=menu_order&title_li=') ?>
</ul>
</div><!-- end of .innerwrap div -->
</div><!-- end of #nav div -->And this is my footer.php file
<div id="footer">
<div id="primaryFooter">
<h5>Copyright</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla congue tempus purus, non molestie libero accumsan quis.
Donec leo odio, faucibus ut semper vel, fermentum vel leo.
</p>
<h5>Terms of Usage</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla congue tempus purus, non molestie libero accumsan quis.
Donec leo odio, faucibus ut semper vel, fermentum vel leo.
</p>
</div><!-- end of #primaryFooter -->
<div id="secondaryFooter">
<h5>Talk to us</h5>
<p>No 310, Jalan E2/6, Taman Ehsan, Kepong, 52100 Kuala Lumpur.</p>
<p>Phone: +603 5555 5555</p>
<p>Fax: +603 5555 5556</p>
<img src="<?php echo bloginfo('template_directory'); ?>/img/social/facebook.png" alt="facebook" />
<img src="<?php echo bloginfo('template_directory'); ?>/img/social/twitter.png" alt="twitter" />
<img src="<?php echo bloginfo('template_directory'); ?>/img/social/email.png" alt="email" />
</div><!-- end of #secondaryFooter -->
</div><!-- end of #footer div -->
<?php wp_footer(); ?>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
// initialize scrollable
$('.scrollable').scrollable({speed: 500, size: 1, clickable: false, interval: 5000, loop: true})
$("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>If i remove the jquerytools script in the footer, only then the lightbox-2 effect works. If i don't remove jquery tools from the footer.php, Jquery will work fine, but lightbox-2 won't work.
How can i fix this? Any advise is greatly appreciated
