SOLVED: MaxiGallery/Jquery Cycle Conflict?

Hello there,

I have done my usual searching around the forums but can’t seem to find anything that pertains to my situation. I am using the Jquery Cycle plugin for a banner on my website http://www.jacknutapparel.com/modx. This seems to work successfully on every page, except for pages that use maxigallery. I have tested this in multiple browsers and multiple computers and receive the same result. I have multiple pages using the exact same template, one with maxigallery, and one without, and there is only this issue with maxigallery. I really am fond of both maxigallery and jquery cycle! Is there any way to get them to "play nice" together? Also, I have played with a variety of cached and uncached scenarios with no success. Thank you in advance for any suggestions.

Sincerely!
-Jared

What type of display do you use with MaxiGallery? Maybe it uses a JS file which breaks with jQeury.

Maybe you have to replace the MaxiGallery template with a jQuery version

You probably need to add
jQuery.noConflict();

http://docs.jquery.com/Using_jQuery_with_Other_Libraries
http://docs.jquery.com/Core/jQuery.noConflict

Quote from: ganeshXL at Nov 18, 2008, 03:56 AM

You probably need to add
jQuery.noConflict();

http://docs.jquery.com/Using_jQuery_with_Other_Libraries
http://docs.jquery.com/Core/jQuery.noConflict

Nice one! didn’t know about that one

Yes, if you are using embedded maxigallery modes, they use either scriptaculous+prototype or mootools. If you have jQuery on the page too, they will collide.

You can fix it by either using jQuery in no conflict mode like ganeshXL said or change maxigallery display mode. There is also instructions on how to use thickbox display mode in MaxiGallery. If I recall correctly, Thickbox uses jQuery, so you’ll be fine with that (if you are using lightbox type of embed mode). If you are using SmoothGallery and want to use it, then only option is to go with the jQuery in noConflict mode, but then you have to modify all jQuery code to work in no conflict way.

Thank you everyone for your quick replies. I did attempt to run jquery in ’no conflict’ mode, but didn’t seem to have success with it. I’m working on going the thickbox route instead, and have ran into a little issue. The banner works perfectly now with the thickbox solution, however, my pictures seem to have disappeared. I can see the pagination and it is showing the correct number of pages, it is just not showing the images. Do I need to change something in my snippet call to make this work? Thanks again!

-Jared

EDIT: Quick note to add...I can see the images when I use the manage images function, so they still appear to be present and linked correctly.

About the jQuery noConflict, a few things I have learned through countless hours trying to make jQuery code works with prototype  in Magento

1. It’s not the Prototype but Scriptaculous causing the conflict - if you use latest version of jQuery (1.2.6), you must also upgrade the Scriptaculous to the latest version (v1.8.1 I think), otherwise you have to down version the jQuery to v1.2.3.

2. This one I am not certain whether it’s Magento specific issus because all JS codes are wrapped in the proxy.php.
Anyhow, I am mentioning it here just in case.
2a: jQuery script(s) must place after the prototype/scriptaculous scripts (not the noConflict code but the links of those scripts)
2b: even so, some jQuery plugin still won’t work. The best and seems to be a guarantee way is to place the "jQuery.noConflict();" at the end of jquery.1.2.6.js

Then in your template, you use something lik this :
                        jQuery(document).ready(function(){
        jQuery("#tab > ul").tabs({ fx: { opacity: "toggle" } });
      });

Quote from: chinesedream at Nov 18, 2008, 02:23 PM

About the jQuery noConflict, a few things I have learned through countless hours trying to make jQuery code works with prototype  in Magento

1. It’s not the Prototype but Scriptaculous causing the conflict - if you use latest version of jQuery (1.2.6), you must also upgrade the Scriptaculous to the latest version (v1.8.1 I think), otherwise you have to down version the jQuery to v1.2.3.

2. This one I am not certain whether it’s Magento specific issus because all JS codes are wrapped in the proxy.php.
Anyhow, I am mentioning it here just in case.
2a: jQuery script(s) must place after the prototype/scriptaculous scripts (not the noConflict code but the links of those scripts)
2b: even so, some jQuery plugin still won’t work. The best and seems to be a guarantee way is to place the "jQuery.noConflict();" at the end of jquery.1.2.6.js

Then in your template, you use something lik this :
                        jQuery(document).ready(function(){
        jQuery("#tab > ul").tabs({ fx: { opacity: "toggle" } });
      });

Thanks for your input on this. Whilst waiting for some advice with the thickbox integration I attempted to upgrade scriptalicious hoping that it may be a quick fix. Unfortunately, it didn’t do anything magical like I had hoped . I also tried adding jQuery.noConflict(); to the end of my jquery.js file and that didn’t do the magic I hoped for either. Then again...If I go this route, does that mean I would need to replace the "$" with "jQuery" on all of my code. If that is the case, then I didn’t do that, so maybe that was my issue.

Going the thickbox route seems to have put me a step in the right direction. Just can’t seem to get the images to show now. It may have something to do with my snippet call though. I’m not sure what to use for "display" and "embedtype" now...

Thanks again for everyones input! It is greatly appreciated!

-Jared

UPDATE: After adding "jQuery.noConflict();" to my file AND changing all of my jquery code from "$" to "jQuery", everything seems to function! I was a little bit leery about going this route at first since for some reason I assumed the whole "noConflict" thing would cripple jquery as opposed to simply changing an operator. Everyones help has been greatly appreciated! Thank you again!

-Jared

@jtech

Thanks for the tip...Been going crazy trying to make it all work, and your solution worked awesome...

thanx a lot. this helps even for ajaxsearch with other onload jquery elements. thumb up!