Phil Weber

First of all, let me say thank you for posting these various scripts.  I
have been searching for one that will open an image in a new window and size
the window to the contents forever.  Yours is genius.  I can't believe no
one has posted stuff like this before.

Here's my problem/suggestion:

I am a professional photographer and I am using your script for my on-line
portfolio (currently being rebuilt).  I like to show very large copies of my
images - up to 1000 x 667.  This is too large for most screens, especially
once real-estate is given over to the task bar, title, scroll bars and so
on.  Even smaller images may overwhelm some screens.

It would be great if the script could (a) open the new window to the
appropriate size for the contents or to the maximum height or width of the
screen, whichever is smaller.  Then (b) if the contents are larger than the
available screen size, resize the image to fit in the available space
(without scroll bars), but (c) allow users to click (the image or a button)
to see the full size version with scrollbars.

I hope you can help with this - I am at the limit of my skills on some of
this (I already adapted your script somewhat so that I can use it in a
template file that Photoshop uses to generate the web gallery, substituting
tokens for Title, Subject, etc).

(I know your site says you don't take money for this, but I'd paypal a
gratuity, give you a link, or generally say nice things about you if you can
help!)

Tarquin:

Awesome!  Thank you!  I never expected this so quickly.  Only problem:
Outlook blocked the attachment.  Could you paste the script directly into an
email?

Thanks!

-phw

Thank you for this -- it's a thing of beauty!  BUT, I should tell you about
this:

<1>
In Internet Explorer (I use 6.0)...
The OLD version used to close the popup window if you clicked anywhere on
the screen, including in the popup...

