Use FocusPoint. js to achieve responsive image cropping and focuspoint. js Cropping

Use FocusPoint. js to achieve responsive image cropping and focuspoint. js Cropping

Generally, the website layout is not single. For example, the shape displayed on a computer, tablet, or smartphone may be different. Especially if you are using a full-screen image, when you must use the same image file, your subject may be truncated or completely missing, or it may look embarrassing.

FocusPointJQueryThe plugin ensures that any container in your image looks great. It introduces the "response cropping" concept and ensures that important components of your image are cropped, dynamic image cropping is used to fill the available space without cropping the topic of the image.

 

 

Download demo source code

 

Usage: 1. Calculate the focal point of an image.

The focal point of an image is composed of X (horizontal) and Y (vertical) coordinates. The coordinate value can be any number in the range of-1 to + 1, with 0 as the center. X:-1 indicates the left border of the image. x: 1 indicates the right border of the image. For the y axis, y: 1 indicates the upper boundary of the image, and y: 1 indicates the lower boundary of the image.

<Link rel = "stylesheet" href = "focuspoint.css"> <script src = "jquery. js "> </script> <script src =" focuspoint. js "> </script>3. Mark the image container

Coordinates of the specified image size and image container focal point. Note: I know this does not really need to specify the image size, but I found this is more reliable than reading the size from the image. For example:

<div class="focuspoint"data-focus-x="0.331"data-focus-y="-0.224"data-image-w="400"data-image-h="300">    </div>

4. Call the FocusPoint plug-in

For basic calls, only one line of code is required:

$('.focuspoint').focusPoint();

Currently, there are not many available configuration options, but if you want to prevent the image from being re-focused when the window size changes, you can:

$('.focuspoint').focusPoint({    reCalcOnWindowResize : false});

At any time, you can call adjustFocus to re-focus the image:

$('.focuspoint').adjustFocus()

 

Demo GitHub Homepage

 

Articles you may be interested in

• 10 useful results in Web development [Source Code download]
• Excellent jQuery Ajax paging plug-ins and tutorials carefully selected
• 12 amazing creative 404 error page Designs
• Let the website get started! 12 excellent jQuery animation plug-ins
• Amazing 8 HTML5 & JavaScript Special Effects

 

Link to this article: FocusPoint. js-jQuery plug-in for responsive image Cropping

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

Source of this article [http://www.cnblogs.com/lhb25 /]