аукцион / 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




14 комментариев
Имя: Renart 🖉
по моему это большой минус что программа подгоняет все кадры под первый...
эдакая превьюшечная галерея получается
Комментарий оставлен: 2012-01-17 00:00:00


Имя: Orcinus Orca 🖉
Renart, а когда при нажатии на превьюшку у тебя фотографии начнут непредсказуемо менять свои размеры, то это будет неуважением к пользователю. Как минимум мало кто ожидает, что следующая фотография может быть на тысячу точек шире и пару тысяч точек выше. При любом раскладе желательно оставлять изначально увиденные размеры. В любом случае сайтостроитель должен предварительно обработать фотки и подогнать к общему размеру, но если он лох, то галерея сама за него это сделает. Так, что это большой плюс, а не минус.
Комментарий оставлен: 2012-01-17 00:00:00


Имя: Renart 🖉
я встречал галереи где при нажатии на миниатюру появляется изображение размер которого не превышает размеры окна браузера, а при повторном нажатии изображение увеличивается уже до оригинала.

вот если бы в этом скрипте можно было получить оригинальный размер изображения при нажатии в "центр картинки" было бы и красиво и поразглядывать можно
Комментарий оставлен: 2012-01-17 00:00:00


Имя: Orcinus Orca 🖉
Тут и так оригинальные размеры показываются. Те скрипты которые большие вольности позволяют занимают на несколько порядков больше места, не позволяют листать пальцем и работают только в определённых версиях браузеров. Сколько я галерей не смотрел у всех проблем больше чем достоинств, плюс я не выкладываю фотографии шире чем 600 точек.

В принципе, эта галерея позволяет сделать и такую уловку, но мне этого не нужно. Максимум, что я потом подключу так это слайд-шоу. Можно сделать слайд-шоу на полном экране, такое там тоже реализуемо, но нужно будет заливать картинки большего качества.
Комментарий оставлен: 2012-01-17 00:00:00


Имя: Вадим 🖉
То что не загружает на весь экран картинку это скорее большой плюс, чем минус. Соглашусь с размером картинки, пусть лучше будет все по фиксированному размеру. Но все таки бы они лучше сделали, чтобы картинки по отдельности грузились чем сразу все — не у всех есть высокоскоростной интернет
Комментарий оставлен: 2012-01-17 00:00:00


Имя: Артём Поликарпов 🖉
Если использовать для превьюшек отдельные файлы, и подключать их вот так:

<div class="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>

То большие картинки (1.jpg, 2.jpg...) будут подгружаться по мере необходимости, а не все сразу. Когда превьюшки не указаны, Фоторама генерирует их автоматически, но для этого необходимо загрузить все картинки разом.
Комментарий оставлен: 2012-01-17 00:00:00


Имя: Orcinus Orca 🖉
Вадим, я переделал скрипт и теперь он тянет по кусочкам, только по три больших фотки, остальное из превьюшек. Но пример придётся качать с моего сайта.
Комментарий оставлен: 2012-01-17 00:00:00


Имя: Orcinus Orca 🖉
Артём Поликарпов, да, я так и сделал. Кстати, привет. Со временем распишу все тонкости которые меня заинтересовали. Там, в принципе, столько интересного можно наворотить небольшими добавлениями в коде.
Комментарий оставлен: 2012-01-18 00:00:00


Имя: Денис Талала 🖉
Я дизайнер логотипа «Фоторамы», но не соавтор. :)
Комментарий оставлен: 2012-01-28 00:00:00


Имя: Orcinus Orca 🖉
Денис Талала, спасибо, поправлю.
Комментарий оставлен: 2012-01-28 00:00:00


Имя: qwe 🖉
ДА МАТЬ ВАШУ!
акого хера сайт фоторамы ЛЕЖИТ
Не могу скачать фотораму.css & fotorama.js

Люди, умоляю, дайте эти два файла, позарез нужна
Комментарий оставлен: 2012-04-19 00:00:00


Имя: Orcinus Orca 🖉
qwe, пробуйте ещё раз зайти. У меня она открылась.
Комментарий оставлен: 2012-04-19 00:00:00


Имя: Павел 🖉
Подскажите, как изменить в css цвет контейнера где показываются увеличенные фотографии, для превьюшек нашел, а для полноразмеров не найду.
Комментарий оставлен: 2012-06-05 00:00:00


Имя: Orcinus Orca 🖉
Павел, сейчас всё сильно изменилось. Качай новую Фотораму.
Комментарий оставлен: 2012-06-05 00:00:00



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

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

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