Home | About Chris Hope | Contact Chris Hope | Search:

Resize image in Facebox to fit browser height

Posted July 30th, 2010 in Javascript

I was asked a couple of days ago how to resize an image within a Facebox popup so that it is no height than the height of the window so the user doesn't have to scroll. This post shows how to do this using the afterReveal.facebox trigger.

Working examples

Following is a couple of links which illustrate this working. The first link is for a really big image (500px wide by 1600px high) and the second for a small image. If you are reading this in a feed reader you will need to click through to view this in a browser for it to work.

The large image will be sized so it fits within the browser window; the smaller one does not need to (unless you make your window really small) and so will not.

Large Image

Small Image

The examples use a default install of Facebox with the paths changed and my fix to make the box auto-center correctly.

How it works

Here's the Javascript code. It needs to be added to a <script> section in the page or (ideally) in an externally sourced Javascript file, along with the rel=facebox method of converting links to Facebox links:

$(document).bind('afterReveal.facebox', function() {
    var faceboxImg = $('#facebox .image img');
    if(faceboxImg.length) {
        var availableHeight = $(window).height() - 100;
        var imageHeight = faceboxImg.height();
        if(imageHeight > availableHeight) {
            $('#facebox').css('top', ($(window).scrollTop() + 10) + 'px');
            faceboxImg.height(availableHeight + 'px');
        }
    }
});
$(document).ready(function() {
    $('a[rel*=facebox]').facebox();
})

The links above would then look like this:

<p><a href="/images/content/cathedral-cove-flax-500x1600.jpg" rel="facebox">Large Image</a></p>
<p><a href="/images/toolbox_logo.png" rel="facebox">Small Image</a></p>

What the code does is to bind a function to run after the Facebox dialog is revealed. A line-by-line description of the Javascript code above follows for the relevent lines.

Line 2: When just an image is loaded, it's contained within <div class="image">; cache a reference to the image in the Facebox to make things more efficient.

Line 3:  Check to see if the Facebox does contain this element. If it doesn't we don't want to mess around with any images contained within.

Line 4: Work out how much vertical space there is available. The 100 that is subtracted off allows for the "chrome" that forms part of the Facebox window.

Line 5: Work out the height of the image.

Line 6: Only resize the image if it is bigger than the available space.

Line 7: By default the Facebox is a little way down the page from the current top location. This line repositions it closer to the top to avoid any scrolling.

Line 8: Now change the height of the image. The width will automatically size by ratio.

Comments

blog comments powered by Disqus