FocalPoint

A simple jQuery plugin that keeps a point of an image within the container when it is resized.

Usage

<!-- markup -->
<div id="fPoint_1" class="container">
    <img src="sample.jpg" alt="">
</div>

/* css */
.container
{
    max-width: 1200px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

// js
$("selector").FocalPoint(options);

Options

x {int} default undefined: default will assume horizontal center of the image. Pass a value starting at 0 from the left edge of the image (eg: 840).

y {int} default undefined: default will assume vertical center of the image. Pass a value starting at 0 from teh top edge of the image (eg: 300).

animate {bool} default true: whether to animate the repositioning of the image.

animateOnExpand {bool} default false: prevents animation when the container is expanded. Setting this to true will allow the image to animate when the container is expanded but there is a risk that there could be empty space between the edge of the image and container until the animation kicks in.

animateOptions {object} default {}: feel free to use any of normal jQuery .animate() options.