Using smoothgallery embed type with jQuery

I’m not sure if this has been addressed in other threads, but I wanted to post my findings on how to use both the MooTools library that is required when using smoothgallery as the embed type in maxigallery and jQuery for any other cool DOM manipulation that is just so easy to deploy with jQuery!

Since jQuery has been designed to play nice with other libraries, I thought it was a simple matter of using jQuery in compatibility mode and all would be cool. However, this isn’t enough- it seems that when linking to the libaries in the head section of the template, the order of how the scripts are linked is critical. IF jQuery is linked before MooTools, the $ placeholder for jQuery breaks the MooTools call for smoothgallery, even if jQuery function calls use compatibility mode (I’ve used a variable in this fashion: jqDo=jQuery.noConflict(); ). So, you have to link to the MooTools library first, then link to jQuery.

• First, make sure to disable the embedding of the MooTools link automatically by maxigallery by setting adding &disable_js_libs=`1` to your maxigallery snippet call.
• In the head section of your template, add a link to the MooTools library used by smoothgallery directly, followed by the link to the jquery library, like this:
  <script type="text/javascript" src="/assets/snippets/maxigallery/smoothgallery/js/mootools.v1.11.js"></script>
  <script src="assets/js/jquery.js" type="text/javascript"></script>
• Now you can include any calls to jQuery using compatibility mode in your template, and smoothgallery will still function as it’s supposed to!

I’m using jQuery to do subtle menu animations that have a flash-like color fade effect (using the color plugin for jquery), as well as dynamically centering content on both page load and page resize if a user has a monitor with a resolution greater than 1024x768.

Here’s a link to my quick and dirty gallery page:http://gallery.inkandescence.com

Hope this helps anybody trying to mix and match javascript libraries!

Thanks for the info!

doze-

Just wondering if you know something, since you’ve knowledge of all the different gallery packages used in maxigallery-

If I wanted to load a gallery using an Ajax load into a div, how do you initialize smoothgallery so that it all the scripts are active and fire?

Thanks!

You can find the following line from maxigallery.class.inc.php what is used to initialize smoothgallery:

window.onDomReady(startGallery);

Just remove that line and call startGallery(); function in your script after ajax loading is done.

Quote from: doze at May 04, 2009, 06:07 PM

You can find the following line from maxigallery.class.inc.php what is used to initialize smoothgallery:

window.onDomReady(startGallery);

Just remove that line and call startGallery(); function in your script after ajax loading is done.

Thanks, doze- basically, what I discovered is that I had to use a blank template with basic html structure (head and body tags with content in the body tag) to be able to initialize the scripts. When I tried to hard link the smoothgallery scripts in the head of the containing page, the scripts wouldn’t fire, but when I use a template with basic html structure tags, all the links to the required javascripts and css load in the ajax loaded page and then my onComplete call (using a jquery plugin called ajaxify) to initialize the gallery works fine.

However, for some reason this blows up in Google chrome, so I’m not going to deploy this solution yet. Not sure, seems like chrome doesn’t like ajax loaded content having html structure? Worked flawlessly in other browsers, but this gets into territory that’s a bit scary since I can’t test every browser out there on all the different OS’es.

Hi Virgil,

I know this thread is a bit old already but I just wanted to know how you made smoothgallery and your other jquery calls to work together. Just to give you a background, and you may want or not to help a guy like me out, I’m only proficient in design, html and css, and not on javascript.

Questions are:
1) What maxigallery? I’ve installed Jon Design Smoothgallery and there was no maxigallery folder or file in it.
2) Where do you exactly add &disable_js_libs=`1`?
3) What do you exactly mean by "add a link to the MooTools library used by smoothgallery directly, followed by the link to the jquery library"? Below is how I installed my Smoothgallery and jquery needs in my header:

<!-- Smoothgallery -->
<script src="<?php bloginfo(’url’); ?>/wp-content/themes/gridfocus/others/smoothgallery-2.0/scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="<?php bloginfo(’url’); ?>/wp-content/themes/gridfocus/others/smoothgallery-2.0/scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php bloginfo(’url’); ?>/wp-content/themes/gridfocus/others/smoothgallery-2.0/css/jd.gallery.css" type="text/css" media="screen" />
<script src="<?php bloginfo(’url’); ?>/wp-content/themes/gridfocus/others/smoothgallery-2.0/scripts/jd.gallery.set.js" type="text/javascript"></script>



and lastly 4) when you used jquery’s compatibility mode, did you simply inserted "jQuery.noConflict();" on the jquery codes on the header? If not, how did you exactly turn jquery into it compatibility mode?

Sorry for the noob questions, because if it’s javascript, sorry to say but I am one. Hope you can. Good day!

Hi Virgil,

Sorry to have bothered you. I’ve solved my own problem finally. Just in case anybody is having the same problem, as of today, June 15, 2010, this is what I’ve done with regards to how Virgil suggested you do it:

1) I didn’t add &disable_js_libs=`1` anymore.
2) I simply placed the Smoothgallery links first before any jquery links in the header.
3) I added jQuery.noConflict(); at my jquery code at my header. This is how it looks:



For some reason I don’t understand, it worked by simply executing jQuery.noConflict(); on the jquery commands. Thanks anyway for this thread that sent me the right direction. Good day!