Скрипты Lightbox позволяют смотреть большие изображения на текущей странице. Они давно стали неотъемлемой частью любого сайта. Очень хорошо они подходят для создания фотогалерей, но вот для просмотра изображений в статьях – как правило, не очень, т.к. они закрывают текст, заставляя отвлечься от содержимого статьи.
Недавно я натолкнулся на плагин с названием Strip и не мог не обратить на него внимание. Это то, чего мне давно не хватало для чтения статей – возможности просмотра увеличенных изображений рядом с текстом, а не поверх. Strip открывает изображения, лишь частично закрывая содержимое страницы, а расположением и размером увеличенного изображения можно легко управлять с помощью html кода.
Использование Strip
Для использования Strip на странице необходимо подключить javascript’овую библиотеку strip.js (или strip.min.js), файл стилей strip.css. Разумеется, все это после jQuery. Потому в тэгах <head></head> должно быть что-то типа такого:
<script src="js/jquery-2.1.1.min.js"></script>
<script src="strip/js/strip/strip.min.js"></script>
<link href="strip/css/strip/strip.css" rel="stylesheet" />
Простое открытие изображений
Чтобы просто открывать увеличенное изображение, необходимо добавить «class="strip"» к гиперссылке, ведущей к рисунку:
<a href="imgs/DSC_1952.JPG" class="strip">DSC_1952.JPG</a>
Для вывода подписи под увеличенным изображением добавьте в гиперссылку код data-strip-caption
<a href="imgs/DSC_1952.JPG" class="strip" data-strip-caption="Подпись под картинкой">DSC_1963.JPG</a>
Пролистывание изображений
Для добавление кнопок перехода от одного изображения к другому нужно указать принадлежность к группе в параметре data-strip-group. Чтобы с одной группы изображений нельзя было бы перейти к другой, используйте разные названия групп data-strip-group.
<a href="imgs/DSC_1952.JPG" class="strip" data-strip-group="mygroup2" data-strip-caption="Подпись под картинкой">DSC_1952.JPG</a>
<a href="imgs/DSC_1963.JPG" class="strip" data-strip-group="mygroup2" data-strip-caption="Подпись под картинкой">DSC_1963.JPG</a>
Рис.1. Strip с отображением названия изображения
Управление расположением и размерами
Вы можете управлять расположением и размерами увеличенных изображений в скрипте Strip с помощью параметра data-strip-options. Вот такой код выведет изображение слева, а ширина изображения будет не более 500 пикселей:
<a href="imgs/DSC_1963.JPG" class="strip" data-strip-options="side: 'left', maxWidth: 500" />DSC_1963.JPG</a>
Возможные значение side: left – слева, right – справа, top – сверху, bottom – снизу.
Видео Youtube на странице с помощью Strip
Strip позволяет вставить видео с Youtube на странице.
<a href="http://www.youtube.com/watch?v=E7ZT2ZhxRGY" class="strip">видео с Youtube</a>
Вывод неочевидных браузеру форматов медиа-файлов
Если выводимый формат изображения или видео нельзя однозначно определить по имени файла или УРЛу, то нужно указать тип медиа-файла с помощью параметра data-strip-type
<a href="http://somurl/images/?id=1" class="strip" data-strip-type="image">Картинка, выводимая скриптом </a>
Скачать скрипты Strip можно со страницы http://stripjs.com/download. Некоммерческое использование бесплатно, стоимость лицензии для разработчиков – 20 евро, для организаций – 70 евро.