Search code examples
javascriptjquerymagentoprototypejs

Prototype & Javascript Conflict with ILightbox

I have a lightbox that I'm trying to use and it's not been working in our Magento store. I finally traced the issue back to Prototype -- once I remove Prototype, it works of course. So, other than putting jQuery into no-conflict mode (which I've done), or removing Prototype from Magento (which I can't), I'm wondering what can be done.

The URL for the demo is here.

Thanks!

Solution

  • Since whole problem stems from prototype.js controlling $ alias, don't use $ to initalize noConflict use jQuery

    jQuery.noConflict();

    A simple wrapper you can use to allow using $ in your jQuery code is:

    (function($){
    /* $ is jQuery inside this wrapper*/
    $(function(){
         $('#someDiv').doSomething()
     })

 })(jQuery);

    There are sevral other methods of implementation

    jQuery.noConflict() docs