[Javascript] Alternative ways to "popup" images?

[Paul Novitski]

At 5/12/2010 10:28 AM, forwebonly at web.de wrote:
>On http://www.anyvet.de/test.html
>you can see my try to create a webpage that contains images (ordered by
>a text-file, read out by "order.php" server-side script) and allows to
>enlarge them in a popup window.
>The latter part is done with "enlarge.js", which i collected in the 
>internet and modifed to my needs.
>
>So far, this seems to work:
>If i click on an image, the popup-window appears, correctly sized 
>for the larger image.
>
>But
>i feel this to be ugly, because when you click on any other on the
>main-page, the enlarged image itself, of the "prev", "next" links on
>the popup-window, the following happens:
>
>It loads the next
>image, then the popup window seems to close, reopen in a different
>shape - which you can see - and only then, reshape again to have the
>right size and form for the next image.
>So, the effect seems to be a fastly opening and closing window - 
>which i feel is very ugly.
...
>Is there is a more elegant way to show images in a popup - switching 
>landscape- and portrait-mode correctly in between?
>I mean, without that frame poping up and vanishing when loading a 
>new larger image ...
>Are there other, better ways?



I think your perception of what is happening might be incorrect. I 
think the child window is not being closed and re-opened, it's being 
resized -- twice, first to 100x100 and then, after the new image 
loads, to the size of the new image + 200px.

If you look at the enlarge.js script attached to the parent page, it 
executes this code each time an image is clicked:
_____________________

defaultWidth  = 100; defaultHeight = 100;
...
var imgWin = 
window.open('','MyPopupWindow','...,width='+defaultWidth+',height='+defaultHeight+',...
_____________________

Neither of those two default dimensions are modified anywhere else in 
the script. If you remove the width and height parameters from the 
window.open() call, the window will at least not shrink before 
resizing. Ideally, prehaps, you could set them equal to the width and 
height of the large image if you know in advance what they will be.

The script within the pop-up resizes its window after the large image loads:
_____________________

var oH = document.images[0].height, oW = document.images[0].width;
...
var x = window;
x.resizeTo( oW + 200 , oH + 200 );
_____________________

Check out Lightbox 
<http://www.huddletogether.com/projects/lightbox2/> to see examples 
of how the aspect ratio of the pop-up can be animated for a smoother 
ride. In the case of Lightbox, the animation is handled using the 
jQuery library.


Aside, your page is broken when JavaScript is turned off. I strongly 
recommend that you begin by marking up the page with real hyperlinks 
that link each image to its larger counterpart. Then use JavaScript 
to change the links so that they trigger the pop-ups. That way the 
content is accessible to every user agent -- including search 
engines, mobile devices, firewalled corporate users, and others that 
don't execute JavaScript -- but the page is still nicer viewed with 
scripting enabled. That is the "win-win" way of web development we 
call progressive enhancement.

Also, using a pop-up browser window to display the large image can be 
problematic, and I suggest you look at the way Lightbox accomplishes 
this by displaying the large image in a div *on the same page* and 
then styling it to overlay everything else through absolute positioning.

Regards,

Paul
__________________________

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com