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.

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...

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.

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();

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.

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);

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.

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.

commented: Nice find. +4

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.