Minor tidy up for 1.0.2

README.md

@@ -50,7 +50,7 @@ You'll need to include jQuery (v1.9 or greater), the FocusPoint script, and Focu
 
 #### 3. Mark up your image container
 
-Specify the image dimensions and focus point coordinates on the image container. The image will take up whatever space is available in the container, so make sure there is some space to fill by setting a height for the container in your CSS. 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:
+Specify the image dimensions and focus point coordinates on the image container. The image will take up whatever space is available in the container, so make sure there is some space to fill by setting a height for the container in your CSS. Example:
 
 ```html
 <div class="focuspoint"
@@ -62,6 +62,8 @@ data-image-h="300">
 </div>
 ```
 
+Note: setting `data-image-w` and `data-image-h` is optional but recommended. Ommiting these value means your image will not be positined correctly inside the frame until it has finished loading, which may cause a visible jump.
+
 #### 4. Fire FocusPoint plugin
 
 Usually the best place for this will be inside your `$(document).ready()` function.
@@ -109,6 +111,8 @@ If FocusPoint helped you impress a client and you want to say thanks, you're wel
 
 ## Changelog
 
+#### v1.0.2 2014-09-05
+Made setting image width and height on shell optional
 #### v1.0.1 2014-09-04
 Cleaned up variables
 #### v1.0.0 2014-08-19

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-focuspoint",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "homepage": "https://github.com/jonom/jquery-focuspoint",
   "authors": [
     "Jonathon Menz"

demos/css-js-comparison/index.html

@@ -55,7 +55,7 @@ <h4><span>Original</span></h4>
 			<p><b>Try resizing the window.</b> Watch how the frames change to use all of 
 			the available space while preserving the focus of the image.
 			The left frame uses FocusPoint to control the crop, while the right frame uses only CSS.
-			<a href="https://github.com/jonom/jquery-focuspoint">» Project Home</a></p>
+			<a href="https://github.com/jonom/jquery-focuspoint">» Project&nbsp;Home</a></p>
 		</div>
 
 	</body>

demos/full-screen/index.html

@@ -40,7 +40,7 @@
 			<img src="../img/lizard.jpg" alt="" />
 		</div>
 
-		<a href="https://github.com/jonom/jquery-focuspoint">» Project Home</a>
+		<a href="https://github.com/jonom/jquery-focuspoint">» Project&nbsp;Home</a>
 
 	</body>
 </html>

demos/grid/bird.html

@@ -36,7 +36,9 @@
 
 			<div id="Frame1" class="focuspoint"
 			data-focus-x="0.29"
-			data-focus-y="-0.284">
+			data-focus-y="-0.284"
+			data-image-w="667"
+			data-image-h="1000">
 				<img src="../img/bird.jpg" alt="" />
 			</div>
 
@@ -111,7 +113,7 @@
 				<img src="../img/bird.jpg" alt="" />
 				<h4><span>Original</span></h4>
 			</div>
-			<p><b>Try resizing the window.</b> Watch how the frames change to use all of the available space while preserving the focus of the image. <a href="https://github.com/jonom/jquery-focuspoint">» Project Home</a></p>
+			<p><b>Try resizing the window.</b> Watch how the frames change to use all of the available space while preserving the focus of the image. <a href="https://github.com/jonom/jquery-focuspoint">» Project&nbsp;Home</a></p>
 		</div>
 
 	</body>

demos/grid/dolphin.html

@@ -119,7 +119,7 @@
 				<img src="../img/dolphin.jpg" alt="" />
 				<h4><span>Original</span></h4>
 			</div>
-			<p><b>Try resizing the window.</b> Watch how the frames change to use all of the available space while preserving the focus of the image. <a href="https://github.com/jonom/jquery-focuspoint">» Project Home</a></p>
+			<p><b>Try resizing the window.</b> Watch how the frames change to use all of the available space while preserving the focus of the image. <a href="https://github.com/jonom/jquery-focuspoint">» Project&nbsp;Home</a></p>
 		</div>
 
 	</body>

demos/grid/kangaroo.html

@@ -119,7 +119,7 @@
 				<img src="../img/kangaroo.jpg" alt="" />
 				<h4><span>Original</span></h4>
 			</div>
-			<p><b>Try resizing the window.</b> Watch how the frames change to use all of the available space while preserving the focus of the image. <a href="https://github.com/jonom/jquery-focuspoint">» Project Home</a></p>
+			<p><b>Try resizing the window.</b> Watch how the frames change to use all of the available space while preserving the focus of the image. <a href="https://github.com/jonom/jquery-focuspoint">» Project&nbsp;Home</a></p>
 		</div>
 
 	</body>

demos/grid/lizard.html

@@ -113,7 +113,7 @@
 				<img src="../img/lizard.jpg" alt="" />
 				<h4><span>Original</span></h4>
 			</div>
-			<p><b>Try resizing the window.</b> Watch how the frames change to use all of the available space while preserving the focus of the image. <a href="https://github.com/jonom/jquery-focuspoint">» Project Home</a></p>
+			<p><b>Try resizing the window.</b> Watch how the frames change to use all of the available space while preserving the focus of the image. <a href="https://github.com/jonom/jquery-focuspoint">» Project&nbsp;Home</a></p>
 		</div>
 
 	</body>

focuspoint.jquery.json

@@ -13,15 +13,15 @@
         "focus",
         "focuspoint"
     ],
