Minimal jQuery Image Viewer with Image Preloading - ABigImage

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.