Fotorama - мощная и многофункциональная галерея, написанная на jQuery. Сразу скажу, скрипт довольно большой, так как включает в себя универсальное решение практически любой галереи или слайдера фотографий. Отсюда и вес плагина - 101кб, к сравнению, библиотека jQuery занимает примерно 250кб пространства на хостинге.
Настройки скрипта включает в себя множество параметров, которые можно указывать через атрибуты тегов HTML или выносить отдельно в функцию. К слову сказать, разработчики весьма постарались и снабдили галерею очень подробной документацией с разбором примеров настройки.
Привлекает данное исполнение галереи еще и тем, что на одну страницу можно установить сразу несколько галерей, и они не будут конфликтовать между собой.
Кроме того, есть возможность реализовать видео галерею. Тут что интересно: можно добавлять привью для видео картинкой, после включения видеозаписи появляется кнопка выключение, что не создает возможной ситуации, когда в галере несколько видео работают одновременно. Реализована прокрутка видео мышью, что весьма удобно на телефонах и планшетах, где в качестве мыши выступает наш палец.
Галерея обладает адаптивной версткой и после установки выглядит одинаково красиво на любом разрешении монитора, будь то нетбук, лептоп или телефон. Кроме того, её можно развернуть во весь экран – очень полезный функционал для сайтов с качественными изображениями.
Как я упоминал ранее, данная jQuery галерея очень функциональна. Плагин поддерживает работу с HTML кодом, так что вместо картинок можно добавить текста или другие штуки. Не грех вспомнить и про стандартный функционал: для пролистывания слайдов можно настроить клавиши клавиатуры ← и →, можно сделать галерею с миниатюрами и многое другое.
Установка и настройка
Так как галерея огромная, и, я думаю, вам было бы самим интересно в ней поковыряться, то мы разберём всего пару примеров, которые позволяют увидеть принцип её работы и настройки.
Подключение скриптов и стилей:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Fotorama -->
<link href="fotorama.css" type="text/css" rel="stylesheet" />
<script src="fotorama.js" type="text/javascript"></script>
Пример №1 (галерея с видео).
HTML:
<div class="fotorama" data-width="700" data-ratio="700/426" data-fit="cover">
<a href="http://youtube.com/watch?v=C3lWwBslWqg"></a>
<a href="http://vimeo.com/61527416"></a>
</div>
Как видите всё довольно просто и легко, скрипт нашёл блок с class=fotorama, и сам добавил нужные элементы и стили для работы галереи, в нашем случае - для отображения видео. Настройка заключается в указании параметров непосредственно к div, у которого прописан class=fotorama, data-параметр=значение. Тут я добавил ширину, рекомендуемые пропорции и растянул добавленное видео по ширине обёртки. Если потребуется своё превью для видео, то стоит поместить картинку в ссылку с видео (у многих элементов есть свой список настроек, ссылку я дам ниже, где можно их будет изучить).
Пример №2 (стандартная галерея с картинками).
HTML:
<div class="fotorama" data-width="700" data-ratio="700/467" data-max-width="100%">
<img src="http://s.fotorama.io/okonechnikov/1-lo.jpg" alt="image" />
<img src="http://s.fotorama.io/okonechnikov/2-lo.jpg" alt="image" />
<img src="http://s.fotorama.io/okonechnikov/9-lo.jpg" alt="image" />
<img src="http://s.fotorama.io/okonechnikov/6-lo.jpg" alt="image" />
<img src="http://s.fotorama.io/okonechnikov/5-lo.jpg" alt="image" />
</div>
Настройки я оставил из предыдущего примера. С картинками работать проще простого: добавляем в блок с class=fotorama, а скрипт делает всё остальное.
Сам принцип дозволения галереи при помощи библиотеки fotorama очень удобен, работу приведенных мною примеров вы можете увидеть в «демо». А перейдя по этой ссылке: fotorama, вы найдёте ещё несколько интересных примеров, а также, в разделе «Full list of options», все возможные настройки, которыми обладает данный скрипт.