kieranbarnes

I’ve just made some modifications to my Gallery code which is part of i9000’s small site CMS software.
It adds some client side logic to make sure the images Lightbox 2 creates fit the users screen perfectly. Previous to this some customers were complaining that the images they uploaded were too big for their visitor’s screen.

This allows us to present the largest possible image to the user without scrolling around the page.

This snippet of code near the top of the page, (just below the body tag) captures the screen resolution of the client browser.

if (!isset($_GET['width']) AND !isset($_GET['height'])) {
// pass the geometry variables
// (preserve the original query string
// — post variables will need to handled differently)
<script language=”javascript”>\n”;
echo ” location.href=”${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}”
. “&width=” + screen.width + “&height=” + screen.height;\n”;
echo “</script> echo “<script language=’javascript’>\n”;
echo ” location.href=”${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}”
. “&width=” + screen.width + “&height=” + screen.height;\n”;
echo “</script>\n”;
echo “\n”;
exit();
}

We can then use this code further on in the site like so;
This code shrinks the current size by 40% which allows for a nice margin round the image.

$image_width = $_GET['width'] - ($_GET['width'] / 100 * 40);
$image_height = $_GET['height'] - ($_GET['height'] / 100 * 40);

and then the following,which creates a clickable thumbnail and the largest image possible for the user’s screen (or largest image, whichever comes first).

<a href="imgsize.php?w='.$image_width.'&h='.$image_height.'contrain=1&img='.$image_path.'" rel="lightbox[]” title=”Some title”><img border=”0″ class=”t
humbnail” src=”imgsize.php?w=120&h=120&constrain=1&img=’.$image_path.’” alt=”Some title”>


This code uses;

• Lightbox 2 from HuddleTogether
• Prototype
• imgsize.php from Mike Lopez (Local Download: imgsize.zip)

I guess there is a better way of doing this by writing the captured resolution to the $_SESSION variable.

To be continued…

This entry was posted on Saturday, July 7th, 2007 at 12:08 and is filed under HTML, CSS, AJAX, PHP, Photography. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Was this post useful to you? Let me know, buy me a beer!
Alternatively, if you're feeling impecunious, you may like to subscribe to my RSS feed, or see other articles in the HTML, CSS, AJAX, PHP, Photography category.