The other week I came across a post about resizing images with jQuery. The idea is simple: use JavaScript to detect the size of the browser window (or whatever metric works best for you) and then replace any images with smaller versions if needed.
My immediate thought was that this technique would work great on the splash page of the Insect Dynasty website that I worked on recently, since the splash image was slightly larger than I would’ve liked when viewed at 1024 x 768:
Before: what a visitor would have seen at 1024 x 768
Even though you really need to be using a higher resolution to view the artwork on the website easily I wasn’t happy to leave the splash page like this. Besides, I wanted to try this technique out. So I wrote an inline script for the splash page using jQuery:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | jQuery(document).ready(function() { // Switches between the small and large splash image as appropriate. function resizeSplash() { var $window = jQuery(window); var $body = jQuery("body"); var $enter = jQuery("#enter"); if ($window.height() < 750) { $body.css({ backgroundPosition: "center 0", backgroundImage: "url('<?php bloginfo('template_url'); ?>/images/splash-background-small.jpg')", minHeight: "0" }); $enter.css("marginTop", "375px"); } else { $body.removeAttr("style"); $enter.removeAttr("style"); } } // Initial call to image resizing. resizeSplash(); // Resizes the splash image, if needed, when the visitor resizes their browser. jQuery(window).bind("resize", function() { resizeSplash(); } ); |
How it works
The key part of the script is where it checks if the browser viewport is less than 750 pixels tall – if so the background image on the body element is swapped. I also make some adjustments to the background-position and min-height properties, as these are also set in the stylesheet and need to be overridden as well when changing to a smaller splash image.
When the viewport height is 750 pixels or greater I simply remove the inline style attributes that jQuery would have set via calls to the css() function. This is the best way to revert back to using the larger splash image because it’s simple code, which is always a good thing – it makes the browser go back to using the rules from the stylesheet. That’s much better than making another call to css(), which would require duplicating bits of style definitions unnecessarily.
The technique relies on JavaScript being enabled so there may be some visitors who don’t enjoy its benefit. But it’s still an improvement for the people who do use JavaScript, as you can see:
After: with a smaller image the splash page fits nicely
The evil of splash pages
As an aside I’m aware that splash pages aren’t all that popular – they’re often just an unwanted obstacle for visitors, so there aren’t that many cases where I’d recommend using one on a website (not without really thinking it over carefully). In this case the splash page is partly setting the tone for the website and, being a website with a strong artistic focus, I consider the splash image to be part of the website’s content.
As splash pages go it’s also rather lightweight, unlike the frankly obnoxious ones you sometimes see which have heavyweight flash animations. That’s very difficult to pull off.