Skip to content

Commit 658c315

Browse files
committed
Updated ReadMe
1 parent d57bc38 commit 658c315

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

README.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22

33
## Intelligent cropping for flexible image containers
44

5+
![image](demos/img/demo.jpg?raw=true)
6+
57
Websites don't have a single layout any more. The space you have for an image may be portrait on a laptop, landscape on a tablet, and square on a mobile - particularly if you're using a full-screen image.
68

7-
![image](demos/img/demo.jpg?raw=true)
9+
If you have to use the same image file in all these contexts, you might not be happy with the results you get when you 'fill' the allocated space with your image. Your subject might be clipped or completely missing, or just really awkward looking.
810

911
FocusPoint makes sure your image looks great in any container, by ensuring the 'spare' parts of your image (negative space) are cropped out before the important parts.
1012

@@ -28,23 +30,23 @@ FocusPoint requires you to indicate where this focal point is located within you
2830

2931
## How to use
3032

31-
#### Calculate your image's focus point
33+
#### 1. Calculate your image's focus point
3234

33-
An image's **focus point** is made up of x (horizontal) and y (vertical) coordinates. The value of a coordinate can be a number with decimal points anywhere between -1 and +1, where 0 is the centre. X:-1 indicates the left edge of the image, x:1 the right edge. For the y axis, y:1 is the top edge and y:-1 is the bottom.
35+
An image's focus point is made up of x (horizontal) and y (vertical) coordinates. The value of a coordinate can be a number with decimal points anywhere between -1 and +1, where 0 is the centre. X:-1 indicates the left edge of the image, x:1 the right edge. For the y axis, y:1 is the top edge and y:-1 is the bottom.
3436

3537
![image](demos/img/grid.png?raw=true)
3638

37-
**Pretty confusing eh?** Don't worry, I've included a handy script to help you find the focus coordinates of an image with a single click. [See an example here](http://jonom.github.io/jquery-focuspoint/demos/helper/index.html).
39+
**Confused?** Don't worry, I've included a handy script to help you find the focus coordinates of an image with a single click. [See an example here](http://jonom.github.io/jquery-focuspoint/demos/helper/index.html).
3840

39-
#### Include javascript and CSS
41+
#### 2. Include javascript and CSS
4042

4143
You'll need to include jQuery, the FocusPoint script, and FocusPoint css file. Example:
4244

4345
<link rel="stylesheet" href="focuspoint.css">
4446
<script src="jquery.js"></script>
4547
<script src="focuspoint.js"></script>
4648

47-
#### Mark up image container
49+
#### 3. Mark up image container
4850

4951
Specify the image dimensions and focus point coordinates on the image container. Note: I know it shouldn't really be necessary to specify image dimensions but I've found this to be more reliable than reading the dimensions from the image. Example:
5052

@@ -56,7 +58,7 @@ Specify the image dimensions and focus point coordinates on the image container.
5658
<img src="image.jpg" alt="" />
5759
</div>
5860

59-
#### Fire FocusPoint plugin
61+
#### 4. Fire FocusPoint plugin
6062

6163
Usually the best place for this will be inside your `$(document).ready()` function.
6264

0 commit comments

Comments
 (0)