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
- JPGraph Part 1
I really like JPGraph now. For too long I hated it as a clunky, bloated... - Custom Shopp Gallery with FancyBox
Following on from a previous post Custom Shopp Gallery, here is how to do make... - Embedding Videos with TinyMCE
By default TinyMCE strips out any code that you would use to embed videos or... - Custom Shopp Gallery
Hot off the press, here is a reformatted Shopp gallery function to overcome the current... - TimThumb upscale fix: stop timthumb from upscaling small images
Ever found that TimThumb is upscaling your small images and looking crap? As of version...
