Released v0.2.0

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
 
+## 0.2.0 (Oct 18, 2015)
+
+- Added one new method: "moveTo"
+- Improved the image loading and showing.
+
+
 ## 0.1.1 (Oct 7, 2015)
 
 - Fixed the issue of modal closing after zoomed in and zoomed out.

README.md

@@ -1,8 +1,8 @@
-# [Image Viewer](https://github.com/fengyuanchen/viewer)
+# [Viewer](https://github.com/fengyuanchen/viewer)
 
 > A simple jQuery image viewing plugin.
 
-- [Demo](http://fengyuanchen.github.io/viewer)
+- [Demo](https://fengyuanchen.github.io/viewer)
 
 
 
@@ -64,7 +64,6 @@ Initialize with `$.fn.viewer` method.
 
 ```html
 <!-- a block container is required -->
-
 <div>
   <img class="image" src="picture.jpg" alt="Picture">
 </div>
@@ -389,15 +388,14 @@ View the next image.
 
 - **offsetX**:
   - Type: `Number`
-  - Default: `0`
   - Moving size (px) in the horizontal direction
 
 - **offsetY** (optional):
   - Type: `Number`
   - Moving size (px) in the vertical direction.
   - If not present, its default value is `offsetX`
 
-Move the image.
+Move the image with relative offsets.
 
 ```js
 $().viewer('move', 1);
@@ -408,6 +406,20 @@ $().viewer('move', 0, 1);  // Move down
 ```
 
 
+### moveTo(x[, y])
+
+- **x**:
+  - Type: `Number`
+  - The `left` value of the image
+
+- **y** (optional):
+  - Type: `Number`
+  - The `top` value of the image
+  - If not present, its default value is `x`.
+
+Move the image to an absolute point.
+
+
 ### zoom(ratio[, hasTooltip])
 
 - **ratio**:
@@ -420,7 +432,7 @@ $().viewer('move', 0, 1);  // Move down
   - Default: `false`
   - Show tooltip
 
-Zoom the image.
+Zoom the image with a relative ratio
 
 ```js
 $().viewer('zoom', 0.1);
@@ -439,7 +451,7 @@ $().viewer('zoom', -0.1);
   - Default: `false`
   - Show tooltip
 
-Zoom the image to a special ratio.
+Zoom the image to an absolute ratio.
 
 ```js
 $().viewer('zoomTo', 0); // Zoom to zero size (0%)
@@ -454,7 +466,7 @@ $().viewer('zoomTo', 1); // Zoom to natural size (100%)
   - Rotate right: requires a positive number (degree > 0)
   - Rotate left: requires a negative number (degree < 0)
 
-Rotate the image.
+Rotate the image with a relative degree.
 
 > Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+).
 
@@ -469,7 +481,7 @@ $().viewer('rotate', -90);
 - **degree**:
   - Type: `Number`
 
-Rotate the image to a special angle.
+Rotate the image to an absolute degree.
 
 > Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+).
 

demo/js/main.js

@@ -47,7 +47,7 @@ $(function () {
 
     options[name] = name === 'inline' ? $input.data('value') : $input.prop('checked');
     $images.viewer('destroy').viewer(options);
-    toggleButtons(name);
+    toggleButtons(options.inline ? 'inline' : 'modal');
   });
 
   $buttons.on('click', 'button', function () {

dist/viewer.css

@@ -1,11 +1,11 @@
 /*!
- * Viewer v0.1.1
+ * Viewer v0.2.0
  * https://github.com/fengyuanchen/viewer
  *
  * Copyright (c) 2015 Fengyuan Chen
  * Released under the MIT license
  *
- * Date: 2015-10-07T06:34:31.370Z
+ * Date: 2015-10-18T11:12:55.720Z
  */
 .viewer-zoom-in:before,
 .viewer-zoom-out:before,
@@ -136,7 +136,7 @@
   width: 100%;
   min-width: 0 !important;
   max-width: none !important;
-  height: 100%;
+  height: auto;
   min-height: 0 !important;
   max-height: none !important;
 }
@@ -149,6 +149,12 @@
   left: 0;
   overflow: hidden;
 }
+.viewer-canvas > img {
+  width: auto;
+  max-width: 90% !important;
+  height: auto;
+  margin: 15px auto;
+}
 
 .viewer-footer {
   position: absolute;