Question

I’m using the JQuery tools slider along side another auto-scrolling plugin. Being that I am very new to Javascript I do not know how to properly solve the conflict between the plugins’ respective libraries.

It is to my understanding I need to provide a local definition for “$” within the Slider script, or perhaps I should do it for the auto-scrolling plugin as the JQuery slider uses, what I imagine to be, a broader definition for “$”

All insight is appreciated. Again, I am very, VERY new to Javascript so pardon my ignorance. One day I imagine I will bridge the gap from copy-paste programmer to a real programmer.

Here is the script for the JQuery Tools Slider

<script>
    var api = $("#scroll").scrollable({ items: '#tools' }).navigator().data("scrollable");
    api.onBeforeSeek(function(e, i) {
    if (i) {$("#intro").fadeOut("slow");
        if ($.browser.msie && $.browser.version < 8) {
             $("#intro").hide();
        }
        // otherwise show the intro
        } else {
            $("#intro").fadeIn(1000);
        }

        // toggle activity for the intro thumbnail
        $("#t0").toggleClass("active", i == 0);
    });


    $("#t0").click(function() {                        
        $("#scroll").scrollable().begin();
    });
</script>

Answer 1

Here’s the basic idea around loading two versions of jQuery (usually a bad idea) and defining a scope where the $ variable is the relevant version of jQuery:

<!-- load jQuery 1.7.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var jQuery_1_7_2 = $.noConflict(true);
</script>

<!-- load jQuery 1.8.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>

<script type="text/javascript">
// self executing function that defines $ to be jQuery 1.7.2 in its scope
(function($) {
    var jQuery = $;
    // $ and jQuery in here is 1.7.2
})(jQuery_1_7_2);

// self executing function that defines $ to be jQuery 1.8.2 in its scope
(function($) {
    var jQuery = $;
    // $ and jQuery in here is 1.8.2
})(jQuery_1_8_2);
</script>