аукцион / FPR / donate / услуги / RSS / распечатать / вход 
Мой мир
Вконтакте
Одноклассники

Установка и настройка Фоторамы

[16 января 2012 | 17 января 2012 | 18 января 2012]

И так, я хочу познакомить народ с замечательным скриптом для создания фотогалерей. Называется он «Фоторама». Над проектом работает Артём Поликарпов, а логотип Фоторамы разработал Денис Талала.

Фоторама.

Функционал, очень хороший, установка незатейливая и быстрая. Размер скриптов вообще оказался мизерным. Для начала необходимо зайти на сайт fotoramajs.com и скачать последнюю версию скрипта. Там всего один архив (и одна кнопка с надписью Download Fotorama), так что разберётесь быстро. На текущий момент самая последняя сборка 1251. Но, надеюсь, что проект будет регулярно обновляться.

В скаченном архиве нас интересуют всего два файла:

Эта фотогалерея использует библиотеку 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


Этот сайт использует файлы cookies, чтобы упростить вашу навигацию по сайту, предлагать только интересную информацию и упростить заполнение форм. Я предполагаю, что, если вы продолжаете использовать мой сайт, то вы согласны с использованием мной файлов cookies. Вы в любое время можете удалить и/или запретить их использование изменив настройки своего интернет-браузера.

Сообщайте мне о замеченных ошибках на: web@orcinus.ru. Все пожелания и советы будут учтены при дальнейшем проектировании сайта. Я готов сотрудничать со всеми желающими. В некоторых случаях, мнение автора может не совпадать с мнением автора! Phone: +7-902-924-70-49.

Top.Mail.Ru
Top.Mail.Ru LiveInternet Rambler's Top100 Яндекс.Метрика