Click to See Complete Forum and Search --> : Dynamic Size for Enlarged Image Popup


Eulibrius7
04-26-2004, 02:21 PM
I currently have the popup dynamically resize to the dimensions of the enlarged image and centered on the screen. This works well with physically smaller sized images but with larger ones it overflows off the screen in a very unfriendly way... I need help with modifying the code so that the popup window will not bleed off the screen or another similar solution. Please excuse the load time of the page because it is pulled directly from my personal IIS server via a cable connection... along those lines, with the thumbnails, does anyone know of any algorithms to compress the image "on-the-fly" and proportionalize it as well? Thanks for any kind of assistance.

http://www.doxism.com/pics.asp?type_id=Cars&name_id=maserati_mc12&record_name=Maserati%20MC12

or

http://www.doxism.com/pics.asp?type_id=Art&name_id=michael_whelan&record_name=Michael%20Whelan

gil davis
04-26-2004, 04:58 PM
I wrestled with that problem myself, and here is my results:

http://gil.davis.home.att.net/openit_example.htm

To see it in action with a large image, see:

http://gil.davis.home.att.net/shuttle4.htm

and click on the image above STS-101.

Pittimann
04-27-2004, 08:05 AM
Hi!

Sorry, I didn't reply to you pm (have some surgery business going on :(). Just now, they let me out of the hospital until the next operation after tomorrow. The code below is far away from being clean and perfect, but it should do what you want in Mozilla and IE:

//replace everything from below the function scrollerDetect(key) upto
//including the function foo(what) with this code...
var mywin;
var rsyn="no";
var moz=(document.getElementById&&!document.all);
var ie=(document.all);
function popup(url,windowname,width,height) {
widthOrg=width/screen.width;
heightOrg=height/screen.height;
if(widthOrg>1||heightOrg>1){
var factor=heightOrg/widthOrg;
if(factor<=1){
width=screen.width;
height=screen.height*factor;
ins=" width="+(screen.width-8);
rsyn="hor";
}
else if(factor>1){
if(ie){
ins=" height="+(screen.height-20);
}
if(moz){
ins=" height="+(screen.height-35);
}
rsyn="ver";
}
}
else{
ins=" width="+width;
widthOrg=width;
heightOrg=height;
rsyn="no";
width=(width)?width:screen.width/3;
height=(height)?height:screen.height/3;
}
var screenX = (screen.width/2 - width/2);
var screenY = (screen.height/2 - height/2);
var features= "width=" + width + ",height=" + height;
features += ",left=" + screenX;
features += ",top=" + screenY;
features += ",scrollbars=no";
mywin=window.open('about:blank', windowname, features);
mywin.document.write('<html><head></head><body bgcolor=black onunload="window.opener.isClosed=1"><img src="'+url+'" title="&nbsp;Please click image to close window!&nbsp;" border=0 onclick="window.close()"'+ins+' style="position: absolute;top:0px;left:0px" id="car"></body><html>');
mywin.document.close();
if(rsyn=="hor"){
if(ie){
mywin.resizeTo(screen.width,height);
}
if(moz){
mywin.resizeTo(screen.width,height+25);
}
}
if(rsyn=="ver"){
if(ie){
widthOrg=mywin.document.getElementById('car').offsetWidth+10;
}
if(moz){
widthOrg=mywin.document.getElementById('car').offsetWidth+10;
}
mywin.resizeTo(widthOrg,screen.height);
var newLeft=(screen.width-widthOrg)/2;
mywin.moveTo(newLeft,0);
}
if(rsyn=="no"){
mywin.resizeTo(widthOrg+8,heightOrg+30);
}
mywin.focus();
isClosed=0;
}
var isClosed=0;
var myimage = new Image();
var popupwin=null;
myimage.onload=function(){
popupwin=popup(this.src,"pic",this.width+20,this.height+20)
}
function foo(what){
if (mywin&&isClosed==0){
mywin.close();
}
myimage.src=what;
}

Cheers - Pit

Brendan Nolan
05-16-2004, 04:55 AM
Gil,

I have found your script very useful - thanks...

I have just had a problem in IE5 on a Mac (that is the latest version for a mac) the window pops up, but the background is just black, and the image is not visible... any ideas?

gil davis
05-16-2004, 06:41 AM
I don't have any experience with Mac. Are there any errors you can tell me about? Is there a yellow triange in the status bar of the opener?

From the observed symptoms, I would say that it did not apply the style to the DIV that is used to hide the page.

