Question

OK so I have a WordPress site. It uses quite a few jQuery scripts and jQuery is loaded in the pages’ headers. I have a small block of code that should simple add a class to image links. I have placed this at the bottom of the document, just before the </body> tag.

<script type="text/javascript">
$.noConflict();
$(document).ready(function () {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>

The script does not work and Firebug is giving me a $ is undefined error. I have checked various similar other question and the answers do not seem to help.

The source page is here: http://sergedenimes.com/2013/01/bruno-bisang-30-years-of-polaroids/

I’m sure it is another plugin causing a conflict but I would appreciate any guidance on how to solve this.

Edit: Wow thanks for the very rapid response. Seems it was an earlier plugin rendering $ undefined. Replacing with jQuery has solved.

Answer 1

$.noConflict(); makes the $ symbol go back to it’s previous definition before jQuery was loaded. If there were no other libraries using that symbol, then it goes back to undefined. That is its purpose.

If you’re going to use that and not define any other symbol as a shortcut for jQuery, then you must use jQuery as the symbol for jQuery functions instead of $.

Do this instead:

<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function () {
    jQuery('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>

or, if you’re only trying to use $ inside the .ready() handler, then you can assign it using a feature of .ready() like this:

<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function ($) {
    $('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>

or if you have code that isn’t just in the .ready() handler that wants to use $, you can redefine $ in a closure which lets other libraries use $ in their own code, but you can use it for jQuery in your jQuery code inside the closure:

<script type="text/javascript">
$.noConflict();
(function($) {
    $(document).ready(function () {
        $('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
    });
    $.each(whatever...)
})(jQuery);
</script>

or, you can define a new shortcut symbol for jQuery:

<script type="text/javascript">
var $$ = $.noConflict();
$$(document).ready(function () {
    $$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').addClass('zoom');
});
</script>