By baronmunchowsen on

Hi,

I'm trying to get a slideshow which uses the mootools library working in my drupal theme.

I know that there is a conflict between jQuery and other libraries that use $(...., and can see from searching these forums that there are workarounds and solutions, mostly using jQuery.noConflict(); and rewriting various .js files.

Trouble is I've tried, and can't get it working. Can anyone write a comprehensive step-by-step guide to help me and others out?

I've read this post: http://drupal.org/node/121631 - but it doesn't go far enough for me to get my head round (see my comment: http://drupal.org/node/121631#comment-255409).

Can anyone help?

⋅ Categories: Drupal 5.x

Comments

mfer’s picture

mfer commented

You might want to consider using a jquery slideshow instead of the mootools one. You remove the conflicts in that case and have less overhead on your site. An existing one you may want to look at is http://jquery.com/plugins/project/cycle.

To deal with other libraries read this: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

--
Matt
http://www.mattfarina.com

baronmunchowsen’s picture

baronmunchowsen commented

Thanks for that Matt,

Looks like a nice light-weight slide show.

The one I was looking at had extra functionality that allows the user to see a drop-down thumbnail menu, captions, and arrows to each side to allow user-controlled scrolling (http://smoothgallery.jondesign.net/showcase/timed-image-switcher/)

This will definitely come in handy though, and I will use it to fall back on if all else fails and will certainly come in handy for other projects.

Many thanks for pointing this out and your help.

kourge’s picture

kourge commented

First, replace the jquery.js that Drupal ships with. You need the latest version. Next, open jquery.js, and add this line at the end:
jQuery.noConflict();
Then, get the jQuery compat 1.0 plugin, open the .js file, and paste it into the jquery.js you've just modified, after jQuery.noConflict(), so it'll look like this in order:

[latest jquery code]
[noConflict]
[compat 1.0]

After this, do the js rewrites, and it should work.

baronmunchowsen’s picture

baronmunchowsen commented

Hi,

Thanks for this - just the step-by-step I needed. I'm sure others will find this post useful.

What is the jQuery compat 1.0 plugin and where do I get it?

Is this the one:

http://dev.jquery.com/browser/trunk/plugins/compat-1.0

Thanks in advance!

baronmunchowsen’s picture

baronmunchowsen commented

I followed your steps to a tee.

1) Update to latest jquery code
2) add noConflict after the latest jquery code in the jquery.js file
3) add the compat 1.0 code after the noConflict code in the the jquery.js

For the .js rewrites I opened up every .js file in the /misc/ directory and replaced every instance of $( with $jQuery(

I know it's not working because the collapsible fields on my admin/build/modules page are no longer collapsible.

Any ideas? Thanks!

------------------------------------ EDIT -----------------------------------------------------

Actually, 50% there I'd say. The mootools gallery is working now - which wasn't happening before. However, I've lost the collapsible jQuery functionality at least.

Thanks

kourge’s picture

kourge commented

Yes, the compat you found is right.
Don't replace $ with jQuery or $jQuery.
Instead, open up every .js file, and at the beginning, insert this:
(function($){
And at the end, append this:
})(jQuery);
So you're basically wrapping the old js files with a snippet:

(function($){
// original content
})(jQuery);
baronmunchowsen’s picture

baronmunchowsen commented

Okay - still no collapsing, text-area resizing or autocompleting.

Let's go over the steps again. I really appreciate all your help with this

1) Download latest jQuery
2) Add noConflict line below
3) Add compat text below
-------------------------------
Open all .js files in /misc/ directory
4) At the top of the file place (function($){
5) At the bottom put })(jQuery);

so for instance my "update.js" file looks like:

// $Id: update.js,v 1.10 2006/12/27 14:11:45 unconed Exp $

(function($){
if (Drupal.jsEnabled) {
  $(document).ready(function() {

          ...

      // Success: redirect to the summary.

         ...

      // Failure: point out error message and provide link to the summary.

         ...

      $(holder).append(progress.element);
      progress.startMonitoring('update.php?op=do_update', 0);
    });
  });
}
})(jQuery);

and the files I'm doing this to are:

  • autocomplete.js
  • collapse.js
  • drupal.js
  • progress.js
  • tableselect.js
  • textarea.js
  • update.js
  • upload.js

Does this sound like I'm doing everything right?

Many thanks,

prezaeis’s picture

prezaeis commented

any luck with this?
im having the same prob, did all the abv but no luck

Fiasst’s picture

Fiasst commented

I've managed to get this working after 1 day solid guess-working..

I followed the steps show above and it finally works. However using FireBug I can see theres multiple errors coming from the 'compat 1' script and the collapsible fieldsets will expand and some collapse but only once. Plus, the transition slide effect is very rough. But for now, its a fix!

Thanks for your help!

I hope Drupal sees this as a problem and fixes it soon.

thinkingman’s picture

thinkingman commented

Well guys, after reading the above very carefully, I managed to complete this process - completely error-free (so far!). Here are the steps I took:

  1. Use Drupal 5 - it just seems to Work Better™
  2. Install jQuery Update module and update jquery.js in /misc
  3. Add jQuery.noConflict(); ...below existing (in my case, now updated) jquery.js file
  4. Download jQuery compat, paste file contents below the noConflict() line I added above
  5. Important! I left this step out yesterday: comment out the last "upgrade" in the pasted-in compat code: /* jQuery.fn._filter (snip) arr.join(",") : arr ); } */
  6. Used my Mac text editor to find all .js files in the Drupal installation, and replace all instances of the GREP pattern [$]\s*\( with jQuery(
  7. ...do so for any new .js files that get installed when you install your modules
  8. ...and if you have a development team working for ya, check your changes into your CVS-type system so your programmers don't freak out!

So far, life is very good, and all my stuff works as advertised!

http://thinkingman.com

prezaeis’s picture

prezaeis commented

still not working
do i have to make these modifications to every single .js file in my whole sit or just the ones in the misc folder?
im installing frontpage slide show which uses mootools, do i edit the .js files in the slideshow folder too? including mootools.js ?

this is really confusing, do u reckon u could upload ur completed .js files so i can download them?
would really appreciate it, iv done exactly as mentioned above but still not working :(

prezaeis’s picture

prezaeis commented

anyone? :(

syngi’s picture

syngi commented

With a minor adjustment it did work for me.

Only step 5 seems to be different, I think it's due to a newer version...
Just remove the last lines in the jquery.js file you just extended. Remove these three lines:

jQuery.fn.filter = function(arr){
return this._filter( arr.constructor == Array ? arr.join(",") : arr );
};

and in addition to replacing all occurences of $( with jQuery(, also replace just $ with jQuery on the code 'var farb = jQuery.farbtastic('#placeholder');' in drupal/modules/color/color.js

Bobuido’s picture

Bobuido commented

Seen this script / technique a lot on the web lately - I found the SmoothGallery Site today

Saw this thread with all your problems but thought I'd install it anyway

Got SG2.0 and it seems to be working fine - Are the problems resolved in the later version of Drupal 5 and SG2.0 ?

Or is it an accident waiting to happen? :) Info would be appreciated

Thanks

Current (Main) Project: http://www.wii-view.co.uk

andrew.eatherington@gmail.com’s picture

andrew.eatherington@gmail.com commented

Mootools not working with 6 but other js okay. Applied the method above with the upgrade and the wrapping of core js files. All seems to be working okay now - with mootools - but views and other nice Drupal UI features are not.

fortis’s picture

fortis commented

а ты всё пропатчивай ;) нормуль будет =)))