Hi Jono,

I refactored some stuff, maybe you wanna take a look :) I tested it on my computer within chrome and firefox. If you decide to merge please also test the code before.

xat

Replace

...
hShift = focusOffsetX * -1;
...
vShift = focusOffsetY * -1;
...
image.css('left', hShift + 'px');
image.css('top', vShift + 'px');

With

...
hShift = focusOffsetX * -100 / scaledImageWidth;
...
vShift = focusOffsetY * -100 / scaledImageHeight;
...
image.css('left', hShift + '%');
image.css('top', vShift + '%');

Or for the best performance, according to tweenlight: a combo of translate and translate3d

image.css('transform', 'translate(' + hShift + '%, ' + vShift + '%) translate3d(0, 0, 0)');

Using % intead of px will avoid to have to adjust the focus during a scaled resizing of the container such as perspective change.

Hi, fantastic project you have here. Thanks :)

I need to zoom automatically an image on load doing zoom out from the focal point. Is there a way to do this with focal point or thru jquery ?

Thanks, Jorge Correia

note that calling a callback directly on the resize event is considered a bad habit if major DOM calculations are to be made. This creates havoc (layout thrashing). more about this here: https://mattandre.ws/2014/05/really-fixing-layout-thrashing/

also, try not to write so much of var. only one single var on the top of the scope is the right way to go..

also, this is bad: image.css('left', hShift + 'px'); image.css('top', vShift + 'px');

better: image.css({left:hShift, top:vShift });

best: image[0].style.cssText = 'left:' + hShift + 'px;' + 'top:' + vShift + 'px;';

since going through jQuery to change the DOM is slower than changing it directly. and since you are doing these changes excessively on the resize event, performance considerations should take place.

see #28 9567f69 Looks simple no? However:

• The jQuery 'or' selector overhead for 'img, video' seems wasteful.
• It's of course intended only for video with no controls.
• There are platform issues with transform of videos, it should stick to the no transform path.

So it would probably best to implement that in some other way. Like using a different class (focuspoint-video) with different defaults

This is rather rough... To avoid adding dependencies, I added a transform parameter, where the proper prefixed name for the transform (or false) must be supplied outside of the code.

Also, the focusPoint settings where not available in the adjustFocus function, so I simply added them as parameters, I'm sure that's not a good jQuery pattern. Someone knowledgeable on jQuery plugin options and settings patterns better take a look at this.

But it is a proof of concept that the formula is good...

Note that the transform % are expressed in relation to the image size while the left/top % are expressed in relation to the container size.

I noticed that the helper tool was outputting incorrect data attributes for width and height.

• "focus-w" -> "image-w"
• "focus-h" -> "image-h"

Have you thought about using this lib along with some other face detection libraries out there?
There is nude.js, jquery.facedetection and many others libraries and algorithms exist that can be used to detect the most important part of an image.
I think it would be a nice experiment/feature to use focuspoint to automatically focus to an important part of an image.
I personally had issues with "half shown faces" on certain resolutions on some of my projects, and I think that this combo might be a good solution.

At the moment, this extension has to generate an Image_Backend for every image render, even if the file generated exists on the filesystem.

If you look at core code, you can see the pattern used here:

public function Fit($width, $height)
    {
        $width = $this->castDimension($width, 'Width');
        $height = $this->castDimension($height, 'Height');
        // Item must be regenerated
        $variant = $this->variantName(__FUNCTION__, $width, $height);
        return $this->manipulateImage($variant, function (Image_Backend $backend) use ($width, $height) {
            // Check if image is already sized to the correct dimension
            $currentWidth = $backend->getWidth();
            $currentHeight = $backend->getHeight();
            if (!$currentWidth || !$currentHeight) {
                return null;
            }

However focuspoint extension calls getWidth() / getHeight() outside of a manipulateImage() wrapper.

//Only resize if necessary
        if ($image->isSize($width, $height) && !Config::inst()->get(DBFile::class, 'force_resample')) {
            return $image;
        } elseif ($cropData = $this->calculateCrop($width, $height, $imgW, $imgH)) {
            $variant = $image->variantName(__FUNCTION__, $width, $height, $cropData['CropAxis'], $cropData['CropOffset']);
            $cropped = $image->manipulateImage($variant, function (Image_Backend $backend) use ($width, $height, $cropData) {
                $img = null;

This means that rendering a page with lots of images is very slow, and has the potential to run out of memory, even if those images have already been generated.

Suggestion is to flip all code and ensure that we wrap all generators inside a manipulateImage()

'm trying to use the element for responsive images with JQuery Focuspoint. This works well on page load, and the image adjusts itself to the container. But when an additional image is loaded on resize the images focuspoint doesn't seems to change.

Is it possible to use these 2 libraries together?

Here is a first crack at a helper tool based on the pen I showed you and the grid you already have in the demo.

Features

• Provides jquery-focuspoint data attributes & CSS background-position in inputs for easy copy/paste.
• Input for pasting in your own image path to use in the demo - will update aforementioned fields accordingly.
• Added GreenSock GSAP for animation
• * Animated transition when you click on a new focuspoint
• * Animated Target Reticle
• Added new Image from unsplash.com (just so we have on in there without a reticle already on it).

Issues

• GSAP tweens get a little clunky - I think it probably has to do with calling .adjustFocus() so many times consecutively. Perhaps we should make a special method in focuspoint optimized for animation?

Let me know what you think!

I have 16:9 images that needs to be cropped 1:1 on an image grid. The problem is that the grid is responsive, so setting a height is not possible.

What I do in these cases is set the image as a background and a padding-top: 100% to the container. That creates a responsive square.

Now, if I don't set a height and just use padding-top, the container height is 0 so the plugin doesn't work. But if I change this:

var containerH = $el.height();

To this:

var containerH = $el.outerHeight();

Everything works as expected.

Is there any other way to solve my problem? That change might break something? I'm using v1.1.3.

Thanks, azeos.

This is an annoying request but I have to try. My company has an older version of JQuery (1.4.4) in the system that cannot be upgraded so your plugin doesn't work out of the box.

I've looked at a few alternatives like zepto.js but can't find one that works.

So I wondered if you had any suggestions other than the obvious (upgrade JQuery) which isn't possible. Maybe some plain JS that could be included or ripped from JQuery?

Great plugin! We will be using it in future projects but would love to use it on current ones.

Donate buttons have raised less than $100 in total, I would love to work on this project more often and get v2 out the door but time poor at the moment.

Ideas:

• Open Collective
• Patreon
• Charge a per-site license fee?

Anyone have an opinion on this?

Hey,

Just been testing this out on a new site and my image wrapper that I am calling focuspoint on has top and bottom padding. This padding seems to be interfering with Focuspoint and causing the focuspoint of the image to be much higher in the container area.

Is there a way to fix this without removing the padding? I can't set a static height to the container though.

Thankyou.

I have an issue with combining the bootstrap carousel slider with Focuspoint.

The first visible item in a bootstrap slideshow is displayed correctly. Every other image is hidden(through left: -...px).

It works when I call Focuspoint every time the slider slides but it's inconvenient. $('.carousel').bind 'slid.bs.carousel', (e)-> $('.focuspoint').focusPoint();

Any ideas on how to go about this?