Thumbnail Viewer - changing the 'Loading' font

[Franco50]

1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem: I'm using this handy viewer on a few websites now but am frustrated with one small issue. Is there any way I can change the font in the "Loading" graphic? All of mine seem to default to Times New Roman but the samples on the DD page http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm appear to be in Verdana, which I would prefer for my sites. I have looked in the CSS file but can't see anything there that changes this. It's no big deal if it cannot be altered but being fussy I'd like the font to match that used on the rest of my sites!

[Nile]

I think its the default font to the page, for example on DD, there fonts are defaulted to arial, verdana... etc. Try making the body font arial, verdana.... etc.
I hope this helps,
Nile

[Franco50]

Thanks for the reply Nile but I don't think that is the answer. Here is a link to a site I have created and the webpages are in Verdana but click on a thumbnail and the "Loading" text comes up in Times New Roman.

http://www.prodetailing.co.uk/gallery_auditt.htm

[Nile]

Find the highlighted in your code:

var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div

/////////////No need to edit beyond here/////////////////////////

scrollbarwidth: 16,
opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"

createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
},

And change it to this:

document.write('<div id="thumbLoading" style="font-family: arial, verdana">'+this.defineLoading+'</div>')

[Franco50]

Thanks a lot Nile. I'm at work just now so won't be able to fully test the change until I get home. Just one other question - is there a parameter I can also put in that line to control the size of font? I made your change to a version of Thumbnailviewer I have on my PC at work and it certainly seems to have changed to Arial/Verdana but the size of font is bigger than I'd like.

[rangana]

Basing on Nile's changes, add highlighted:

document.write('<div id="thumbLoading" style="font-family: arial, verdana;font-size:10pt;">'+this.defineLoading+'</div>')

[Franco50]

Thanks a lot - that seems to have done the trick.