Nested Gallery Shortcode INTERMITTENTLY working-Collection of common programming errors

2 years ago
admin
4 minutes

Even after listening to the podcast this morning where Joel and Jeff talk about how “Fix my Code” questions are too localized to benefit the community and serve no purpose to anyone but the op, I’m going to try and answer this in a way that will be useful and beneficial to other weary WordPressors who scour the interwebs in search of a quick fix for their plugin and theme woes and leave this as a useful artifact that will hopefully be found one day and still be relevant.

When troubleshooting any error or broken functionality the first thing is to try and determine what caused it to break or stop working.

  1. Did it ever work?
  2. If yes, you have to find out what changed that broke it.
  3. Did I add a new plugin?
  4. Did I change a setting that caused it to stop working?
  5. Were any updates recently released that might of bonked things
  6. Am I using the latest version??

If it is a jQuery problem like the one mentioned by the op in the above question, you should first check if there are any conflicts or if the javascript is not loading in the right order.

jQuery plugins require that jQuery is actually loaded before the will work.

How do you check for conflicts?

You just right click and choose “Inspect Element” from the menu to get started. (By the way it’s also VERY handy for debugging CSS problems).

On the website linked and mentioned by the op here is what I found inspecting the DOM.

When the inspector comes up it shows 2 Uncaught Fatal Errors from the galleria-1.2.2.2.min file.

Copy and past your error message into Google

One of the first results is from the actual Gallaria.js documentation

This should be your fix but I always like to dig a little deeper to see if there are any other issues.

The theme and plugins running on the site linked to in the question are loading jQuery 5 times. Not the same jQuery but different versions. You have 1.2.6, 1.3.1, 1.4.2, the Google CDN version and even some versions where the license and version # were stripped out (I assume for faster loading…)

Not to mention you are combing all theses regular jQuery plugins with a whole slew of jQuery UI plugins.

Here is the listing of all the scripts that were loaded when my browser visited the linked to site in the question.

The problem, is that the browser loads jQuery then it loads an earlier version that wipes out the version before it. Then it loads a plugin that starts to work then another version of jQuery loads and wipes out anything that was already loaded. (Most users will just click the back button and not spend money with slow loading sites)

If any of your jQuery plugins use newer techniques that weren’t available in jQuery 1.2.6 they will break, and when jQuery breaks, it prohibits any other jQuery from working after the break.

So whats my next step? How do I get it working?

Most of the jQuery is being loaded from your themes library directory (is this a Theme Forest Theme or another commercial theme? If so get a refund). Check your functions.php file and header.php (I’m sure none of this is loaded with wp_enqueue_script so be on the lookout for inline tags and also lookout for wp_derigister_script

Remove every reference to jQuery and add this to your functions.php to load the WordPress version. If your theme uses any other custom scripts register them and enqueue them like so.

add_action ('get_header', 'myprefix_load_jquery');
function myprefix_load_jquery() {
      wp_enqueue_script('jquery');
      wp_register_script('custom_script',
       get_bloginfo('template_directory') . '/js/custom_script.js',
       array('name_of_script_dependencies'),
       '1.0' );
      wp_enqueue_script('custom_script');
}

Now we need to apply the fix we found searching google so add this to the end of a js file or you can use this function to output it in your footer.

add_action('wp_footer', 'myprefix_fix_galleria');
function myprefix_fix_galleria() {
     echo 'jQuery(document).ready(function($) {
     $("#gallery").galleria({
         width: 800,
         height: 500
});

});';
}

Hopefully this answer will be useful to anyone who is searching for a quick answer to fix their problem and learns how to troubleshoot and figure out why things happen they way they do.

If this fixes your problem please be so kind to come back and mark it as accepted so that when others find your question they will know that the answer given actually worked.

Originally posted 2013-11-23 09:51:42.