Установка и настройка Фоторамы
И так, я хочу познакомить народ с замечательным скриптом для создания фотогалерей. Называется он «Фоторама». Над проектом работает Артём Поликарпов, а логотип Фоторамы разработал Денис Талала.
Функционал, очень хороший, установка незатейливая и быстрая. Размер скриптов вообще оказался мизерным. Для начала необходимо зайти на сайт fotoramajs.com и скачать последнюю версию скрипта. Там всего один архив (и одна кнопка с надписью Download Fotorama), так что разберётесь быстро. На текущий момент самая последняя сборка 1251. Но, надеюсь, что проект будет регулярно обновляться.
В скаченном архиве нас интересуют всего два файла:
- fotorama.js
- fotorama.css
Эта фотогалерея использует библиотеку jQuery, о которой я уже упоминал в статье про визуальный редактор CLEditor. Собственно его можно использовать для работы Фоторамы. Не забывайте о том, что если вы подключили jQuery для одного проекта, то второй раз его подключать не требуется. В чём-то очень удобная библиотека, но уж очень много проектов его использует в качестве фрэймворка. Как вы догадались, необходимо скачать библиотеку с jQuery и поместить все три файла по своим местам. Я рассмотрю вариант в котором все файлы распакованы в каталог fotorama в корне сайта.
Если у вас уже есть список изображений, то вам придётся сделать всего пару телодвижений для подключения Фоторамы. Но я рассмотрю создание странички с самого начала.
Сначала подключаем каскадную таблицу стилей и набор скриптов:
<head> <link href="/fotorama/fotorama.css" type="text/css" rel="stylesheet" /> <script src="/fotorama/jquery.min.js" type="text/javascript"></script <script src="/fotorama/fotorama.js" type="text/javascript"></script> </head>
А в том месте, где следует вывести картинки, прописывается следующий код:
<div id="fotorama"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> </div> <script type="text/javascript"> $(function() { $('#fotorama').fotorama(); }); </script>
Далее останется только отформатировать нужным образом картинки, желательно чтобы они были одинакового размера. В противном случае, Фоторама берёт размер первого кадра и под него подстраивает все свои размеры. Строка с превьюшками генерируется автоматически.
Но есть возможность самим сделать превьюшки, чтобы уменьшить исходящий трафик в сторону клиента. Для этого необходимо сделать уменьшенную копию каждой фотографии. Требования предоставляются только к высоте превьюшки, по умолчанию это 48 пикселов. Тогда код, содержащий список фотографий, немного изменится.
<div id="fotorama"> <a href="1.jpg"><img src="1_preview.jpg"></a> <a href="2.jpg"><img src="2_preview.jpg"></a> <a href="3.jpg"><img src="3_preview.jpg"></a> </div> <script type="text/javascript"> $(function() { $('#fotorama').fotorama(); }); </script>
При таком методе вывода будут загружены только превью и три фотографии по краям от выделенной. При большом количестве фотографий это сильно экономит время на подгрузку Фоторамы и уменьшает объём скачанной информации.
О дополнительных настройках Фоторамы можно так же долго говорить, но они всё-таки второстепенны. Кстати, фоторама довольно хорошо себя показала при создании многих интересных проектов и фотогалерей художников. Если вы установите себе Фотораму, то поделитесь ссылкой на вашу реализацию подключения этой галереи.
Тэги: программирование
Отредактировано:2020-09-26 10:54:39
по моему это большой минус что программа подгоняет все кадры под первый...
эдакая превьюшечная галерея получается