PDA

View Full Version : Open thumbnail image in new window



iantrader
Nov 10th, 2005, 01:36 PM
Hi All,
First I have to appologise for being a total javascript dummy.

I'd like to open a thumbnail image in a new window with the following requirements:

1. The window must resize automatically to the size of the full-size image.

2. The image should have a small border spaced evenly around it.

3. Opening another thumbnail will automatically reuse the existing window.

I've looked on the web for a script to so this but failed miserably. I did find a few scripts but couldn't get them to work. Probably me. However, my level of ability makes it difficult to experiment with a script other than altering anything that looks like a parameter.

A guy gave me the following script which sort of works except it opens a small window first before resizing it for the graphic which is a bit inelegant - I may be a dummy but I appreciate elegance :) and it looks a bit clunky. But apart from that, sometimes clicking on the thumbnail only opens the small window and it doesn't resize. Sometimes opening the same image again or opening another image will make the window work correctly. This 'fault' seems to vary from one machine to another.

I'm not sure if it's the code or the way I've implemented it.

Anyway, if anyone could point me to some code that does the job correctly or convert this I'd be extrmemely grateful.

Ian

<SCRIPT LANGUAGE="Javascript">
<!--
function openWindow(imageName,alt) {
var w = window.open("","newWindow","width=800,height=800");
w.document.open();
var t="";
t+='<HTML>\n<TITLE>'+alt+'</TITLE>\n';
t+='<HEAD>';
t+='<SCRIPT LANGUAGE="Javascript">\n';
t+='\<!--\n';
t+='function enlarge() {\n';
t+=' var pic=new Image;\n';
t+=' pic.src="'+imageName+'";\n';
t+=' var wd=pic.width+50;\n';
t+=' var ht=pic.height+80;\n';
t+=' document.getElementById("foo").src=pic.src;\n';
t+=' window.resizeTo(wd,ht);\n';
t+='}\n';
t+='\/\/-->\n';
t+='<\/SCRIPT>\n';
t+='</HEAD>\n';
t+='<BODY onLoad="enlarge();" style="margin:20 30 30 20">\n';
t+='<IMG ID="foo" ALT="'+alt+'">\n';
t+='</BODY>\n</HTML>\n';
w.document.write(t)
w.document.close();
w.focus();
}
//-->
</SCRIPT>


<P><A onclick='openWindow("BigImage.jpg","Big Image Text");return false' href="#"><IMG title="Big image mouse-over text. (click to enlarge - opens new window)" alt="click to enlarge" src="Thumbnail.jpg" border=0></A>&nbsp;</P>


*********

Kor
Nov 10th, 2005, 05:04 PM
I might offer you other type of application, DOM based, which opens a "window-alike" layer instead of a pop-up to show the big pictures when click on thumbnails


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var rel='';//relative urle of the big pictures folder, if any, ex: images/
//the main DIV (container) attributes
var acont =[];
acont[0]=['left','300px'];
acont[1]=['right','50px'];
acont[2]=['border','1px solid #000000'];
acont[3]=['position','absolute'];
acont[4]=['visibility','hidden'];
acont[5]=['background','#e5e5e5'];
//the span attributes
var aspa=[];
aspa[0]=['fontFamily','Verdana, Arial, Helvetica, sans-serif'];
aspa[1]=['fontSize','16px'];
aspa[2]=['fontWeight','bold'];
aspa[3]=['color','#003366'];
aspa[4]=['background','#cccccc'];
aspa[5]=['cursor','pointer'];
//the image's div attributes
var adiv =[];
adiv[0]=['padding','4px'];
//creates the main "window-like" layer
function create(){
var root=document.getElementsByTagName('body')[0];
var oCont=setEl('div');
setAt(oCont,[['align','right'],['id','container']]);
setAt(oCont,acont,'css');
var oSpa = setEl('span');
oSpa.appendChild(document.createTextNode('X'));
setAt(oSpa,aspa,'css');
oSpa.onclick=function(){this.parentNode.style.visibility='hidden'}
oCont.appendChild(oSpa)
var oDiv = setEl('div');
setAt(oDiv,adiv,'css')
var oImg = setEl('img');
oDiv.appendChild(oImg);
oCont.appendChild(oDiv)
root.appendChild(oCont);
}
function setEl(ele){//creates elements
this.obj =document.createElement(ele);
return this.obj
}
function setAt(obj,att,css){//sets attributes
for(var i=0;i<att.length;i++){
if(css){obj.style[att[i][0]]=att[i][1];}
else{obj.setAttribute(att[i][0],att[i][1])}
}
return
}
function showBig(h){//show the layer
var url=h.split('/')[h.split('/').length-1];
var con =document.getElementById('container');
con.getElementsByTagName('img')[0].setAttribute('src',rel+url);
var pad = (adiv[0])?parseInt(adiv[0][1])*2:0;
//try till the image is loaded
while(parseInt(con.style.width)!=(con.getElementsByTagName('img')[0].offsetWidth+pad)){
con.style.width=(con.getElementsByTagName('img')[0].offsetWidth+pad)+'px';
}
con.style.visibility='visible';
}

