Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a third party plugin that I'm using for a photo gallery (NextGen). However, with my black background, the loader gif animation looks pretty bad. I found a better loader gif and replaced the one from the plugin. I already know this is not ideal because the next update of the plugin will overwrite my custom gif.

The gif is located at: /wp-content/plugins/nextgen-gallery/images/loader.gif

Is there a clever way to leverage my child theme's functions.php file to tell this plugin to use a different URL for the gif?

As far as using my child theme's CSS to override, that would be easiest if it was a viable option. However, the loader's URL is not coming from the plugin's CSS file.

share|improve this question
add comment

2 Answers 2

up vote 3 down vote accepted

Use a rewrite rule in your .htaccess:

RewriteRule ^path-to-images/ajax-loader\.gif /path-to-replacement.gif [L]

Make sure to set this above the WordPress rules.

share|improve this answer
    
Man, now it feels like I over-complicated it. Great solution! –  XIROXAS Jun 13 '13 at 14:47
    
It's working. Thanks! –  Sparky Jun 13 '13 at 19:33
add comment

Just from browsing through that plugin's source code (assuming you're talking about this one), it doesn't look like there's an easy way to do this using CSS. I found that it creates the loader dynamically with jQuery (excerpt below).

loadingImage = jQuery(document.createElement("img")).attr("src", ngg_ajax.path + "images/ajax-loader.gif").attr("alt", ngg_ajax.loading);

The problem is, they didn't give it an ID or anything of that sort so this is going to have to be done via JavaScript, not CSS. We would only be able to hide the current loader via CSS like this:

img[src*="ajax-loader.gif"] {
    display: none;
}

Here is the JavaScript that you will need to run to do the job:

jQuery("img[src$='ajax-loader.gif']").attr('src', 'http://your-new-image-url-here');

Then replace your-new-image-url-here with, you know, your image URL.

If you want to package it as an independent plugin (which isn't a bad idea, by the way), here's how to do it.

First, create a file called, say fix-ng-ajax-loader.php Then, one called fix-ng-ajax-loader.js

Dump the jQuery snippet I gave you just above into the JS file.

Now, dump this in the PHP file

<?php
/*
Plugin Name: Fix NG AJAX Loader
Plugin URI: http://colincampbell.se/
Description: Fixes the NextGEN Gallery AJAX Loader
Version: 1.0
Author: Colin Campbell
Author URI: http://colincampbell.se/
License: GPL2
*/

if ( ! class_exists( 'Fix_NG_Loader' ) ) {
    class Fix_NG_Loader {
        public function __construct() {
            add_action( 'wp_enqueue_scripts', array( &$this, 'enqueue_scripts' ) );
        }
        public function enqueue_scripts() {
            wp_enqueue_script(
                'fix-ng-ajax-loader',
                plugins_url( 'fix-ng-ajax-loader.js' , __FILE__ ),
                array('jquery')
            );
        }
    }
}

function fix_ng_loader_run() {
    $Fix_NG_Loader = new Fix_NG_Loader();
}

// This will make sure that the other plugin has already loaded
add_action( 'plugins_loaded', 'fix_ng_loader_run', 99 );
?>

Now, put these in a folder called fix-ng-ajax-loader and upload that to your wp-content/plugins directory and you should be good to go.

share|improve this answer
    
Thank-you for the effort. It was a good learning experience even though the URL rewrite is the way I went with this. –  Sparky Jun 13 '13 at 19:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.