Tutorial: Before and After Image Scrubber – Part II

In Part I of this tutorial, we constructed a cross-browser Before and After image Scrubber. In this Part II we will expound upon that code and take it to the next level. The focus of this tutorial will be to make the scrubber and its image contents responsive to its container’s size. Furthermore we will make the scrubber more practical by passing the path to the images in the URL calling the HMTL document. This allows one to place an iFrame anywhere displaying any images in their scrubber.
Go ahead and resize your browser’s viewport. The demo below should resize to match.

View jsFiddle Demo...
To continue from the Part I, we will need to do the following:

  1. Localizing variables.
  2. Create a scrubberResize function.
  3. Move our CSS manipulating jQuery statements into the scrubberResize function.
  4. Detect the viewport container’s size.
  5. Create a series of if statements to maintain the correct aspect ratio of the images, as well as keeping the images within their container.
  6. Create a listener to detect whenever the browser resizes and call our scrubberResize function.
  7. Read the image paths from the URL GET requests.
  8. Place the images into our HTML.

Step 1 : Localizing variables

Since we are going to be using more than one function, we want to make sure some of our variables are outside of the $(window).load() function.
Create a variables for the original height and width, and a new height and width. Set these variables to zero.

Inside the $(window).load() function, change:

to:

Step 2 : Create a scrubberResize function

Inside your <script> tags but outside your $(window).load() function insert the following:

Step 3 : Move CSS manipulating jQuery

Cut from the $(window).load() function the four jQuery CSS altering statements:

Now paste them into the new scubberResize function:

Add a call to the scrubberResize() function within the $(window).load() function:

We are now done with the $(window).load() function. The function should look like:

Step 4 : Detect Container’s Size

Since the buzzword today is “Responsive” design, we’ll now make it do just that. First we’ll need to know how large our container is. Inside the scrubberResize() function at the top, add these two lines:

This will set the width of our container to contW and the height to contH.

Step 5 : Maintain Aspect Ratio

To maintain the aspect ration we have to keep in mind two things; the size of the images, and the size of the container. We want to always maximize the image size within the container, yet not increase the image size beyond its original size, thereby creating pixel artifacts. There are four major conditions we will have to test for.

  • Both image Width and Height are smaller than the container.
  • The image Width but not the Height is smaller than the container.
  • The image Height but not the Width is smaller than the container.
  • Both image Width and Height are larger than the container.

Just below the contW and contH variable declarations add the following:

I know it looks confusing, but it works. There might be a bright boy out there that can simplify it even more. If so, leave a comment below. Nonetheless basically it reduces down to: If the image is too big, reduce the image size proportionally. Else leave the image at its original size.

Hey, we’re almost there!

Step 6 : Detect Browser Resize

If you ran the HTML at this point, the image would resize on the page reload. However we want it to resize when ever the user resizes their browser as well. Very easy. Just create a browser listener and then call the scrubberResize() function. Insert the following jQuery function inside the <script> tags:

Viola! Save, and run your HTML Document in your browser. Now reduce the size of your browser and watch the scrubber shrink and expand proportionally.

Optional

At this point we have a fully “Responsive” Before / After image Scrubber. However I want to take it to the next level and make it dynamic. To accomplish this, we will GET some extra information from the URL. Follow along, and I’ll explain how to use it at the end.

Step 7 : GET Image Paths from URL

To extract the information we need from the URL (assuming the user formats the GET request correctly) we need to do the following:

  • Simplify the call to the URL.
  • Isolate the “before” image’s path.
  • Isolate the “after image’s path.
  • Set the “before” and “after” image source to their respective paths.

At the top of the jQuery script, outside of any functions, insert the following:

Line 1: Stores access to the URL string in our shorter “loc” variable.
Line 2: Extracts the “before” image path from the URL that starts after the “before=” and ends at the “&” symbol.
Line 3: Extract the “after” image path from the URL that starts after the “after=” and ends at the end of the string.
Line 4: Sets the source of the “before” image to the path we extracted.
Line 5: Sets the source of the “after” image to the path we extracted.

Step 8 : Pass the Path

I’ve set up our Before / After image Scrubber to be able to sit in the cloud, able to be called from any location. As such, my intention and usage is to call the page from within an <iframe>. I’ll show you how I do it, you can modify to your needs.
From an external HTML document I call the above script as such:

That almost works, however some CSS needs to be set on the iframe. I’ve used inline styles to set the CSS in the code below:

To break it down, I’ve called my scrubber “scrubber.html”. Next I pass in the GET request before = “before.jpg” and after “after.jpg”. The “?” signifies that there is additional data from the page URL. The “&” separates the variable/value sets from other variable/value sets.
The styles make sure the images are positioned in the top left corner of the container. Then we make sure we use up all the available space by setting the Height and Width to 100%.

That’s it!

You now have a dynamic fully responsive Before / After image Scrubber. Place it in the cloud and call upon it through an <iframe> anywhere/anytime with the dynamic paths you send to the HTML document. I hope you learned something useful and would love to see your examples in use.

View Full Code...
Here is an example of a page calling the dynamic scrubber HTML.
View iFrame...
Posted in HTML, JavaScript, jQuery Tagged with: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*