search

jonom / jquery-focuspoint

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.
Other
3.14k stars 211 forks source link

Using the <picture> element and focuspoint #42

Closed gpartington closed 9 years ago

gpartington commented 9 years ago

'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?

jonom commented 9 years ago

Hi, what's the library you're using exactly? I haven't tried this with the picture element but it should work okay, however if you're loading images that are cropped differently you would have to adjust the focuspoint data on the shell and then call adjustfocus() to reposition the image appropriately.

jonom commented 9 years ago

The Picture element supports art direction on its own so I don't think it should be used with focuspoint.

aubricus commented 6 years ago

A bit of a necro-post, but stumbled on this issue when I became interested to see if v1 works against the picture element.

I disagree that FocusPoint is rendered useless when applied to the picture element; especially for a fluid, full-width element where creating renditions for every possible width is impractical.

I created this gist that outlines my quick-and-dirty solution to this.

It relies on injecting new values via plugin's / jquery's data API when the media query changes. A little hacky for my taste but it gets the job done. I hope it's helpful to anyone who may need to do something similar.