readme.ru.md

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

jQuery слайдер изображений и лайтбокс с поддержкой скинов.

---

• Версия: 1.2.0
• Страница проекта и демо
• Скачать ZIP-архив

Описание

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

Зависимости

• jQuery 1.9+

Подключение

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

• jQuery
• ion.imageSlider.min.js

И CSS:

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

Не забываем про картинки скина:

• iis-skinName-skin-preloader.gif - прелоадер
• iis-skinName-skin-preloader.png - спрайт
• Либо воспользуйтесь вложенным в архив PSD файлом, и нарисуйте собственный скин
• Прелоадеры можно сгенерировать здесь

Создаем галерею в виде группы ссылок:

<div class="ion-image-slider" id="mySlider">
    <a href="ссылка на большую картинку 1"><img src="ссылка на миниатюру 1" data-caption="Название, если нужно" /></a>
    <a href="ссылка на большую картинку 2"><img src="ссылка на миниатюру 2" /></a>
    ...
    <a href="ссылка на большую картинку N"><img src="ссылка на миниатюру N" data-caption="Еще название" /></a>
</div>

Инициализируем слайдер:

$("#mySlider").ionImageSlider();

Или инициализируем слайдер с параметрами:

$("#mySlider").ionImageSlider({
    zoomText: "Увеличить",                  // текст возле иконки увеличения; поставьте "", если не нужен
    startFrom: 0,                           // № картинки, с которой стартовать слайдер
    slideShow: true,                        // включаем автопрокрутку
    slideShowDelay: 7                       // пауза между сменой картинок (если слайдшоу включено)
});

Настройка

Атрибут	По умолчанию	Описание
zoomText	"zoom"	Не обязательный параметр, позволяет написать свой текст возле иконки увеличения
startFrom	0	Не обязательный параметр, позволяет задать стартовую картинку для слайдера
slideShow	true	Не обязательный параметр, позволет отключать автопрокрутку
slideShowDelay	7	Не обязательный параметр, пауза между сменой кадров в автопрокрутке (в секундах)

История обновлений

---

Поддержите разработку плагинов серии Ion:

• Пожертвовать через сервис Pledgie:

• Пожертвовать напрямую через Paypal: https://www.paypal.me/IonDen

• Пожертвовать напрямую через Яндекс.Деньги: http://yasobe.ru/na/razrabotku