Making Featured Content Gallery work with jQuery and jQuery Powered Plugins

While I was working on my next generation of Simple Realty Theme for WordPress, I tried using Featured Content Gallery plugin and got really frustrated with it, since I couldn't get it to work. I spent almost half of a day trying to debug JavaScript errors and even after I got it fixed, it still wouldn't work.

The Featured Content Gallery (FCG) is powered by Mootools library, and the developers of the FCG mentioned it numerous times that the plugin will not work with jQuery libraries and will conflict with other plugins that are using jQuery. The plugin is quite popular, and their support forum is filled with exactly the same issues, which are mostly based on this particular conflict. The biggest problem for FCG is that the jQuery by default activated in WordPress, and most of the Admin functionality is powered by it, so there is no way it can be turned off just for the sakes of this plugin. If you ask me, the FCG developers should spend some time figuring this out and making it work correctly with the default libraries of WP like jQuery, especially, if "hack" like me can do it.

My Problem #1 with FCG: Nothing Appears but Black Border/Frame

The instructions below (may) apply only if you followed the original FCG installations and setup instructions, and you have at least 2 featured pages/posts with required attributes (articleimg etc.).

jQuery documentation states that in order to avoid jQuery conflict with other JS libraries we need to use jQuery.noConlict(); function. All it does is overwriting the "$" function that is widely used by other JS libraries as a shortcut to their own name, as well as by jQuery itself.

So, here is what we need to do:

1. Make sure that jQuery library loads before the other (non jQuery) libraries.
2. Insert the jQuery.noConflict(); after the main jQuery library is loaded, but before the other (non jQuery) libraries. In my case, when I viewed the source code of my WP pages, the jQuery.noConflict() was already loaded, so I didn't have to do it manually. But, the mootools libraries of the FCG plugin were loaded before the jQuery.noConflict(); and we need to move it below. In order to achieve that:
   • I placed the following function, in the functions.php of my theme, to remove the FCG JS libraries from loading the way they were originally programmed:
     

     function remove_featured_gallery_scripts() {
            remove_action('wp_head', 'gallery_styles');
     }
     
     add_action('init','remove_featured_gallery_scripts', 1);

   • Then I added this function to load the FCG JS scripts last in general script loading order:

     function addscripts_featured_gallery() {
     	if(!function_exists(gallery_styles)) return;
     	gallery_styles();
     }
     add_action('wp_head', 'addscripts_featured_gallery', 12);

   • Make sure that after inserting those function you clear your browser's cache and refresh you page.

Again, the order of our JS libraries should be the following:

1. jQuery.
2. jQuery.noConflict(); function.
3. All other JS scripts and libraries including non-jQuery ones.

After applying the code above, suddenly my black border/frame turned into a black rectangle. Mouse hover/click behaviors were working and I even could see the titles of my featured content, but not images. That was my Problem #2.

My Problem #2 with FCG: It Works! But images do not appear :(

I looked at the source code of my pages and noticed that the actual code for the featured content gallery was loading, and the post titles were printed out just fine, but instead of the images, all there was is <img src="" alt="" /class="full" /> and <img src="" alt="" /class="thumbnail" />. After testing out different variables in the gallery.php, from the plugin's folder, I found out that the $post->ID was not returning any values. So, I replaced them with get_the_ID() function, and everything started to work as it should.

The Outcome

After applying all of the above, the Featured Content Gallery is working just fine on my test site with jQuery libraries, as well as other plugins that were marked as conflicting in the FCG support forums. Here are the plugins that I'm using and are function correctly with the FCG plugins:

• NextGen Gallery
• Great Real Estate
• Thickbox

Hope this helps and good luck! ;)