Forum Moderators: open
I have a thumbnail gallery - I want the pictures to be enlarged to the exact size of the picture and also located in the top left of the screen...
Any help would be appreciated!
Cheers!
have a look at this working example....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>thumbs to div</title><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<base href="http://coothead.homestead.com/files/"/>
<style type="text/css">
/*<![CDATA[*/
body {
background:url('bodyBg.jpg') #003;
}
div {
position:absolute;
top:10px;
left:10px;
width:60px;
border:solid 1px #000;
background:#eef;
}
div img {
width:50px;
height:50px;
border:solid 1px #000;
margin:3px;
}
#display {
position:absolute;
top:10px;
left:200px;
border:inset 6px #5c5c98;
display:none;
}
/*//]]>*/
</style><script type="text/javascript">
//<![CDATA[function showImage(w,h,image) {
var obj=document.getElementById("display").style;
obj.display="block";
obj.width=w+"px";
obj.height=h+"px"
obj.background="url("+image+")";}
//]]>
</script></head>
<body><div id="display"></div>
<div>
<a href="javascript:void(showImage(400,432,'dog.jpg'))"><img src="dog.jpg" alt=""/></a>
<a href="javascript:void(showImage(360,280,'banana.jpg'))"><img src="banana.jpg" alt=""/></a>
<a href="javascript:void(showImage(200,200,'aaa.jpg'))"><img src="aaa.jpg" alt=""/></a>
<a href="javascript:void(showImage(445,238,'ten_quid.JPG'))"><img src="ten_quid.JPG" alt=""/></a>
<a href="javascript:void(showImage(360,280,'apple.jpg'))"><img src="apple.jpg" alt=""/></a>
<a href="javascript:void(showImage(347,201,'girl.jpg'))"><img src="girl.jpg" alt=""/></a>
<a href="javascript:void(showImage(640,400,'clouds.jpg'))"><img src="clouds.jpg" alt=""/></a>
<a href="javascript:void(showImage(740,514,'grap.JPG'))"><img src="grap.JPG" alt=""/></a>
</div></body>
</html>
birdbrain
1) Bandwidth hogging, since all images are downloaded, rather than being downloaded as and when.
2) Possibly dodgy appearace of thumbnails. Images don't usually look good when displayed at the incorrect dimensions.
?
3)?
Well...
of course, what you forgot to mention to our friend Bowdii is
that, if javascript is disabled, then all that he will have on his
page will be just a load of silly little images. ;)
birdbrain
We know the solution:
<a href="dog.jpg"><img src="dog.jpg" onclick="showImage(400,432,'dog.jpg');return false;" alt=""/></a>
..but if they are silly, they will remain so.
Bowdii, did you intend for the full-size images to fill up the current window or open in a new one?
The sizing thing is easily cured by running a Photoshop action or using ImageMagick to reduce them down, then
<a href="fullsizeimages/dog.jpg"><img src="thumbnails/dog.jpg" onclick="showImage(400,432,'fullsizeimages/dog.jpg');return false;" alt=""/></a>
Move them into directories.
Bernard/BB is there a particular reason no size is specified for the thumbnails and there is for the enlargements? Technically, you wouldn't even have to pass the w and h if the image is "full size."
Anyway, another easy solution, in case you DO want your images in a new window:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Window Thumbnails</title>
</head>
<body>
<a href="images/largeImage.jpg"
onClick="newWin('','images/largeImage.jpg','Large Image Window Title',280,400);
return false;"><img src="images/thumbnail_image.jpg" width="100" height="100" border="0"
alt="Large Image Title" /></a><br />
<a href="images/largeImage.jpg"
onClick="newWin('','images/largeImage.jpg','Large Image Window Title',280,400);
return false;">Text Only Link</a>
<script type="text/javascript">
function newWin(url,img,title,w,h) {
if (! (url) &&! (img)) { return; }
var day,id,ww,wh,params,baseHeight,win;
// This insures the images always open in a NEW window
//instead of populating one that's left open.
day= new Date();
id = day.getTime();
// Pad it a bit for scrollbars if passing an image size
ww = (url)?w:w+75;
wh = (url)?h:h+125;
// In case you really **don't** have all the bases covered, allow scroll and resize
params = 'width='+ww+',height='+wh+',scrollbars,resizable';
// Have you ever had windows falling off the bottom of the screen?
// Remember how mad you were. Never assume you know how many toolbars will be on
// if you're inside the window or what resolution is "best" if you're out.
if (screen.height) { baseHeight = screen.height; }
if (! baseHeight > 0 ) { baseHeight= 600; }
wh = (wh>baseHeight)?baseHeight:wh;
// if passing an image, write a doc
if (url=='') {
msg='<html><head><title>'+img+'<\/title>\n'+
'<style type="text\/css">\n'+
'html,body,div { font-family:Arial,Helvetica,Sans-Serif; }\n'+
'<\/style><\/head><body><div align="center"><h3>'+title+'<\/h3>\n'+
'<img src="'+img+'" width="'+w+'" height="'+h+'" border="0" ALT="'+title+'">\n'+
'<hr width="100%" size="1"><form action="" onSubmit="return false;">\n'+
'<input type="submit" onClick="javascript:window.close();" value="Close Window">\n'+
'<hr width="100%" size="1"><\/form><\/div><\/body><\/html>\n';
win = open('',id,params);
// Upper left, as requested
win.moveTo(0,0);
win.document.write(msg);
win.document.close();
}
else { win = open(url,id,params); win.moveTo(0,0); }
}
</script>
</body>
</html>
This works for images OR urls:
<a href="http://www.example.com"
onClick="newWin(http://www.example.com','','Large Image Window Title',280,400);
return false;">http://www.example.com</a>
Thank you everyone for their input! Much appreciated:D
I am inplementing now, and I will let you know if I have any more questions.
Cheers!
