jQuery noConflict

JavaScript
1

Hey,

I am having trouble in having both lightbox and a Query tooltip text to work…

On this page:

http://freemanholland.com/babies/freebaby/

You can see a list of products, where the user can click on the image and it will lightbox.

However at the top of the page, where you can see the “New to Freebaby”, you can rollover that and it should bring up a nice red tooltip text effect which it was doing before but is not now…

I know i need to use jQuery NoConflict but i don’t know how and where to use it…

Can anyone help?

Thanks

2

hi everyone,

I have been trying all day making mootools work with jquery. But not successful.

I have added the ‘no conflict’ code (

jQuery.noConflict();

) but changed my custom code function. Still don’t work.

I have a feeling that my custom code has not been changed properly.
The original code is this:

<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 3000 );
});


</script>

and I have changed it to this:

<script type="text/javascript">
jQuery(function($) {
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 3000 );
})

});

Can someone verify that I have changed it right way?
Not very technical and good with javascript.
please any suggestions?

thanks

3

Thanks,

I found a jQuery Alternative and it works perfectly.

Thanks again

4

If you are using jQuery in the page then your best option for a lightbox is to use one of the JQuery ones that are available rather than one from elsewhere that might conflict.

5

@billy_111

I know i need to use jQuery NoConflict but i don’t know how and where to use it…

jQuery.noConflict() serves one single purpose: to revert control of the global “$” variable so that another library (usually either Prototype.js or MooTools) can use it…

in your demo page, i don’t see any other libraries being used. is this correct? if you aren’t using another library that claims the “$” variable for itself, you don’t need to use jQuery.noConflict()…

in regards to how to use it, here is a quick example:

<script src="path/to/jquery.js"></script>
<script>
// At this point, "$" is a shortcut to "jQuery"

// Remove "$" alias (from here on, you need to 
// use "jQuery" instead of "$"
jQuery.noConflict();

// OR... you can re-assign it to a new shortcut.
// NOTE: noConflict() returns the global "jQuery"
var $j = jQuery.noConflict();
$j("#someId").css("someStyle", "someValue");

</script>

hope that helps.

6

Sorry,

If you look at this page now:

http://freemanholland.com/babies/freebaby/

And view source, you will notice the Lightbox libraries a the top…

You will now notice that the Rollover effect works, and the lightbox on the product images does not work…?

Any ideas?

7

I have tried doing this:


     <script type="text/javascript">  
     $.noConflict();
	 $(document).ready(function() {  
.
.
.
.

But it does not work, what am i doing wrong?