Enlarge Images at the Speed of jQuery!

With the expanded use of responsive website design, images embedded inline within your blog articles can often pose a problem to a responsive layout or web template.  Any image over 300 pixels wide is going to blow out the sides of a mobile screen (so to speak).  Wouldn’t it be great if you could add the ability to enlarge images with a single click?  Using a CMS plug-in may work for some.  However, we decided we didn’t want to colorbox everything, so we worked up our own geekly jQuery script.

For an example of how this works, take a look at this blog series that contains several screen shots that levarge this script.

We’re sharing this jQuery script with the caveat that it requires a bit more than beginning knowledge of jQuery and CSS to implement.  You should be able to figure this out, but it may interfere with other styling you implement depending upon the methods you’ve leveraged.  This isn't a replacement for flexible images, but rather an alternative.

To create an image that can be enlarged by an end-user with one click (or a touch), we wanted to keep implementation fairly simple.  This way the functionality could be reused for future blog posts.  We figured adding a memorable CSS class was easiest.  We could then tie that class to the desired jQuery functionality. This allows assignment of inline styles, or the ability to add another class or id to control image size and layout within the flow of the blog article.

To enlarge the image, we would then strip the previous style, and use its original dimensions.  Seems straightforward, right? Not necessarily.  There are a couple of issues presented when enlarging an image.

1. What if the original image dimensions are larger than the screen resolution?
2. And, if so, how do we keep aspect ratio of the image while fitting it to the screen?

We could arbitrarily set the height of the image to always be eighty-five percent of the window size, but what if the aspect of the image is a panoramic shot that is excessively wide?  Restricting the width by an arbitrary percentage would then cause the aspect ratio to be incorrect. 

See the conundrum?

To solve this, we must grab the window size, and then calculate the proper aspect ratio while resizing the image.  Let’s get started.

Adding the CSS:

Since we already have our site set to use a cover up (a jQuery reveal) while our web pages load, we already had the CSS in place for the cover portion necessary to complete this effect.  To use this code, the #cover piece of your CSS will have to be hidden, so don’t forget to add the jQuery snippet shared in our past article "A Simple jQuery Website Reveal".  If you don’t, this script won’t work (and you’ll have a site that is covered up completely).

To get started, add the following CSS to your website. 

#cover {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #fff;
z-index: 9999;
}

.thumbnails {
display: block;
color: gray;
font-size: 11px;
font-style: italic;
text-align: center;
padding: 0px 5px;
}

The #cover is used for the simulated lightbox display, while the .thumbnails class is used for the instructions “click to enlarge”.

The rest of the work is done by jQuery.  To get the jQuery code to work, add the class “image-enlarge” to the image you desire to manipulate.  The class can be used on multiple images on the page, but it must be applied to the image itself, not the wrapping page element. 

Let’s say your target image is 700 pixels wide.  Using inline styles, or an additional style class, size the image on the page to 300 pixels wide or smaller. 

CSS Example:

.my-image-class {
width: 290px;
margin: 0 5px;
border: 1px solid black;
}

This allows for your original image to keep its definition.  Note that this script uses screen size to create the new dimensions of your image once clicked, so it may pixelate some depending upon the image’s original size.  The next step is to add the jQuery scripting components.

The jQuery Code:

Part 1: This piece of jQuery finds the images with the “image-enlarge” class and adds “click to enlarge” thumbnail text.  The jQuery snippet below will check to see if the class is present on your page and add it to each image.

if ($('.image-enlarge').length) {
$('.image-enlarge').each(function () {
$(this).wrap('<span class="thumbnails" style="float:' + $(this).css('float') + ';width:' + $(this).width() + 'px;" >Click to enlarge image</span>');
});
}

Part 2: This portion of the script adds the click functionality to the images with the “image-enlarge” class.  This reads the image height and width in order to maintain aspect ratio when enlarging the image. The image will then occupy approximately eighty-five percent of the available screen space (see var desiredSize in code).  The script also preserves image’s float for the instructional span tag, keeping it aligned and centered above the image.

$('.image-enlarge').click(function() {
$(this).clone().appendTo('#cover');
// add message for how to close display, and add the id “div-enlarge” for later removal
$('#cover .image-enlarge').wrap('<div id="div-enlarge" class="thumbnails" style="color:#fff;padding-top:20px;height:100%; width:100%; position: fixed;">Click anywhere to close this display</span>');
// update #cover to have a transparent background (if so desired)
$('#cover').css({'background': 'url(../images/full_bg.png) repeat scroll 0 0 transparent'});
// bring back the cover to act as the lightbox background
$('#cover').fadeToggle('fast');
// remove any inline style and styling class 
$('#cover .image-enlarge').removeAttr('style').removeClass(‘my-image-class’);
// update inline style for enlarging
$('#cover .image-enlarge').css({'display':'block','margin':'0 auto', 'padding-top':'20px', 'z-index':'5000'});
// establish variables for the aspect ratio and desired screen size
var imageWidth  = $(this).width();
var imageHeight = $(this).height();
var parentWidth  = $(window).width();
var parentHeight = $(window).height();
var desiredSize = 0.85;
var newWidth, newHeight;
// checks for aspect (portrait or landscape)
if(imageWidth/parentWidth > imageHeight/parentHeight) {
  newWidth  = parentWidth * desiredSize;
  newHeight = newWidth * (imageHeight / imageWidth);
  $('#cover .image-enlarge').stop(true, false).animate({width: [newWidth + 'px', 'swing'], height: [newHeight + 'px', 'swing']}, 1500);
} else {
  newHeight = parentHeight * desiredSize;
  newWidth  = newHeight * (imageWidth / imageHeight);
  $('#cover .image-enlarge').stop(true, false).animate({width: [newWidth + 'px', 'swing'], height: [newHeight + 'px', 'swing']}, 1500);
}
});

Now your images are set to enlarge when a site visitor clicks on them!  However, we’re not done yet.  We must provide an escape mechanism to close the enlarged image. 

Part 3:  This part of the jQuery closes the lightbox-style display by removing the div you appended to the #cover (see comments in code for Part 2). 

$('#cover').click(function() {
$(this).find('#div-enlarge').remove();
$(this).fadeToggle('fast');
});

Now your responsive website is set with a mobile friendly layout that includes inline images!  These “click to enlarge” images allow your big screen site visitors to easily view a larger version of the embedded images while maintaining their original aspect ratio.  The jQuery provided will tag each image with a “click to enlarge image” span, and enable each image to be enlarged for wider screen formats.