You can also check to see if the document.write() wrote valid info. Right-click in the new window and View Source. See if it looks right. If it doesn't, that will give us a clue to the problem.

Brendan Nolan
05-16-2004, 08:20 PM
I get this error. But interestingly I only get it when I turn JS off, yet it still manages to write something to the window. My prefs are a little screwy!

I think that the following error SHOULD be appearing all the time in IE if my prefs were being applied properly...

'pic.document.getElementById(...)' is not an object

The document.write() got this far...


<HTML>
<HEAD>
<title>Wedding Photography: Jeff's Gallery</title>
<LINK REL='STYLESHEET' HREF='openit.css'>
<BODY>
<div id='wait' class='wait'><table border=0 width='100%' height='100%'><tr valign=center><th>Picture loading ... please wait!</th></tr></table></div>
<div id='img'></div>


The script works fine in FireFox, but the same problem (sort of) occurs in Safari.

In IE the script gets as far as resizing the window and centering it on the screen. Although the size of the window does not seem t have any bearing on the size of the image, it is always the same size.

Safari does not resize or center the window. It just says loading image, then switches to the black screen. When I view the source it has none. I don't trust Safari anyway, so I'm not too worried. Although I would REALLY like it to work in IE.

gil davis
05-17-2004, 06:13 AM
I only get it when I turn JS offThat is screwy!
In IE the script gets as far as resizing the window and centering it on the screen. Although the size of the window does not seem t have any bearing on the size of the image, it is always the same size.The window.open() does not specify a size, so IE will open a window sized according to the last window that was open. If you open & close windows repeatedly, they will be the same size and in the same location by default. That means the script is not running.

Did you include ";return false" in the link that opens the window?
Safari does not resize or center the window. It just says loading image, then switches to the black screen.I don't have Safari or Opera (or Mac). It seems that the show/hide part works, but not the image load. Are you using regular URL ("/") or IE ("\") conventions?

Does my page work? How about http://gil.davis.home.att.net/shuttle4.htm ?

Brendan Nolan
05-17-2004, 08:31 PM
That is screwy! Yeah, bit IE IS written by M$ :-)

The window.open() does not specify a size, so IE will open a window sized according to the last window that was open. If you open & close windows repeatedly, they will be the same size and in the same location by default. That means the script is not running.
The window opens at the size that you are talking about, and then resizes and centers, the size that it resizes to is fairly small (maybe around 300px wide 200 tall)

Did you include ";return false" in the link that opens the window?Yep

Are you using regular URL ("/") or IE ("\") conventions? always /, should I try \ ?

Does my page work? How about http://gil.davis.home.att.net/shuttle4.htm ? No, it doesn't.

gil davis
05-19-2004, 06:17 AM
always /, should I try \ ?No. I was trying to eliminate "\" as a possible problem.
The window opens at the size that you are talking about, and then resizes and centers, the size that it resizes to is fairly small (maybe around 300px wide 200 tall)Is the image 300 x 200?

It would be interesting to add some alerts. Are you up for that?

Change the extension of the attached file to .js and try it. Let me know what the alerts say.

Brendan Nolan
05-19-2004, 08:12 PM
Is the image 300 x 200?

No, none of them are...


It would be interesting to add some alerts. Are you up for that?
The results:

file=http://henderson.unsharpmask.com/subscribers/henderson/files/galleries/jeff_weddings/DSC_6762.jpg.tif.jpg/ntitle=Wedding Photography: Jeff's Gallery

openit file=http://henderson.unsharpmask.com/subscribers/henderson/files/galleries/jeff_weddings/DSC_6762.jpg.tif.jpg

patch file=http://henderson.unsharpmask.com/subscribers/henderson/files/galleries/jeff_weddings/DSC_6762.jpg.tif.jpg

showImg



Thankyou for persisting with this Gil!

gil davis
05-20-2004, 06:16 AM
Here is another version. See what this says.

Brendan Nolan
05-23-2004, 07:46 PM
Okay, obviously this is where the problem begins...

ht=0
wd=1
src=http://henderson.unsharpmask.com/subscribers/henderson/files/galleries/jeff_weddings/9soarvell.jpg
complete=true


byld


I am thinking that the size that the window is appearing at is the minimum possible size of the window... (just checked) it is!

I actually have PHP available to me, if this becomes too difficult I could calculate the size in PHP if it helped, maybe pass the image size throught the functions and skipping the image size calculation...