Prototype & Javascript Conflict with ILightbox

Question

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!

why would you expect different solution than `noConflict`, is what it is intended for. If it's not working, show how you are implementing it — charlietfl, Nov 18 '13 at 17:06
That makes sense.. thank you. I have it implemented as such: — Brian Schroeter, Nov 18 '13 at 17:15
Hope you don't mind but I removed the tag `prototype` because prototype: http://stackoverflow.com/a/16063711/1641941 isn't the same as as prototypejs and it has nothing to do with this particular question. As for your question: try using the console in Chrome or Firefox and see if you have any errors. In Chrome press F12 and firefox press control + shift + k. — HMR, Nov 18 '13 at 17:15
Hey there, HMR. No problem at all -- and thank you for the suggestion. — Brian Schroeter, Nov 18 '13 at 17:22

score 0 · Accepted Answer · answered Nov 18 '13 at 17:22

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

Prototype & Javascript Conflict with ILightbox

1 Answers1