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.