Skip to content

Latest commit

 

History

History
128 lines (92 loc) · 4.56 KB

readme.md

File metadata and controls

128 lines (92 loc) · 4.56 KB

Ion.Zoom 1.2

English description

Easy and light image lightbox. Project page and demos

Download: ion.zoom-1.2.zip

Description

ion.zoom — easy image lightbox jQuery plugin for small galleries. Allow to zoom images at place.
Supports keyboard controls with ESC, LEFT and RIGHT button.
Supports multiple independently operating galleries in one page.
Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
Works on touch screen devices (iPhone, iPad, etc.).
Ion.Zoom is freely distributed under MIT licence.

Dependencies

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");

Update history

  • 08.06.2013 - v1.2: visual controls, multiple galleries, public methods, code optimisations


***

Описание на русском

Удобный легкий слайдер диапазонов. Страница проекта и демо

Скачать: ion.rangeSlider-1.2.zip

Описание

ion.zoom — быстрый и легкий лайтбокс плагин для небольших галерей. Позволяет увеличивать картинки на месте.
Помимо управления мышью поддерживает так же управление с клавиатуры с помощью клавиш ESC, LEFT и RIGHT.
Поддерживает несколько независимо работающих галерей на одной странице.
Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
Плагин поддерживает устройства с touch-экраном (iPhone, iPad, etc.).
Ion.Zoom свободно распространяется на условиях лицензии MIT.

Зависимости

Подключение

Подключаем библиотеки:

  • jQuery
  • ion.zoom.min.js

И CSS:

  • normalize.min.css - желательно, если он у вас еще не подключен
  • ion.zoom.css

Создаем галерею:

<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>

Инициализируем галерею:

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

Или инициализируем галерею с настройками:

$(".gallery_2").ionZoom({
    visibleControls: false                      // отключить визуальные элементы управления
});

Публичные методы:

Закрыть галерею:

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

Update history

  • 08.06.2013 - v1.2: визуальыне элементы управления, несколько галерей на странице, публичные методы, оптимизация кода