Release v0.3.0

Author: Fengyuan Chen

CHANGELOG.md

@@ -1,15 +1,24 @@
 # Changelog
 
 
+## 0.3.0 (Dec 24, 2015)
+
+- Add 2 new options: "view" and "viewed"
+- Add 2 new events: "view" and "viewed"
+- Add keyboard support: stop playing when tap the `Space` key
+- Fix lost transition after call full method in inline mode
+- Fix incorrect tooltip after switch image quickly
+
+
 ## 0.2.0 (Oct 18, 2015)
 
 - Added one new method: "moveTo"
-- Improved the image loading and showing.
+- Improved the image loading and showing
 
 
 ## 0.1.1 (Oct 7, 2015)
 
-- Fixed the issue of modal closing after zoomed in and zoomed out.
+- Fixed the issue of modal closing after zoomed in and zoomed out
 
 
 ## 0.1.0 (Sep 2, 2015)

README.md

@@ -1,8 +1,26 @@
-# [Viewer](https://github.com/fengyuanchen/viewer)
+# Viewer
 
 > A simple jQuery image viewing plugin.
 
-- [Demo](http://fengyuanchen.github.io/viewer)
+- [Homepage](http://fengyuanchen.github.io/viewer)
+- [Viewer without jQuery](https://github.com/fengyuanchen/viewerjs)
+
+
+
+## Table of contents
+
+  - [Features](#features)
+  - [Main](#main)
+  - [Getting started](#getting-started)
+  - [Keyboard support](#keyboard-support)
+  - [Options](#options)
+  - [Methods](#methods)
+  - [Events](#events)
+  - [No conflict](#no-conflict)
+  - [Browser support](#browser-support)
+  - [Contributing](#contributing)
+  - [Versioning](#versioning)
+  - [License](#license)
 
 
 
@@ -27,7 +45,7 @@
 dist/
 ├── viewer.css     ( 8 KB)
 ├── viewer.min.css ( 7 KB)
-├── viewer.js      (44 KB)
+├── viewer.js      (45 KB)
 └── viewer.min.js  (19 KB)
 ```
 
@@ -92,6 +110,7 @@ $('.images').viewer();
 > Only available in modal mode.
 
 - `Esc`: Exit full screen or stop play.
+- `Space`: Stop play.
 - `←`: View the previous image.
 - `→`: View the next image.
 - `↑`: Zoom in the image.
@@ -100,6 +119,9 @@ $('.images').viewer();
 - `Ctrl + 1`: Zoom in to natural size.
 
 
+[⬆ back to top](#table-of-contents)
+
+
 
 ## Options
 
@@ -322,25 +344,44 @@ A shortcut of the "hide.viewer" event.
 A shortcut of the "hidden.viewer" event.
 
 
+### view
+
+- Type: `Function`
+- Default: `null`
+
+A shortcut of the "view.viewer" event.
+
+
+### viewed
+
+- Type: `Function`
+- Default: `null`
+
+A shortcut of the "viewed.viewer" event.
+
+
+[⬆ back to top](#table-of-contents)
+
+
 
 ## Methods
 
-As there is an **asynchronous** process when load the image(s), you **should call most of the methods after shown (modal mode) or built (inline mode)**, except "show" (modal mode) and "destroy".
+As there are some **asynchronous** processes when start the viewer, you should call a method only when it is available, see the following **lifecycle**:
 
 ```js
-// Modal mode
 $().viewer({
+  built: function () {
+    // 2 methods are available here: "show" and "destroy".
+  },
   shown: function () {
-    $().viewer('method', argument1, , argument2, ..., argumentN);
+    // 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy".
+  },
+  viewed: function () {
+    // All methods are available here except "show".
+    $(this).viewer('rotate', 90).viewer('scale', -1, -1);
   }
 }
 
-// Inline mode
-$().viewer({
-  built: function () {
-    $().viewer('method', argument1, , argument2, ..., argumentN);
-  }
-}
 ```
 
 
@@ -468,7 +509,7 @@ $().viewer('zoomTo', 1); // Zoom to natural size (100%)
 
 Rotate the image with a relative degree.
 
-> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+).
+> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
 
 ```js
 $().viewer('rotate', 90);
@@ -483,7 +524,7 @@ $().viewer('rotate', -90);
 
 Rotate the image to an absolute degree.
 
-> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+).
+> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
 
 ```js
 $().viewer('rotateTo', 0); // Reset to zero degree
@@ -506,7 +547,7 @@ $().viewer('rotateTo', 360); // Rotate a full round
 
 Scale the image.
 
-> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+).
+> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
 
 ```js
 $().viewer('scale', -1); // Flip both horizontal and vertical
@@ -524,7 +565,7 @@ $().viewer('scale', 1, -1); // Flip vertical
 
 Scale the abscissa of the image.
 
-> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+).
+> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
 
 ```js
 $().viewer('scaleX', -1); // Flip horizontal
@@ -541,7 +582,7 @@ $().viewer('scaleX', -1); // Flip horizontal
 
 Scale the ordinate of the image.
 
-> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+).
+> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
 
 ```js
 $().viewer('scaleY', -1); // Flip vertical
@@ -562,14 +603,14 @@ Stop play.
 
 Enter modal mode.
 
-> only available in inline mode.
+> Only available in inline mode.
 
 
 ### exit()
 
 Exit  modal mode.
 
-> only available in inline mode.
+> Only available in inline mode.
 
 
 ### tooltip()
@@ -594,12 +635,15 @@ Reset the image to its initial state.
 Destroy the viewer and remove the instance.
 
 
+[⬆ back to top](#table-of-contents)
+
+
 
 ## Events
 
 ### build.viewer
 
-This event fires when a viewer instance start to build.
+This event fires when a viewer instance starts to build.
 
 
 ### built.viewer
@@ -609,30 +653,43 @@ This event fires when a viewer instance has built.
 
 ### show.viewer
 
-This event fires when a viewer element start to show.
+This event fires when the viewer modal starts to show.
 
-> only available in modal mode.
+> Only available in modal mode.
 
 
 ### shown.viewer
 
-This event fires when a viewer element has shown.
+This event fires when the viewer modal has shown.
 
-> only available in modal mode.
+> Only available in modal mode.
 
 
 ### hide.viewer
 
-This event fires when a viewer element start to hide.
+This event fires when the viewer modal starts to hide.
 
-> only available in modal mode.
+> Only available in modal mode.
 
 
 ### hidden.viewer
 
-This event fires when a viewer element has hidden.
+This event fires when the viewer modal has hidden.
+
+> Only available in modal mode.
+
+
+### view.viewer
 
-> only available in modal mode.
+This event fires when a viewer starts to show (view) an image.
+
+
+### viewed.viewer
+
+This event fires when a viewer has shown (viewed) an image.
+
+
+[⬆ back to top](#table-of-contents)
 
 
 
@@ -651,6 +708,12 @@ If you have to use other plugin with the same namespace, just call the `$.fn.vie
 
 
 
+## Contributing
+
+Please read through our [contributing guidelines](CONTRIBUTING.md).
+
+
+
 ## Browser support
 
 - Chrome (latest 2)
@@ -672,3 +735,6 @@ Maintained under the [Semantic Versioning guidelines](http://semver.org/).
 ## License
 
 [MIT](http://opensource.org/licenses/MIT) © [Fengyuan Chen](http://chenfengyuan.com)
+
+
+[⬆ back to top](#table-of-contents)

demo/css/main.css

@@ -1,6 +1,3 @@
-/* Basic style
- * -------------------------------------------------------------------------- */
-
 /* Header */
 
 .docs-header {

demo/js/main.js

@@ -6,18 +6,33 @@ $(function () {
   var $images = $('.docs-pictures');
   var $toggles = $('.docs-toggles');
   var $buttons = $('.docs-buttons');
-  var handler = function (e) {
-        console.log(e.type);
-      };
   var options = {
         // inline: true,
         url: 'data-original',
-        build: handler,
-        built: handler,
-        show: handler,
-        shown: handler,
-        hide: handler,
-        hidden: handler
+        build: function (e) {
+          console.log(e.type);
+        },
+        built: function (e) {
+          console.log(e.type);
+        },
+        show: function (e) {
+          console.log(e.type);
+        },
+        shown: function (e) {
+          console.log(e.type);
+        },
+        hide: function (e) {
+          console.log(e.type);
+        },
+        hidden: function (e) {
+          console.log(e.type);
+        },
+        view: function (e) {
+          console.log(e.type);
+        },
+        viewed: function (e) {
+          console.log(e.type);
+        }
       };
 
   function toggleButtons(mode) {
@@ -31,12 +46,30 @@ $(function () {
   }
 
   $images.on({
-    'build.viewer': handler,
-    'built.viewer': handler,
-    'show.viewer': handler,
-    'shown.viewer': handler,
-    'hide.viewer': handler,
-    'hidden.viewer': handler
+    'build.viewer': function (e) {
+      console.log(e.type);
+    },
+    'built.viewer':  function (e) {
+      console.log(e.type);
+    },
+    'show.viewer':  function (e) {
+      console.log(e.type);
+    },
+    'shown.viewer':  function (e) {
+      console.log(e.type);
+    },
+    'hide.viewer':  function (e) {
+      console.log(e.type);
+    },
+    'hidden.viewer': function (e) {
+      console.log(e.type);
+    },
+    'view.viewer':  function (e) {
+      console.log(e.type);
+    },
+    'viewed.viewer': function (e) {
+      console.log(e.type);
+    }
   }).viewer(options);
 
   toggleButtons(options.inline ? 'inline' : 'modal');