FocalPoint

Beautiful responsive images

  Download   View project on Github

The FocalPoint component acts like a helper for displaying responsive images.

FocalPoint is inspired in this awesome project on Github from Adam Bradley. You can read more about focal points in the project docs or in this article. I think reading these links give an overview of what this technique is for.

In general, when we use this component, we divide the image in a virtual grid of 12x12 as shown below.

the focal point grid

In the picture, you can see that the image is focusing 3-cell up and 3 to the right. The focal point emphasize the man's face when the image is displayed on small screen sizes and as we increase the size of the image will be displayed complete.

When using this component, you have to specify the offset defining the focal point on the image always starting from the middle of the grid. For example, you can set the offset using top-6 and right-6 CSS classes in order to crop the image to the top-right corner. Same using down-6 left-6 for the bottom-left corner. It's really easy to use.

The following image represents how to set the focal point to top-2 right-2 focusing in the important part of it ;)

focal point working

Now, resize your browser window to see how the image above set it's focus at the specified point on smaller screen sizes.

And now, being in a smaller screen size under 768px, click the following button to set the focal point off and see the difference.

Set focal points on images above to off

You can play with this component in the playground below using the provided images or your own ones.

Hey !!

This is not server-side technology!! ... so the image sizes on page load will be the same as the original ones. If your problem is bandwidth and serving responsive images in differents sizes then this is not your component. The only way for doing that is using server side technology, multiple images with a plugin or any specialized cloud service.


Said that, you can use this component in a lot of places for displaying your images pretty, because i'm sure you are not using several different sized images in all your sites ;)

Pretty easy ... you are going to need the image tag (With id or class if you want to select it using css selectors) and it's done.

<img id="optional id" class="optional class" src="yourImage" alt="your image description" />

Constructor

Stashy.FocalPoint(selector)
Parameter Type Description
selector string CSS selector. Select images for being cropped on smaller screen sizes. If you leave the selector blank, by default FocalPoint is going to take all <img /> tags in the page.

Methods

Name Description
on(pointA,pointB) Initializes FocalPoint. Using the selector passed in the constructor, this method will crop all the images matching it with the points specified in the parameters

pointA and pointB may be set up with these class names:

  "up-1" to "up-6". Up offset from center virtual grid

  "down-1" to "down-6". Down offset from center virtual grid

  "left-1" to "left-6". Left offset from center virtual grid

  "right-1" to "right-6". Right offset from center virtual grid

update(pointA,pointB) Update FocalPoint images with new points specified in the parameters

pointA and pointB may be setted up with these values:

  "up-1" to "up-6". Up offset from center virtual grid

  "down-1" to "down-6". Down offset from center virtual grid

  "left-1" to "left-6". Left offset from center virtual grid

  "right-1" to "right-6". Right offset from center virtual grid

off() Restarts image to the original state.

Hey !!

If you don't set the points, then the image will be cropped using the center point of the grid.

Sample

var fp = Stashy.FocalPoint("selector");
fp.on("up-3","right-3");
fp.update("down-3","left-3");
fp.off();

Select different focal points for the images

Play!! with this dangerous tiger by trying to focus his head
on update off
image-1
Play!! with this lot of people. When setting the focal point and resizing, you will see a couple of them dissapear
on update off
image
Portrait!! images will be detected and different set of CSS classes will be applied
on update off
image
Custom!! image. Enter any url representing an image and play with it
on update off
custom image

less

For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:

Stashy.Variables.less Stashy.Mixins.less Stashy.FocalPoint.less

JS

jQuery.js Stashy.FocalPoint.js