jQuery conflict with multiple libraries?

Question

Link to website

I am sure that the conflict is between my pageslide and image slider..

Here is the code for the page slide:

<ul>
    <li>
        <a href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })" class="first">Slide to the right, and load content from a secondary page.</a>
    </li>

    <li>
        <a href="javascript:$.pageslide({ direction: 'left', href: '/template/_secondary.html' })" class="second">Open the page programatically.</a>
    </li>
</ul>
<script>
var jq171 = jQuery.noConflict();
</script>
<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script>
    /* Default pageslide, moves to the right */
    $(".first").pageslide({ direction: "right"});

    /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
    $(".second").pageslide({ direction: "left"});
</script>`

Here is the image slider: This code references two jQuery libraries - v1.5.1 & orbit-1.2.3

<div class="container" style="margin-top:20px; margin-left:10px;">
    <div id="featured"> 
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
    </div>

For a minute a I had them both working together, but i'm not sure what is causing the conflict. I have tried the no conflict script in different variations.. Let me know if you need any more information to help. Thanks!

Answer 1

The code will work sometimes and not others because of variances in the speed that the library script loads. Sometimes, it loads fast enough to be in place when you start using it, sometimes not. That's why you should put your initial code in a ready block:

<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script type="text/javascript">
    var jq171 = jQuery.noConflict();
    jq171.ready(function ($) {
        /* Default pageslide, moves to the right */
        $(".first").pageslide({ direction: "right"});

        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
        $(".second").pageslide({ direction: "left"});
    });
</script>

Also, I urge you to reconsider using two libraries on the same page, or even the same site. One is enough!

Documentation

• jQuery ready - http://api.jquery.com/ready/

Answer 2

use noConflict after loading jQuery and use it instead of $():

var jq171 = jQuery.noConflict();
jq171(document).ready(function () {
   jq171(".first").pageslide({ direction: "right"});
   // ....
})

Answer 3

Run your jQuery in a ready state passing the $ variable.

Use only one jQuery library, preferably the latest and from a CDN.

jQuery.noConflict();
jQuery.ready(function ($) {
    /* Default pageslide, moves to the right */
    $(".first").pageslide({ direction: "right"});

    /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
    $(".second").pageslide({ direction: "left"});
});

// Outside the ready state $ calls the other library.

Answer 4

You have three different versions of jQuery loading. Forget juggling them with noConflict, there's just no reason to load three versions.