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

• jQuery 1.9+

Чтобы слайдер работал корректно, картинки миниатюр должны иметь одинаковую высоту. Например в приложенных скинах, высота миниатюр 264px, ширина любая. Если вы хотите изменить это значение, то вам нужно будет так же отрегулировать высоту слайдера в CSS-файле скина.

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

• 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	Не обязательный параметр, пауза между сменой кадров в автопрокрутке (в секундах)

• 26.06.2013 - релиз слайдера