Replace word with image in javascript file

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.

You can't replace a word with a gif. You can replace some markup with other markup that displays a gif, but t doesn't look like an element to me. — user1726343
– user1726343, Commented Oct 31, 2012 at 15:17
This change must be done inside the lightbox plugin. Can you give us a link to it? — BBog
– BBog, Commented Oct 31, 2012 at 15:22
This is the link: redflexmedia.com/portfolio/portfolio/photography Enter any gallery, click on an image and while the image is loading you will see that a big red "Loading" will appear briefly. I need to replace that word with an image. — George Grigorita
– George Grigorita, Commented Oct 31, 2012 at 15:25

BBog · Accepted Answer · 2012-10-31 16:07:19Z

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>

edited Oct 31, 2012 at 16:07

answered Oct 31, 2012 at 15:24

BBog

3,6506 gold badges35 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

George Grigorita Over a year ago

Thanks for helping! I tried but now I see the word 'undefined' instead of the image.

BBog Over a year ago

Did you put the settings in the html file? You should use it there, not inside the plugin. Looking at the source here redflexmedia.com/portfolio/portfolio/photography I can still see the old var settings

BBog Over a year ago

@GeorgeGrigorita I took a look at your site and caught you in the act, you were editing in the wrong place. Check the edit on my post, please

BBog Over a year ago

If you want to edit the plugin directly, you can do it like this: t.msgLoading = '<img src="http://example.com/loading.gif">'; I believe you were not escaping the quotes the first time you edited the plugin and that's why I think it didn't work

George Grigorita Over a year ago

Yes, that was the problem. Now it works and the file which outputs the shutterSettings in the final HTML is nggallery.php (for future references - if anyone has this problem). Thanks for your help, I really appreciated it!

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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';

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 31, 2012 at 15:19

Scorpio

1,1711 gold badge21 silver badges38 bronze badges

2 Comments

Scorpio Over a year ago

@George Grigorita can you plz direct us to the lightbox.js file you are using...it will help us to dig in more..

George Grigorita Over a year ago

Thanks both for helping, I'm using Shutter Reloaded for NextGEN Gallery: redflexmedia.com/portfolio/wp-content/plugins/nextgen-gallery/…

Collectives™ on Stack Overflow

Replace word with image in javascript file

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related