Minimal jQuery Image Viewer with Image Preloading - ABigImage
File Size: | 223 KB |
---|---|
Views Total: | 5556 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ABigImage is a simple and fast jQuery image gallery plugin that allows you to enlarge the images in a lightbox interface with next/pre navigation and image preloading functionality.
The plugin is under the MPL-2.0 licence.
Basic Usage:
1. Include the jQuery javascript library and jQuery ABigImage plugin in the head section of your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="abigimage.jquery.js"></script>
2. Insert a group of images in your page. Using <a>
tag's href
attribute to specify the large version of your image.
<a href="img/1-big.jpg" title="First image"><img src="img/1-small.jpg"></a> <a href="img/2-big.jpg" title="Second image"><img src="img/2-small.jpg"></a> <a href="img/3-big.jpg" title="Third image"><img src="img/3-small.jpg"></a> ...
3. Call the plugin with all the default options.
$(function() { $('a[href$=".jpg"]').abigimage(); });
4. Available options.
$('a[href$=".jpg"]').abigimage({ // effects duration duration: 200, // slide width to switch or close image (between 0 and 1). slideWidth: .4, // slide velocity to switch or close image (pixels per millisecond). slideVelocity: .4, // minimal zoom that will hold zoomMin: 1.5, // maximal zoom zoomMax: 5, // zoom that will close image zoomClose: .9, // area for mouse moving when zoomed zoomMoveViewport: .9, // zoom velocity on scroll or press button zoomVelocity: .04, // zoom double-tap interval doubleTapInterval: 400, // html of "previous" button. prevBtnHtml: '◄', // html of "close" button. closeBtnHtml: '✖', // html of "next" button nextBtnHtml: '→', // html of "zoom in" button zoomInBtnHtml: '+', // html of "zoom out" button zoomOutBtnHtml: '−', // html of "close" button closeBtnHtml: '×', keyNext: [13 /* enter */, 32 /* space */, 39 /* right */, 40 /* down */], keyPrev: [8 /* backspace */, 37 /* left */, 38 /* up */], keyClose: [27 /* escape */, 35 /* end */, 36 /* home */], // function called when image opens. onopen: function() {} , // function called when image closes. onclose: function() {} });
Change logs:
v2.1.1 (2018-01-20)
- 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.
v2.1.0 (2017-01-15)
- 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.
v2.0.1 (2016-06-08)
- improved zoom positioning, added mouse scroll zoom, fixed prevention of non-plugin's hotkeys.
v2.0.0 (2016-02-14)
- fixed multiple plugin instances context, added double-tap zoom, optimized touch event handlers, styles moved to CSS file, license changed to MIT.
v1.2.8 (2014-07-24)
- Multi-touch zoom fix
v1.2.4 (2014-03-10)
- add touch slides support.
v1.2.4 (2014-03-10)
- remove useless fade
v1.2.3 (2014-03-01)
- Default fade in speed: fast.
v1.2.1 (2014-02-21)
- add mobile devices support.
v1.1.1 (2014-01-24)
- fix option name: "nextBtnHtml" to "closeBtnHtml"
This awesome jQuery plugin is developed by makryl. For more Advanced Usages, please check the demo page or visit the official website.