Mod: Scaling down large images to fit on screen in popup

[jstelly]

This is a fix to make images larger than the current desktop resolution scale down so that they can fit on the screen instead of needing to pan/scroll around to view them.  It's the first thing I've written in PHP so if anyone sees any better ways of doing something, let me know.  The method I use to pass the screen resolution from javascript back to PHP is a bit ugly but it works.

I also made some minor changes, no status bar in the popup, no toolbar, no resizing, basically squeezing the most space out of the new window as I could.  The changes work on IE6 and fairly recent versions of Mozilla.  I haven't tried anywhere else.

This is a pretty simple mod from the 1.2.1 source.  I changed displayimage.php and scripts.js.  If you want to download a zip with the changed files, go here.  Just extract those two files over your existing ones (back up the old ones to be safe).

If you want to make the changes by hand, here is a CVS diff:

Code Select Expand


Index: displayimage.php
===================================================================
RCS file: /src/picsroot/displayimage.php,v
retrieving revision 1.1.1.1
diff -r1.1.1.1 displayimage.php
149,151c149,155
<         $winsizeX = $CURRENT_PIC_DATA['pwidth'] + 16;
<         $winsizeY = $CURRENT_PIC_DATA['pheight'] + 16;
<         $pic_html = "<a href=\"javascript:;\" onClick=\"MM_openBrWindow('displayimage.php?pid=$pid&fullsize=1','" . uniqid(rand()) . "','scrollbars=no,toolbar=no,status=yes,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
---
>         $pwidth = $CURRENT_PIC_DATA['pwidth'];
>         $pheight = $CURRENT_PIC_DATA['pheight'];
>         $pic_html = "<a href=\"javascript:;\"" .
>                         " onClick=\"MM_openFSImage(" .
>                         "'displayimage.php?pid=$pid&fullsize=1&pwidth=$pwidth&pheight=$pheight'," .
>                         "'" . uniqid(rand()) . "'," .
>                         "'scrollbars=no,toolbar=no,status=no,resizable=no,screenX=0,screenY=0,top=0,left=0')\">";
373a378
>
396,402c401,403
< <script language="JavaScript" type="text/JavaScript">
< adjust_popup();
< </script>
<
< <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="2">
<   <tr>
<      <td align="center" valign="middle">
---
> <table width="100%" height="100%" onclick="javascript: window.close()">
> <tr>
> <td align=center>
410c411,412
<         echo "<a href=\"javascript: window.close()\"><img src=\"" . path2url($picname) . "\" $imagesize[3] class=\"image\" border=\"0\" alt=\"\" title=\"$picfile\n" . $lang_fullsize_popup['click_to_close'] . "\"/></a><br />\n";
---
>
>         echo "<img src=\"" . path2url($picname) . "\" $imagesize[3] class=\"image\" border=\"0\" alt=\"\" title=\"$picfile\n" . $lang_fullsize_popup['click_to_close'] . "\"/>\n";
420,422d421
<         $geom = 'width="' . $row['pwidth'] . '" height="' . $row['pheight'] . '"';
<         echo "<a href=\"javascript: window.close()\"><img src=\"" . $pic_url . "\" $geom class=\"image\" border=\"0\" alt=\"\" title=\"" . htmlspecialchars($row['filename']) . "\n" . $lang_fullsize_popup['click_to_close'] . "\"></a><br />\n";
<     }
423a423,451
>                 $pwidth = $row['pwidth'];
>                 $pheight = $row['pheight'];
>
>                 $dwidth = $pwidth;
>                 $dheight = $pheight;
>
>                 if(isset($HTTP_GET_VARS['swidth']) && isset($HTTP_GET_VARS['sheight']))
>                 {
>                         $swidth = (int)$HTTP_GET_VARS['swidth'];
>                         $sheight = (int)$HTTP_GET_VARS['sheight'];
>
>                         if($pwidth > $swidth || $pheight > $sheight)
>                         {
>                                 $dwidth = $swidth - 16;
>                                 $dheight = $sheight - 16;
>                                 if($pwidth / $swidth > $pheight / $sheight)
>                                 {
>                                         $aspect = $swidth / $pwidth;
>                                         $dheight = $pheight * $aspect;
>                                 }
>                                 else
>                                 {
>                                         $aspect = $sheight / $pheight;
>                                         $dwidth = $pwidth * $aspect;
>                                 }
>                         }
>                 }
>         echo "<img src=\"$pic_url\" width=$dwidth height=$dheight class=\"image\" border=\"0\" alt=\"\" title=\"" . htmlspecialchars($row['filename']) . "\n" . $lang_fullsize_popup['click_to_close'] . "\">\n";
>     }
425,426c453,454
<     </td>
<   </tr>
---
> </td>
> </tr>
Index: scripts.js
===================================================================
RCS file: /src/picsroot/scripts.js,v
retrieving revision 1.1.1.1
diff -r1.1.1.1 scripts.js
4a5,12
> function MM_openFSImage(theURL,winName,features) {
>         swidth = screen.availWidth;
>         sheight = screen.availHeight;
>         fsFeatures = features + ",width=" + swidth + ",height=" + sheight;
>         fsURL = theURL + "&swidth=" + screen.availWidth + "&sheight=" + screen.availHeight;
>         window.open(fsURL,winName,fsFeatures);
> }
>
52,80d59
<
<
< function adjust_popup()
< {
<         var w, h, fixedW, fixedH, diffW, diffH;
<
<         if (document.all) {
<                 fixedW = document.body.clientWidth;
<                 fixedH = document.body.clientHeight;
<                 window.resizeTo(fixedW, fixedH);
<                 diffW = fixedW - document.body.clientWidth;
<                 diffH = fixedH - document.body.clientHeight;
<         } else {
<                 fixedW = window.innerWidth;
<                 fixedH = window.innerHeight;
<                 window.resizeTo(fixedW, fixedH);
<                 diffW = fixedW - window.innerWidth;
<                 diffH = fixedH - window.innerHeight;
<         }
<         w = fixedW + diffW;
<         h = fixedH + diffH;
<         if (h >= screen.availHeight) w += 16;
<         if (w >= screen.availWidth)  h += 16;
<         w = Math.min(w,screen.availWidth);
<         h = Math.min(h,screen.availHeight);
<         window.resizeTo(w,h);
<         window.moveTo((screen.availWidth-w)/2, (screen.availHeight-h)/2);
< }
<


