How to: enlarge images on click using CSS and JavaScript

∞ Fri, 27 Apr 2012 · Comments

Instead of using a lightbox script to display enlarged versions of embedded images, I decided that there was a better solution, for my own needs anyway: images should simply expand to their full size on click. So, I sat down today to figure out how to do that, and arrived at a solution that I feel is good enough for me to replace the otherwise excellent fancyBox with. If you want a quick demonstration of what I mean, head over to my PSDs page – clicking on any image will enlarge it, or you can even click on a special link to quickly toggle all images between regular and full size.

Here’s how to do it.

Prerequisites

Of course, this solution may or may not be the right one for you. If you have small thumbnails that you want to link to the full image, lightbox scripts are probably the way to go; if you have images that are exactly the content width, you won’t need anything special at all. This solution – enlarging images on click – is suited for those tasks where the full image is displayed, but with max-width: 100% and height: auto to fit in with the content. Basically, both the <img> and the <a> wrapped around it should point to the same file:

<a href="image.png"><img src="image.png" /></a>

The CSS

Very easy – an additional class removes the restriction on max-width. This is all you need to put in your stylesheet:

img {
    height: auto;
    max-width: 100%;
}
img.expanded {
    max-width: none;
}

Now, we need to apply the expanded class to the clicked image.

The JavaScript

Place this code snippet somewhere in the <head> section (don’t forget to include jQuery):

$(document).ready(function() {
        var imageLinks = $('a[href$=".png"], a[href$=".jpg"], a[href$=".gif"], a[href$=".bmp"]');
        if (imageLinks.children('img').length) {
            imageLinks.children('img').each(function() {
                var currentTitle = $(this).attr('title');
                $(this).attr('title', currentTitle + ' (click to enlarge image)');
            });
            imageLinks.click(function(e) {
                e.preventDefault();
                $(this).children('img').toggleClass('expanded');
            });
        }
    });

It’s pretty straightforward. First, the script fetches all <a> elements that link to an image file, and then looks for an <img> child element. If it finds one, it appends the “click to enlarge image” text in parentheses to the title attribute, and registers a click handler that prevents the link from firing to instead toggle the expanded class (see CSS) on our <img>.

Animation

Since CSS3 allows for easy animation, let’s make the transition between regular/full size smooth! As the transition property isn’t final yet, we have to add all those pesky vendor prefixes:

img {
    height: auto;
    max-width: 640px;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}
img.expanded {
    max-width: 2000px;
}

If you’re wondering why the max-width values changed… some browsers will not display the animation without pixel values. So, just replace 640px with whatever your content width is, and 2000px with whatever (large) size you anticipate your images to be.

Bonus

To quickly toggle all images (like on my PSDs page), you will need to add such a link into your markup:

<a href="javascript:void(0)" onclick="toggleExpand()">Click here to enlarge all images.</a>
<script type="text/javascript">
function toggleExpand() {
    var expanded = true;
    $('img').each(function() {
        if (!$(this).hasClass('expanded')) {
            expanded = false;
            return false;
        }
    });
    $('a[href$=".png"], a[href$=".jpg"], a[href$=".gif"], a[href$=".bmp"]').children('img').each(function() {
        if (expanded)
            $(this).removeClass('expanded');
        else
            $(this).addClass('expanded');
    });
}
</script>

First, the toggleExpand() function checks if all images have been expanded already. If not, expanded (the variable) is set to false, and the expanded class is applied to all <img> elements in the else statement; otherwise, it is removed from all <img> elements.

That’s it

If you’ve got any questions, or even improvements to my solution, feel free to leave a comment!