The NEW version works as designed in Netscape 7.2 and Foxfire, but the old
"functionality" (I don't think it was intended) persists:  when you click on
the image to resize it, the window closes instead...

<2>
I have tried this with various screen sizes, and it seems to work well.
However, when sizing the image to the screen the popup window is small and
nicely centered but doesn't use the maximum available screen area.  Can I
control this?  Do you size to 80% of the screen or some calculated value
like that?  (This is the case in all three browsers I tried)

<3>
When they are resized to a smaller window images are "jagged".  See the two
images I sent showing the edge of a bikini.  I'm thinking there is no good
solution to this, but I'll ask.

<4>
When maximizing the picture in the pop-up window, could the window enlarge
as much as possible?  For example, often an image needs to be shrunk because
it's too large only in height--width is not a problem.  The "shrunk" window
naturally has to reduce both height and width to maintain the aspect ratio.
But when expanding again to full-size, it would be great if the window could
go to maximum width, leaving need for only the vertical scroll-bar.


That's a lot - most important obviously is the "bug" in <1>

Thanks; after this I'll leave you alone!

Thanks again! 

Everything is great except my tem #4:  I had asked if onclick the window
could expand as much as possible and you did that, giving me a full-screen
window.  Unfortunately that isn't quite what I was thinking, and is
unappealing since there will be white space inside the window either to the
right of or below the image, depending on it's orientation.

What I meant was that the window should expand to screen height or width
(with a scroll bar) if the full-size image exceeds screen capacity in that
direction.  But in the other direction, the window should only be the size
of the full-size image (so still no white space around it).

I tried this:  

    window.moveTo(0,0); window.resizeTo(this.width,this.scH); '+

which is close (when an image is 1000x667 "portrait"), but is too small by
the width of a scrollbar...and when the image is 667x1000 it'll be a mess.

And of course it would be nice if it was still centered.

You're a genius.  This is perfect.  

I can't believe that someone I have never met was willing to do all this.
Is there something I can do in return?  (Right now we're offering a special
on first-born male children if you want mine!)

Tarquin--

You and I corresponded several months ago about the script below (bottom of
page).  First I should say that I can't believe how incredibly helpful you
were.

I have a new question/request.  I like to use this on photography sites
where I set autoclose = true so that people can't steal my images.  But in
IE they can still access that little overlay in the upper left corner that
allows them to save the image, email it, etc.

To cope with that I often include the following code in all my other pages:

   <!--Prevent coping pictures-->
   <META HTTP-EQUIV="imagetoolbar" CONTENT="no">
   <script language="JavaScript">
   function noRightClick() {
   if (event.button==2) {
   alert('(c) Avalon Photogaphy - Right-Click is disabled')
   }
   }
   document.onmousedown=noRightClick
   </script>
   </head>

*** Is there a way to incorporate this into popup windows generated by your
script or to otherwise disable right-clicking or the IE features like "email
this image"??

Phil Weber


*** THIS IS THE SCRIPT I AM CURRENTLY USING ***
<script type="text/javascript"><!--
var extraHTML = '<a href="javascript:window.close()" <\/a>';

//really not important (the first two should be small for Opera's sake)
PositionX = 10;
PositionY = 10;
defaultWidth  = 600;
defaultHeight = 400;

//don't touch (except to modify the window contents)
function popImageExtra(imageURL,imageTitle,AutoClose,oTimeClose,extraHTML){
var imgWin =
window.open('','_blank','scrollbars=yes,resizable=1,width='+defaultWidth+',h
eight='+defaultHeight+',left='+PositionX+',top='+PositionY);
if( !imgWin ) { return true; } //popup blockers should not cause errors
imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script
type="text\/javascript">\n'+
 'function getRefToDivMod( divID, oDoc ) {\n'+
  'if( !oDoc ) { oDoc = document; }\n'+
  'if( document.layers ) {\n'+
  'if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {\n'+
  'for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {\n'+
  'y = getRefToDivNest(divID,oDoc.layers[x].document); }\n'+
  'return y; } }\n'+
  'if( document.getElementById ) { return oDoc.getElementById(divID); }\n'+
  'if( document.all ) { return oDoc.all[divID]; }\n'+
  'return document[divID];\n'+
 '}\n'+
 'function resizeWinTo() {\n'+
  'if( !document.images.length ) { document.images[0] =
document.layers[0].images[0]; }'+
  'if( !document.images[0].height || window.doneAlready ) { return; }\n'+
//in case images are disabled
  'var oH = getRefToDivMod( \'myID\' ); if( !oH ) { return false; }\n'+
  'var oW = oH.clip ? oH.clip.width : oH.offsetWidth;\n'+
  'var oH = oH.clip ? oH.clip.height : oH.offsetHeight; if( !oH ) { return
false; }\n'+
  'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are
disabled
  'window.doneAlready = true;\n'+ //for Safari and Opera

  'var mH = screen.availHeight-200, mW = screen.availWidth-200;\n'+
  'if( oH > mH || oW > mW ) {\n'+

  'document.images[0].fullH = oH;\n'+
  'document.images[0].fullW = oW;\n'+

  'var hDif = oH - document.images[0].height;\n'+
  'var wDif = oW - document.images[0].width;\n'+
  'mH = mH - hDif; mW = mW - wDif;\n'+
  'mH = mH \/ document.images[0].height;\n'+
  'mW = mW \/ document.images[0].width;\n'+
  'var zoomFactor = ( mH < mW ) ? mH : mW;\n'+
  'oH = Math.floor( document.images[0].height * zoomFactor );\n'+
  'oW = Math.floor( document.images[0].width * zoomFactor );\n'+

  'document.images[0].style.cursor = \'crosshair\';\n'+
  'document.images[0].title = \'Click to resize image (full-size/best
fit)\';\n'+
  'document.images[0].oldHeight = document.images[0].height;\n'+
  'document.images[0].oldWidth = document.images[0].width;\n'+
  'document.images[0].newHeight = oH;\n'+
  'document.images[0].newWidth = oW;\n'+
  'document.images[0].onclick = function () { '+
  'if( this.oldHeight == this.height ) { '+
  'this.height = this.newHeight; this.width = this.newWidth; '+
  'setTimeout(\'window.resizeTo(\'+this.oW+\',\'+this.oH+\'); '+
  'if( !window.opera ) { '+
  'window.moveTo(\'+Math.round((this.scW-this.oW)/2)+\','+
  '\'+Math.round((this.scH-this.oH)/2)+\'); }\',1);\n'+
  '} else { this.height = this.oldHeight; this.width = this.oldWidth; '+
  'window.moveTo(0,0); window.resizeTo(this.scW,this.scH); '+
  'var myW = 0, myH = 0, d = x.document.documentElement, b =