-    "version": "1.0.1",
+    "version": "1.0.2",
     "author": {
         "name": "Jonathon Menz",
         "url": "http://jonathonmenz.com"
     },
     "licenses": [
         {
             "type": "MIT",
-            "url": "https://github.com/jonom/jquery-focuspoint/blob/1.0.1/MIT-LICENSE.txt"
+            "url": "https://github.com/jonom/jquery-focuspoint/blob/1.0.2/MIT-LICENSE.txt"
         }
     ],
     "bugs": "https://github.com/jonom/jquery-focuspoint/issues",

js/jquery.focuspoint.js

@@ -1,14 +1,15 @@
-/*!
- * jQuery FocusPoint; version: 1.0.1
+/**
+ * jQuery FocusPoint; version: 1.0.2
  * Author: http://jonathonmenz.com
  * Source: https://github.com/jonom/jquery-focuspoint
  * Copyright (c) 2014 J. Menz; MIT License
+ * @preserve
  */
 ;
 (function($) {
 	$.fn.focusPoint = function(options) {
 		var settings = $.extend({
-			// These are the defaults.
+			//These are the defaults.
 			reCalcOnWindowResize: true
 		}, options);
 		return this.each(function() {
@@ -34,6 +35,8 @@
 				image,
 				imageW,
 				imageH,
+				self,
+				imageTmp,
 				wR,
 				hR,
 				hShift,
@@ -52,31 +55,24 @@
 				focusOffsetY,
 				yRemainder,
 				containerYRemainder;
-			//Adjust the focus of frame
+			//Collect dimensions
 			containerW = $(this).width();
 			containerH = $(this).height();
 			image = $(this).find('img').first();
 			imageW = $(this).data('imageW');
 			imageH = $(this).data('imageH');
-
+			//Get image dimensions if not set on container
 			if (!imageW || !imageH) {
-				var self = this,
-					imageTmp = new Image();
-
+				self = this;
+				imageTmp = new Image();
 				imageTmp.onload = function(){
-
 					$(self).data('imageW', this.width);
 					$(self).data('imageH', this.height);
-
-					$(self).adjustFocus();
+					$(self).adjustFocus(); //adjust once image is loaded - may cause a visible jump
 				};
-
 				imageTmp.src = image.attr('src');
-
-				return false;
+				return false; //Don't proceed right now, will try again once image has loaded
 			}
-
-
 			if (!(containerW > 0 && containerH > 0 && imageW > 0 && imageH > 0)) {
 				//Need dimensions to proceed
 				return false;
@@ -108,15 +104,17 @@
 				//Can't use width() as images may be display:none
 				scaledImageWidth = Math.floor(imageW / hR);
 				focusX = Math.floor(focusFactorX * scaledImageWidth);
-				//console.log('x'+focusX);
 				//Calculate difference beetween focus point and center
 				focusOffsetX = focusX - containerCenterX;
 				//Reduce offset if necessary so image remains filled
 				xRemainder = scaledImageWidth - focusX;
 				containerXRemainder = containerW - containerCenterX;
-				if (xRemainder < containerXRemainder) focusOffsetX -= containerXRemainder - xRemainder;
-				if (focusOffsetX < 0) focusOffsetX = 0;
-				//console.log('x'+focusOffsetX);
+				if (xRemainder < containerXRemainder){
+					focusOffsetX -= containerXRemainder - xRemainder;
+				}
+				if (focusOffsetX < 0) {
+					focusOffsetX = 0;
+				}
 				//Shift to left
 				hShift = focusOffsetX * -1;
 			} else if (wR < hR) {
@@ -132,8 +130,12 @@
 				//Reduce offset if necessary so image remains filled
 				yRemainder = scaledImageHeight - focusY;
 				containerYRemainder = containerH - containerCenterY;
-				if (yRemainder < containerYRemainder) focusOffsetY -= containerYRemainder - yRemainder;
-				if (focusOffsetY < 0) focusOffsetY = 0;
+				if (yRemainder < containerYRemainder) {
+					focusOffsetY -= containerYRemainder - yRemainder;
+				}
+				if (focusOffsetY < 0) {
+					focusOffsetY = 0;
+				}
 				//Shift to top
 				vShift = focusOffsetY * -1;
 			}