Image Thumbnail viewer old - new?

[Juto]

1) Script Title: Image Thumbnail viewer

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

3) Describe problem:

First a thank you to DD for great scripts, I like them a lot! :)

Then, I have two questions:

1) How do I alter the code, so that the image title is placed on the same line as the text CLOSE X, and not in the image area?
2) My site is multilingual, is it possible to have an attribute set like closetxt="text_string" and get that displayed? (text_string relevant to users language)

3) Also I have found an old version of Image Thumbnail viewer, using that javascript 'as is' it works. However that code is full of errors (found by using LINT), so I corrected the code to the attached. Then it displays the image correctly but the 'close function' do not. I have to refresh the page to close it.

<!--
/**********************************************************************
* Image Thumbnail viewer- © Dynamic Drive (www.dynamicdrive.com)
* Last updated Sept 26th, 03'. This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
**********************************************************************/

/**********************************************************************
For useage with OsCommerce contribution "POP-UPs MASSAGEed"
http://forums.oscommerce.com/index.php?showtopic=255954
**********************************************************************/
var ie=document.all;
var ns6=document.getElementById&&!document.all;

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body; }

function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage;
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop);
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2;
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2;
if (window.opera && window.innerHeight){ //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2;
vertpos=Math.max(pgyoffset, vertpos);
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX;
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY;
}
crossobj.style.left=horzpos+"px";
crossobj.style.top=vertpos+"px";
var altquery = document.getElementById("prodImage").alt;

/* Layer original
crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close Window [x] &nbsp;</span> </div><img src="'+which+'" onClick="closepreview();">';
*/

/* IN USE */
/* Layer for colored top bar - includes Product Name and a close [X} in right corner */
crossobj.innerHTML='<div id="dragbar"><table width="'+(imgwidth+2)+'" ><tr><td><span id="closetext" onClick="closepreview()">'+altquery+'</span></td><td align="center"><span id="closetext" onClick="closepreview()">[X]</span></td></tr></table></div><span><img id="alt" class="displayed" src="'+which+'" onClick="closepreview();"></span>';


/* Layer no corner images, centered "close" text
crossobj.innerHTML='<div id="dragbar"><table width="'+imgwidth+'" border="0" cellpadding="0" cellspacing="0"><tr><td width="15"></td><td align="center"><span id="closetext" onClick="closepreview()">Close Window [x] &nbsp;</span></td><td width="15"></td></tr></table></div><img src="'+which+'" onClick="closepreview();">';
*/

/* Layer for 3-D top-bar - customize with your own corner/background images
crossobj.innerHTML='<div id="dragbar"><table width="'+imgwidth+'" border="0" cellpadding="0" cellspacing="0"><tr><td width="15"><img src="images/infobox/corner_left.jpg"></td><td align="center" background="images/infobox/infoboxbgnw.jpg"><span id="closetext" onClick="closepreview()">Close Window [x] &nbsp;</span></td><td width="15"><img src="images/infobox/corner_right.jpg"></td></tr></table></div><img src="'+which+'" onClick="closepreview();">';
*/

crossobj.style.visibility="visible";
return false;
}
else {//if NOT IE 4+ or NS 6+, simply display image in full browser window
return true;
}

function closepreview(){
document.getElementById('closetext').style.visibility="hidden"
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px";
crossobj.style.top=tempy+event.clientY-offsety+"px";
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px";
crossobj.style.top=tempy+e.clientY-offsety+"px";
}
return false;
}

function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX;
offsety=ie? event.clientY : e.clientY;

tempx=parseInt(crossobj.style.left);
tempy=parseInt(crossobj.style.top);

dragapproved=true;
document.onmousemove=drag_drop;
}
}

document.onmousedown=initializedrag;
document.onmouseup=new Function("dragapproved=false");
}
}
//-->


My site is www.ji-fashion.com

Once again thank you for all nice scripts DD!

Kind Regards
Sara J.

[jscheuer1]

This function:


function closepreview(){
document.getElementById('closetext').style.visibility="hidden";
}

should be:


function closepreview(){
document.getElementById('showimage').style.visibility="hidden";
}

And (the way the code is currently written) needs to be in the global scope. Put it here:


/**********************************************************************
For useage with OsCommerce contribution "POP-UPs MASSAGEed"
http://forums.oscommerce.com/index.php?showtopic=255954
**********************************************************************/
var ie=document.all;
var ns6=document.getElementById&&!document.all;

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body; }

function closepreview(){
document.getElementById('showimage').style.visibility="hidden";
}

function enlarge(whi . . .

There could also be other problems. I'd suggest updating to the current version.