Question

I need to modify a javascript file which I’m currently using to display images (it’s a standard lightbox JS). This is the part of the script that I need to modify:

settings : function() {
    var t = this, s = shutterSettings;

    t.imageCount = s.imageCount || 0;
    t.msgLoading = s.msgLoading || 'L O A D I N G';
    t.msgClose = s.msgClose || 'Click to Close';
},

Basically I need to replace the word ‘LOADING’ in the script with a loading-bar gif. Could someone point me in the right direction (link to a tutorial, manual etc.) on how to do this? I tried to replace the word with an <img> or <div> tag but that didn’t worked.

Answer 1

You need to make this replacement inside the lightbox plugin, not in its settings.

The msgLoading is very likely considered to be given as a string and the string received is set as the text of a div, p or span element.

If you post a link to the lighbox plugin’s js file or tell us the name of the plugin or the site where you downloaded it, maybe I can give you a more precise answer. The fact that it’s a standard lightbox JS is not exactly helpful

[edit]So it seems you are using Shutter Reloaded for NextGEN Gallery
If you look inside the plugin’s js file (here, in your case), you will see that the innerHTML is set, so using an img should work.

loading : function() {
        var t = this, S, WB, W;
        if ( (W = t.I('shWrap')) && W.style.visibility == 'visible' ) return;
        if ( ! (S = t.I('shShutter')) ) return;
        if ( t.I('shWaitBar') ) return;
        WB = document.createElement('div');
        WB.setAttribute('id','shWaitBar');
        WB.style.top = t.Top + 'px';
        WB.style.marginTop =(t.pgHeight/2) + 'px'
        WB.innerHTML = t.msgLoading;
        S.appendChild(WB);
    },

Try with these settings:

var shutterSettings = {"msgLoading":"<img src=\"http://redflexmedia.com/loading.gif\">","msgClose":"Click to Close","imageCount":"1"};

[edit]The code above must be placed inside the HTML file, in the head section, NOT the plugin.

That means you must replace this part

<script type='text/javascript'>
/* <![CDATA[ */
var shutterSettings = {"msgLoading":"<img src=\"http://redflexmedia.com/loading.gif\">","msgClose":"Click to Close","imageCount":"1"};
/* ]]> */
</script>

with

<script type='text/javascript'>
/* <![CDATA[ */
var shutterSettings = {"msgLoading":"L O A D I N G","msgClose":"Click to Close","imageCount":"1"};
/* ]]> */
</script>