open / popup window dynamic size based on large image

R

ryanoasis

Have thumbnail images and clicking on image opens new window with a
different image (larger version) but each large version is a different
size and I dont want to hardcode the size of the new window to match
each larger version.

I hope that made sense.
This code works fine in IE but I have to click the thumbnail twice in
Firefox for the new window to be properly sized and three times in
safari for it to be proper size. However if I have an alert('');
before opening the new window it will size fine.

This code is definitely inefficient (because I was trying different
things to try to make it work).

function popupCenter1(strImage) {

var strImageTitleTemp = new Image();
strImageTitleTemp.lowsrc = strImage.src.replace("sm",
"").replace("SM", "").toString();
strImageTitleTemp.src = strImage.src.replace("sm", "").replace("SM",
"").toString();
var h = strImageTitleTemp.height;
var w = strImageTitleTemp.width;
var strImageTitle = new Image(w,h);
strImageTitle.src = strImageTitleTemp.src;
var strSize = "";
if(strImageTitleTemp.width < 300) {
strSize = "style='font-size: 8pt'";
}
var cW = (screen.availWidth / 2) - (w / 2);
var cH = (screen.availHeight / 2) - (h / 2);

var page="<html><head><title>Image: " + strImageTitle.alt + "</
title><link rel='stylesheet' href='css/styles.css' type='text/css'></
head><body style='background-image: none;' leftmargin='0'
rightmargin='0' topmargin='0' bottommargin='0'><div
align='center'><table border='0' cellpadding='0' cellspacing='0'
width='100%'><tr><td class='header'><img src='images/site/
left_corner_top.gif' align='top'></td><th align='left' class='header'"
+ strSize + ">Image: " + w + ' X ' + h + "</th><td class='header'
align='right'><img src='images/site/right_corner_top.gif'
align='top'></td></tr><tr><th colspan='3'><img src='" +
strImageTitle.src + "'></tr><tr><th align='left' class='header'><img
src='images/site/left_corner_bottom.gif' align='top'></th><td
class='header' " + strSize + "><a style='color: #E3E3E3;'
href='javascript:window.close();'>Close Window</a></td><td
class='header' align='right'><img src='images/site/
right_corner_bottom.gif' align='top'></td></tr></table></div></body></
html>";
alert(''); //
<-------------------------------------------------------------- Having
this allows FF to have window correct size somehow
var msgWindow = window.open('','','Width=' + (w) + ',Height=' + (h
+ 60) + ',left='+cW+',top='+cH
+'toolbar=no,menubar=no,location=no,directories=no,status=no,scrollbars=auto,resizable=no,copyhistory=no');
msgWindow.document.clear();
msgWindow.document.open();
msgWindow.document.write(page);
msgWindow.document.close();
}

Hope this formats okay.. I don't know how to do the formatting on
here. something like
Code: 
 ?

Thanks
 
S

SAM

ryanoasis a écrit :
Have thumbnail images and clicking on image opens new window with a
different image (larger version) but each large version is a different
size and I dont want to hardcode the size of the new window to match
each larger version.

I hope that made sense.
This code works fine in IE but I have to click the thumbnail twice in
Firefox for the new window to be properly sized and three times in
safari for it to be proper size. However if I have an alert('');
before opening the new window it will size fine.
Click to expand...


popup.htm
=========
<html><title>viewer</title>
<script type="text/javascript">
window.onload = function() {
document.images[0].src = self.location.toString().split('?')[1];
}
var ww = screen.width, wh = screen.height;
function newSize(myImg) {
if(myImg.src != 'empty.gif') {
var h=myImg.height+20, w=myImg.width+20;
sefl.moveTo((ww-w)/2, (wh-h)/2);
self.resizeTo(w, h);
}
}
</script><body style="margin:0">
<img src="empty.gif" onload="newSize(this)" alt="">
</html>

gallery.htm
===========
<html><title>album</title>
<script type="text/javascript">
var pop=false;
function popup(what) {
what = escape(what.href);
if(!pop || pop.closed)
pop=window.open('','','width=300,height=300,scrollbars=1,resizable=1');
pop.location = 'popup.htm?'+what;
pop.focus();
return false;
}
</script><body>
<a href="SM/1.jpg" onclick="return popup(this);"><img src="sm/1.jpg"
alt=""></a>
<a href="SM/2.jpg" onclick="return popup(this);"><img src="sm/2.jpg"
alt=""></a>
<a href="SM/3.jpg" onclick="return popup(this);"><img src="sm/3.jpg"
alt=""></a>
</html>


This code is definitely inefficient (because I was trying different
things to try to make it work).
Click to expand...


var cW, cH, h, w, strSize, titel, msgWindow=false;
function popupCenter1(strImage) {
Click to expand...

var strImageTitle = new Image();
strImageTitle.onload = function() {
h = strImageTitleTemp.height;
w = strImageTitleTemp.width;
cW = (screen.availWidth - w)/2;
cH = (screen.availHeight - h)/2;
if( w > 300) strSize = "style='font-size: 8pt'";
titel = strImage.alt;
thePopUp();
}
strImageTitle.src = strImage.src.toString().replace("sm","SM");
}

function thePopUp() {

var page= said:
title><link rel='stylesheet' href='css/styles.css' type='text/css'></
head><body style='background-image: none;' leftmargin='0'
rightmargin='0' topmargin='0' bottommargin='0'><div
align='center'><table border='0' cellpadding='0' cellspacing='0'
width='100%'><tr><td class='header'><img src='images/site/
left_corner_top.gif' align='top'></td><th align='left' class='header'"
+ strSize + ">Image: " + w + ' X ' + h + "</th><td class='header'
align='right'><img src='images/site/right_corner_top.gif'
align='top'></td></tr><tr><th colspan='3'><img src='" +
strImageTitle.src + "'></tr><tr><th align='left' class='header'><img
src='images/site/left_corner_bottom.gif' align='top'></th><td
class='header' " + strSize + "><a style='color: #E3E3E3;'
href='javascript:window.close();'>Close Window</a></td><td
class='header' align='right'><img src='images/site/
right_corner_bottom.gif' align='top'></td></tr></table></div></body></
html>";
Click to expand...

if(msgWindow && !msgWindow.closed) msgWindow.close();

msgWindow =
window.open('','','width='+w',Height='+(+h+60)+',left='+cW+',top='+cH+
'toolbar=no,menubar=no,location=no,directories=no,status=no,scrollbars=auto,resizable=no,copyhistory=no');
msgWindow.document.clear();
msgWindow.document.open();
msgWindow.document.write(page);
msgWindow.document.close();
}
Click to expand...


Nota :
- visitor can choose to open popups in a tab
- Fx by default doesn't accept to resize a window
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Image on header 2
Filter table rows based on multiple checkboxes value 2
Image shifts to the right when export the page to pdf 4
Help with my responsive home page 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Help with code 0
Angularjs newbie - second JSON datasource does not display 0

Members online

Total: 76 (members: 3, guests: 73)
Robots: 414

Forum statistics

Threads
473,982
Messages
2,570,186
Members
46,739
Latest member
Clint8040

Latest Threads

Top