x.document.body;\n'+
  'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
  'else if( d && d.clientWidth ) { myW = d.clientWidth; myH =
d.clientHeight; }\n'+
  'else if( b && b.clientWidth ) { myW = b.clientWidth; myH =
b.clientHeight; }\n'+
  'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
  'if( this.fullH < myH ) { var rs = this.fullH - myH;
window.resizeBy(0,rs); '+
  'if( !window.opera ) { window.moveBy(0,Math.round(rs/-2)); } }'+
  'if( this.fullW < myW ) { var rs = this.fullW - myW;
window.resizeBy(rs,0); '+
  'if( !window.opera ) { window.moveBy(Math.round(rs/-2),0); } }'+
  '} };\n'+

  'document.images[0].height = oH;\n'+
  'document.images[0].width = oW;\n'+
  'oH += hDif; oW += wDif;\n'+
  '}\n'+

  'if(document.getElementsByTagName) {\n'+
   'for( var l = document.getElementsByTagName(\'a\'), x = 0; l[x]; x++ )
{\n'+
    'if(l[x].className==\'makeright\'&&!l[x].style.position){\n'+
     'l[x].style.position=\'relative\';\n'+
    
'l[x].style.left=(document.images[0].width-(l[x].offsetWidth+l[x].offsetLeft
))+\'px\';\n'+
  '}}}\n'+
  'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
  'var myW = 0, myH = 0, d = x.document.documentElement, b =
x.document.body;\n'+
  'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
  'else if( d && d.clientWidth ) { myW = d.clientWidth; myH =
d.clientHeight; }\n'+
  'else if( b && b.clientWidth ) { myW = b.clientWidth; myH =
b.clientHeight; }\n'+
  'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
  'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) -
myH ) );\n'+
  'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
  'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+

  'document.images[0].oH = oH;\n'+
  'document.images[0].oW = oW;\n'+
  'document.images[0].scH = scH;\n'+
  'document.images[0].scW = scW;\n'+

  'if( !window.opera ) {
x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
 
(oTimeClose?('window.setTimeout(\'window.close()\','+oTimeClose+');\n'):'')+
 '}\n'+
 '<\/script>'+
 '<\/head><body onload="resizeWinTo();"'+(AutoClose?'
onblur="self.close();"':'')+'>'+
 (document.layers?('<layer left="0" top="0" id="myID">'):('<div
style="position:absolute;left:0px;top:0px;display:table;" id="myID">'))+
 '<img src='+imageURL+' alt="Loading image ..." title=""
onload="resizeWinTo();">'+
 (extraHTML?extraHTML:'')+(document.layers?'<\/layer>':'<\/div>')+'<\/body><
\/html>');
imgWin.document.close();
if( imgWin.focus ) { imgWin.focus(); }
return false;
}
//--></script>

Thank you so much!

I put the code into the page at [URL]
and now things don't open in the properly sized window.

(I turned off the right-click suppression on the main page so you can see
the code if you like)

This happens whether autoclose is true (top left image) or false (all
others)

thank you

Tarquin --

You and I exchanged emails about three years ago. I still love the script
you wrote for opening images in popup windows.

My most recent version of the script appears below.

In some websites I use this code on multiple pages and it occurs to me that
those pages might load faster and the images open faster if the bulk of the
code could be put in a shared file someplace else, with the calls from the
various web pages.

I am most definitely NOT a java guru, so while I have fiddled with this, I
have no idea how to really make it work, where to put the external code,
how to properly pass variables, etc.

1.  Can you offer any help?

2.  Do you want any kind of recognition for this code?  A link?

Phil Weber

---

CURRENT CODE:

[my script source code]

wow, I was definitely over-engineering things!
thanks!