WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

closed as off-topic by kaiser Sep 22 '14 at 19:24

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

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! – magicspacekiwi Jun 13 '13 at 14:47
It's working. Thanks! – Sparky Jun 13 '13 at 19:33

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

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() {
                plugins_url( 'fix-ng-ajax-loader.js' , __FILE__ ),

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

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