Release v2.1.0

Author: makryl

README.md

@@ -2,7 +2,7 @@
 
 `ABigImage` is jQuery plugin for viewing big versions of images.
 
-Current version **2.0.1** (2016-06-07).
+Current version **2.1.0** (2017-01-15).
 
 <div class="colr">
     <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
@@ -13,23 +13,24 @@ Current version **2.0.1** (2016-06-07).
     </form>
 </div>
 
-* [abigimage.jquery.js](abigimage.jquery.js) (16.2 kB) [min](abigimage.jquery.min.js) (6.7 kB, gzipped 2.5 kB)
-* [abigimage.jquery.css](abigimage.jquery.css) (2.6 kB) [min](abigimage.jquery.min.css) (1.5 kB, gzipped 550 bytes)
+* [abigimage.jquery.js](abigimage.jquery.js) (26.9 kB) [min](abigimage.jquery.min.js) (10.2 kB, gzipped 3.6 kB)
+* [abigimage.jquery.css](abigimage.jquery.css) (6 kB) [min](abigimage.jquery.min.css) (3.1 kB, gzipped 802 bytes)
 * Fork at [Github](https://github.com/makryl/ABigImage)
 
 ## Features
 
 - Fit mobile devices.
 - Uses CSS3 transform and transition for smooth touch sliding.
 - Touch slide left or right opens next or previous image, touch slide up or down closes image.
-- Multi-touch and double-tap zoom.
+- Multi-touch and double-tap zoom, zoom out closes image.
 - Clicking image opens next one, clicking left side opens previous, clicking right side closes image.
 - Hotkeys for next, previous and close buttons.
 - Closing after viewing of all images.
 - Preloading of next and previous images.
+- Images counter.
 - Uses link's `href` or `data-href` attribute for large images.
 - Fully customizable styles.
-- Customizable bottom area.
+- Customizable, scrolling down bottom area.
 - Customizable `onopen` and `onclose` event.
 
 <!-- Example -->
@@ -66,19 +67,23 @@ $(function(){
 
 ### Options
 
-- `fadeIn` - fade in duration or [options](http://api.jquery.com/fadein/) (default: `fast`).
-- `fadeOut` - fade out duration or [options](http://api.jquery.com/fadeout/) (default: `fast`).
+- `duration` - effects duration (default: `200`).
 - `slideWidth` - slide width to switch or close image (between 0 and 1, default: 0.4).
 - `slideVelocity` - slide velocity to switch or close image (pixels per millisecond, default: 0.4).
 - `zoomMin` - minimal zoom that will hold (default: 1.5).
 - `zoomMax` - maximal zoom (default: 5).
-- `zoomScrollMultiplier` - how much zoom on mouse scroll (default: 1.25).
+- `zoomClose` - zoom that will close image (default: 0.9).
+- `zoomMoveViewport` - area for mouse moving when zoomed (default: 0.9).
+- `zoomVelocity` - zoom velocity on scroll or press button (pixels per millisecond, default: .04).
 - `doubleTapInterval` - zoom double-tap interval (milliseconds, default: 400).
 - `prevBtnHtml` - html of "previous" button (default: `&larr;`).
-- `closeBtnHtml` - html of "close" button (default: `x`).
+- `nextBtnHtml` - html of "next" button (default: `&rarr;`).
+- `zoomInBtnHtml` - html of "zoom in" button (default: `&plus;`).
+- `zoomOutBtnHtml` - html of "zoom out" button (default: `&minus;`).
+- `closeBtnHtml` - html of "close" button (default: `&times;`).
 - `keyNext` - hotkeys for "next" button (default: 13 enter, 32 space, 39 right, 40 down).
 - `keyPrev` - hotkeys for "previous" button (default: 8 backspace, 37 left, 38 up).
-- `keyNext` - hotkeys for "close" button (default: 27 escape, 35 end, 36 home).
+- `keyClose` - hotkeys for "close" button (default: 27 escape, 35 end, 36 home).
 - `onopen` - function called when image opens.
 - `onclose` - function called when image closes.
 
@@ -87,18 +92,28 @@ To change styles use CSS classes of plugin's elements:
 ```html
 <div class="abigimage-overlay"></div>
 <div class="abigimage-layout">
-    <div class="abigimage-box">
-        <!-- prevBtnBox (clickable behind the image, width 50%) -->
-        <div class="abigimage-prevBtnBox"></div>
-        <!-- closeBtnBox (clickable behind the image, width 50%) -->
-        <div class="abigimage-closeBtnBox"></div>
-        <img class="abigimage-img">
-        <img class="abigimage-imgNext">
-        <img class="abigimage-imgPrev">
+    <div class="abigimage-wrapper">
+        <div class="abigimage-box">
+            <!-- prevBtnBox - clickable behind the image, width 50% -->
+            <div class="abigimage-prevBtnBox"></div>
+            <!-- closeBtnBox - clickable behind the image, width 50% -->
+            <div class="abigimage-closeBtnBox"></div>
+            <img class="abigimage-img">
+            <img class="abigimage-imgNext">
+            <img class="abigimage-imgPrev">
+        </div>
+    </div>
+    <div class="abigimage-top">
+        <div class="abigimage-prevBtn"><!-- prevBtnHtml --></div>
+        <div class="abigimage-nextBtn"><!-- nextBtnHtml --></div>
+        <div class="abigimage-counter"></div>
+        <div class="abigimage-closeBtn"><!-- closeBtnHtml --></div>
+        <div class="abigimage-zoomOutBtn"><!-- zoomOutBtnHtml --></div>
+        <div class="abigimage-zoomInBtn"><!-- zoomInBtnHtml --></div>
+    </div>
+    <div class="abigimage-bottomBox">
+        <div class="abigimage-bottom"></div>
     </div>
-    <div class="abigimage-prevBtn"><!-- prevBtnHtml --></div>
-    <div class="abigimage-closeBtn"><!-- closeBtnHtml --></div>
-    <div class="abigimage-bottom"></div>
 </div>
 ```
 
@@ -110,7 +125,10 @@ Function, defined as `onopen` handler, executes in context of plugin, and receiv
 $('a[href$=".jpg"]').abigimage({
     onopen: function (target) {
         this.bottom.html(
-            $('img', target).attr('alt')
+            /* bottom caption */
+            $('img', target).attr('alt') +
+            /* custom bottom area */
+            ($('span', target).html() || '')
         );
     }
 });
@@ -168,8 +186,8 @@ $.abigimage.unbind($myimgs1);
 ```
 
 ## Changes
-
-- **2.1.0** - improved zoom positioning, added mouse scroll zoom, fixed prevention of non-plugin's hotkeys.
+ 
+- **2.1.0** - improved animations for not fully loaded images, improved zoom positioning, added mouse scroll zoom, added scrolling down bottom area, added zoom out closing, added next and zoom buttons, added loading spinner, added images counter, fixed prevention of non-plugin's hotkeys.
 - **2.0.0** - fixed multiple plugin instances context, added double-tap zoom, optimized touch event handlers, styles moved to CSS file, license changed to MIT.
 - **1.3.1** - fixed image caching, added `unbind` method.