Lightbox-2 plugin conflict with Jquery tools

  • I’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
    https://flowplayer.org/tools/index.html

    And the lightbox effect via the lightbox-2 plugin (i’ve installed the plugin)

    https://www.ads-software.com/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="https://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

  • The topic ‘Lightbox-2 plugin conflict with Jquery tools’ is closed to new replies.