CODEWITHSUNDEEP
javascript
George Grigorita
George Grigorita

Reputation: 1890

Replace word with image in javascript file

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.

Upvotes: 0

Views: 395

Answers (2)

BBog
BBog

Reputation: 3650

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>

Upvotes: 1

Scorpio
Scorpio

Reputation: 1171

http://lokeshdhakar.com/projects/lightbox/ see if the 3rd point helps ...

If you would like to show the user a 'loading' graphic, like the animated progress bar in the examples above, specify its location at the top of the lightbox.js file:

var loadingImage = 'loading.gif';

Upvotes: 1

Related Questions