Показать Меню
falbar Fotorama

Галерея на jQuery «не только лишь» для фото и видео!

Fotorama

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», все возможные настройки, которыми обладает данный скрипт.

Источник
fotorama.io

Подписаться на обновления

Комментариев еще не оставлено