Awesome

English description | <a href="readme.ru.md">Описание на русском</a>

Easy and light image lightbox for small galleries.

• Version: 1.2.0
• <a href="http://ionden.com/a/plugins/ion.zoom/en.html">Project page and demos</a>
• <a href="http://ionden.com/a/plugins/ion.zoom/ion.zoom-1.2.zip">Download ZIP</a>

Description

• ion.zoom — easy image lightbox jQuery plugin for small galleries. Allow to zoom images at place.<br />
• Supports keyboard controls with ESC, LEFT and RIGHT button.<br />
• Supports multiple independently operating galleries in one page.<br />
• Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)<br />
• Works on touch screen devices (iPhone, iPad, etc.).<br />
• Ion.Zoom is freely distributed under <a href="http://ionden.com/a/plugins/licence-en.html" target="_blank">MIT licence</a>.

Dependencies

• <a href="http://jquery.com/" target="_blank">jQuery 1.9+</a>

Using script

Import this libraries:

• jQuery
• ion.zoom.min.js

And CSS:

• normalize.min.css - desirable if you have not yet connected one
• ion.zoom.css

Create gallery:

<a href="static/img/zoom/zoom-big-01.jpg" class="gallery_1"><img src="static/img/zoom/zoom-small-01.jpg" alt="" /></a>
<a href="static/img/zoom/zoom-big-02.jpg" class="gallery_1"><img src="static/img/zoom/zoom-small-02.jpg" alt="" /></a>
<a href="static/img/zoom/zoom-big-03.jpg" class="gallery_1"><img src="static/img/zoom/zoom-small-03.jpg" alt="" /></a>

Initialize gallery:

$(".gallery_1").ionZoom();

Or initialize gallery with custom settings:

$(".gallery_2").ionZoom({
    visibleControls: false                      // disable visible controls
});

Public methods:

Close gallery:

$(".gallery_1").ionZoom("close");

<a href="history.md">Update history</a>

Support Ion-series plugins development:

• Donate through Pledgie service:

• Donate direct to my Paypal account: https://www.paypal.me/IonDen

• Donate direct to my Yandex.Money account: http://yasobe.ru/na/razrabotku