kieranbarnes these are the things i learnt today

Idiot Proof Lightbox

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...

Related posts:

1. JPGraph Part 1
   I really like JPGraph now. For too long I hated it as a clunky, bloated...
2. PHP Export as CSV
   A client recently requested an option to extract search results from their PHP application as...
3. Retro Fitting Record Pagination with ADOdb
   For my first project of the New Year I had to retro-fit pagination controls to...
4. CAPTCHA Image Generation
   I couldn't find a very good CAPTCHA generation script in PHP, all the ones I...
5. CubeCart Tax Classes on Product Page
   A client of mine sells a mix of VAT and VAT exempt products via a...

What this article 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.