onload=create;
</script>

</head>
<body>
<a href="big_00.jpg" onclick="showBig(this.href);return false"><img src="00.jpg" border="0"></a>
<br>
<br>
<a href="big_01.jpg" onclick="showBig(this.href);return false"><img src="01.jpg" border="0"></a>
</body>
</html>

iantrader
Nov 10th, 2005, 10:28 PM
Very kind, Kor, but I'm afraid you'll have to tell me how to insert this into a web page.

I copied & pasted the code into a web page, substituted my image files but nothing happened...

Ian

iantrader
Nov 12th, 2005, 10:32 AM
No one...?

Ian

Nischumacher
Nov 12th, 2005, 11:32 AM
this might help...
see the bold part in KOR's earlier post...


...
//relative url of the big pictures folder, if any, ex: images/
var rel='images/';
...
con.getElementsByTagName('img')[0].setAttribute('src',rel+url);
...
<a href="big_00.jpg" onclick="showBig(this.href);return false"><img src="images/00.jpg" border="0"></a>
<br>
<br>
<a href="big_01.jpg" onclick="showBig(this.href);return false"><img src="images/01.jpg" border="0"></a>

use images/ for src of the images... not for the href of the anchor...

Ancora
Nov 12th, 2005, 01:33 PM
<HTML>
<Head>
<Script type="text/javascript">

var largerView = "";
var winToggle = false;

function openFullSize(Pix,isDesc){

if (winToggle){largerView.close()}
document.getElementById('nullIMG').src = Pix;
var wStr = document.getElementById('nullIMG').width;
var offsetW = wStr;
wStr = wStr+20;
wStr = "width="+wStr;
var hStr = document.getElementById('nullIMG').height;
var offsetH = hStr;
hStr = hStr+20;
hStr = "height="+hStr;
var lStr = (screen.width-50-offsetW)/2;
lStr = "left="+lStr;
var tStr = (screen.availHeight-50-offsetH)/2;
tStr = "top="+tStr;
largerView = window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+"");
largerView.document.title = isDesc;
winToggle = true;
}

function buildSupport(){

var styleStr = "<style>.thumb{cursor:pointer;border:solid blue 2px}</style>"
var divStr = "<Div style='Position:Absolute;Top:-2000'><IMG ID='nullIMG'>&nbsp</Div>"
document.write(divStr);
document.write(styleStr);
}

buildSupport();

window.onunload=function(){

if (winToggle && !largerView.closed){largerView.close()}
}
</Script>
</Head>
<Body>
<Img Src='1/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'>
<Img Src='1/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'>
<!-- The following line must be the LAST line in the Body -->
<Script type="text/javascript"> document.getElementById('nullIMG').src = document.images[1].src </Script>
</Body>
</HTML>

inatrader:

Also, the first time you open a second image window, it assumes the size of the previous one. The whole thing needs to be automatic. I'm so dumb with javascript.


No. It doesen't. You just refuse, REFUSE, to test code AS IS. Instead, you look for ways to "get around" it.

iantrader
Nov 12th, 2005, 09:57 PM
Thanks Ancora but the code requires that you stipulate the size of the thumbnails. (I actually got around that by removing the size restrictions.) But my thumbnails are varyious sizes and I don't want to restrict them like this or have to measure them. Also, the first time you open a second image window, it assumes the size of the previous one. The whole thing needs to be automatic. I'm so dumb with javascript.

I appreciate your help. This obviously isn't the 'normal' way this sort of thing is handled. I think I may have to go to rentacoder.

Ian

iantrader
Nov 12th, 2005, 09:59 PM
this might help...
see the bold part in KOR's earlier post...

use images/ for src of the images... not for the href of the anchor...

Thanks, NS, but it's too complex for what I want.

Ian