[thebign]

I like that hack - I hate scrolling.

Thanks a lot and a Happy NewYear

Take Care And Have Fun

[Joachim Müller]

added to download section...

GauGau

[j1simon]

I upgraded to 1.3.1 hoping this would be a feature of the new version, however, it is not and I tried this mod w/o success, is there a way to alter this mod to work with 1.3.1? thank you

[Joachim Müller]

jstelly has supplied a diff view of his mod - if you can read it, you should be able to hack it into cpg1.3.x. Please post your hack here.

GauGau

[SGD]

I am trying to figure this out for 1.3.  

[j1simon]

anyone had any success with this yet?

[deejaymoni]

anyone had any success with this yet?

I have tested the mod for 1.3.x and it works great  . It scale it to the screen.

But I have a question can I wirte something under or below the image in the popup and scale the images much more smaller?

[litup]

Why not post the files so we can all enjoy..

[Joachim Müller]

why not carefully read the thread?
http://forum.coppermine-gallery.net/index.php?topic=2755.msg12484#msg12484

Joachim

[litup]

I did carefully read the thread.. the link you provided is for the 1.2 mod.  I was referring to this:

I have tested the mod for 1.3.x and it works great . It scale it to the screen.

It's my fault for not being specific.  I will try to use the diff view provided and post the completed files for 1.3x

Bryan

[claude258]

I am using version 1.32.
Can you tell me the mod I should do to get this function? I am not sure what to do with CVS... and I dont see it in the download section.
Thanks

[Pascal YAP]

i there
The download link in the first post do not work at all( ftp://ftp.ofasoft.com/pub/cpg12_scale_fs.zip ) the link to the download section idem !
Is there a clean version of the code in the first post ?
Thanx

PYAP

[bwschult]

Has anyone looked into this for 1.4.x?  I'm not a fan of the scrollbars one little bit but absolutely want to keep high-res images on my site (for my users to download and print if they want).  I almost had it when I was toying with the mod on 1.3.x but then 1.4.x came along and I installed that.  Now the code looks significantly different and I'm not sure how to proceed.

thanks,
bws

[Joachim Müller]

This thread has been heavily cluttered already, and it deals with a mod that was designed for a very outdated version of coppermine that goes unsupported. To avoid that this thread get's cluttered even more, I'll lock it now. Refer to the sticky thread Don't ask for other versions