Maximage plugin and prototype.js conflict

[chr.s]

Hello,

A website I'm working on requires that the Prototype framework is included, but I'm also using jQuery for some custom behaviours.

I'm using the jQuery maximage slider plugin almost successfully; the only issue is that it seems to conflict with prototype - yes, even with jQuery's noconflict used - and somehow generates many extra slides.

Please see this example for reference.

Has anyone got the vaguest notion how I can overcome this? Obviously, I'd rather not use extra client-side scripts to remove the unwanted elements after they're created.

Thanks in advance.

[riahc3]

OK, several things pop into mind

1: Does FireBug throw any errors?
2: Are you sure you are using jQuery's noconflict correctly?
3: http://forum.jquery.com/topic/noconflict-does-not-work

Lets see those three points and see if we can see something.

[riahc3]

Another thing, I you sure it is a jQuery and not a plugin coding problem?

Looking at the source:

<div id="rotate" class="mc-cycle" style="visibility: visible; position: relative; width: 821px; height: 578px; overflow: hidden;">
<div class="mc-image mc-image-n0" style="height: 578px; width: 821px; position: absolute; top: 614px; left: 0px; display: none; z-index: 41; opacity: 1;">
<img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/coalesse.jpg" style="height: 616px; width: 821px; margin-left: 0px; margin-top: -109px;">
</div>
<div class="mc-image mc-image-n1" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 821px; height: 578px; opacity: 1;">
<div class="mc-image mc-image-n2" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 821px; height: 578px; opacity: 1;">
<img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/laughing.jpg" style="height: 616px; width: 821px; margin-left: 0px; margin-top: -109px;">
</div>
<div class="mc-image mc-image-n3" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 821px; height: 578px; opacity: 1;">
<div class="mc-image mc-image-neach" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-neachSlice" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nall" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nany" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ncollect" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ndetect" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nfindAll" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nselect" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ngrep" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ninclude" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nmember" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ninGroupsOf" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ninject" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ninvoke" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nmax" style="position: absolute; top: 578px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nmin" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-npartition" style="position: absolute; top: -578px; left: 0px; display: block; z-index: 42; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-npluck" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nreject" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nsortBy" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ntoArray" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nentries" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nzip" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nsize" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ninspect" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nfind" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-n_reverse" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-n_each" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nclear" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nfirst" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nlast" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-ncompact" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nflatten" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nwithout" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nuniq" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nintersect" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
<div class="mc-image mc-image-nclone" style="position: absolute; top: 614px; left: 0px; display: none; z-index: 41; width: 364px; height: 313px; opacity: 1;">undefined</div>
</div>

Things like compact, all, findall, etc. sound more like function names than anything else...

[chr.s]

Thank you for replying!

Firstly, no errors are shown in either firebug or chrome's console.
I'm using noconflict as below:

jQuery(document).ready(function ($){
    // Code here
});

The technique in the link you posted didn't work either I'm afraid.

I'm almost certain that it's not my code that's the issue - this only started happening when I uncommented the prototype.js include from the head section. Otherwise it works perfectly.

Also - and apologies for this - the jsfiddle I posted doesn't exactly replicate the issue i have on the site. Below is what also gets outputted (nearly always about 37-38 times) with incrementing z-indexes.

<div class="mc-image undefined" title="undefined" style="background-image: url(http://www.website.co.uk/undefined); position: absolute; top: 0px; left: 0px; display: none; z-index: 1; width: 1920px; height: 1109px; opacity: 0; " data-href="undefined">undefined</div>

I've left a message and bug report with the plugin developer, but he doesn't seem particularly active recently.

Thanks again.

[riahc3]

I'm using noconflict as below

Personally I do not use the noconflict function like that and I too use Prototype and jQuery.....

I declare, in a totally diferent .js file:

$j = jQuery.noConflict();

Meaning that when ever I want to use a jQuery thing in another library/function/etc, I call $j. Example:

var somevariable = $j("#somecomboboxid").val();

[chr.s]

I tried this technique on the .js file with the plugin call and parameters, but annoyingly it made no difference. No other issues are present within any of the other 200+ jQuery lines I've written, so I'm convinced it's an issue with the plugin itself.

I just found this link, but I can't fathom how or where the "solution" is meant to be implemented.

[gon1387]

Hi chr.s,

Prototype and jQuery both uses the '$'. You have to relieve the dollar sign from jQuery for prototype and assign another identifier or use the jQuery var for jQuery operations. I can be done like this.

<script src="[PROTOTYPE_URL]" type="text/javascript"></script>
<script src="[JQUERY_URL]" type="text/javascript"></script>
<script type="text/javascript">
//Relieves the '$' identifier for prototype
jQuery.noConflict();
////////////// OR ASSIGN JQUERY TO ANOTHER VARIABLE //////////////////
// 'jQ' declared in global for accesibility
jQ = jQuery.noConflict();
</script>

if you happen to have modules, addon or plugins which depends on the '$' identifier of jquery, use the module pattern, you have to enwrap them like this:

(function($){


...[PLACE YOUR JQUERY MODULES OR PLUGINS HERE]...


})(jQuery);

[chr.s]

I just tried this method again, exactly as outlined, and - as before - it didn't fix the issue.

Please note there are no conflicts arising in any other jQuery code, so a general conflict is not the issue here.

This appears to be a problem with prototype and the maximage plugin. I'd hazard a guess it's most likely to be the plugin.

[gon1387]

hi chr.s,

I have just checked the code, and there was a bug in MaxImage, I'm currently rechecking the code and will be sending a fix to the developer.
Look at line 106 here: Max Image

//Instead of this
for(var i in $.Slides) {

//Change it to this
for(var i=0, len = $.Slides.length; i<len; i++) {

Apply the change above.

[chr.s]

You are a saviour!

I was about to start fiddling with that area of the plugin to see if I could track down the issue, but who knows how long it would've taken to get to this solution.

A thousand thankyous.