20 октября 2011, 4:10

Как подружить Фотораму с Эгеей

Поделиться
13 комментариев
Семеон Бобошко
Это волнующий вопрос, Артём!
Андрей Гурылёв
О, спасибо, классно! Правда, из фоток пока выложить нечего, чтоб протестить
Илья Видинеев
Артём, я попробовал подружить Фотораму с Эгеей по вашей инструкции, работать напрочь отказывается, выводит просто картинки подряд. При загрузке из доп. блоков, код скрипта и ссылка на CSS попадают в body, а не в head. Может поэтому не срабатывает? Файлы Фоторамы кладём в /user/js, верно? Как вы заставили эту связку работать?
Артём Поликарпов
Илья, думаю проблема в том, что вы ссылаетесь туда, где нет фоторамовских файлов. В моих примерах кода, файлы якобы лежат в папке /js, в корне. Но я ещё раз всё перепроверю и дополню инструкцию, спасибо за отзыв.
Илья Видинеев
Вот моя последовательность действий:
1. Эгея без изменений
2. Оба файла фоторамы положил в /user/js
3. Создал файл /user/extras/header-pre.tmpl.php с содержимым:

<link rel=«stylesheet» href=«js/fotorama.css»>
<script type=«text/javascript» src=«js/fotorama.js»></script>
<script type=«text/javascript»>
$(function(){
$('.fotorama').fotorama();
});
</script>

4. Создал пост с текстом:

((html <div class=«fotorama»>))

Закат

Дерево
((html </div>))

Сохранил и опубликовал.

5. Результат: фотки расположены друг за другом, с подписями.

Очень понравилась галерея, хочется всё починить!
Илья Видинеев
Постом выше, в 4-м пункте вы́резались ссылки на картинки. Но так как изображения в посте присутствуют, то значит в этих ссылках ошибок нет точно.
Илья Видинеев
Артём, удалось победить сей глюк.
Подключил стили и скрипт через файл шаблона /system/theme/templates/main.tmpl.php

1. Прописал там вызовы между тегами <head>:
<? _JS ('fotorama') ?>
<? _CSS ('fotorama') ?>

2. Файл fotorama.js кладём в папку /user/js
3. Файл fotorama.css кладём в папку /styles вашего шаблона.
4. Из доп. блока убираем вызовы скрипта и стилей.

Всё заработало. Видимо проблема была в подцеплении Эгеей скрипта и стилей из доп. блока.
Артём Поликарпов
Илья, хорошо, что Фоторама у вас заработала, но ваш вариант подключения неуниверсальный. ЦСС в одной папке, скрипт в другой, ещё и шаблон темы нужно трогать. Мой темонезависимый вариант у вас не сработал, потому что файлы у вас лежали в /user/extras, а ссылки вели в /js. Нужно было просто исправить ссылки, или положить файлы Фоторамы в папку /js.
Илья Видинеев
Артём, в папке /user/extras/ у меня не было файлов Фоторамы! Там я создал файл «header-pre.tmpl.php».
Фотораму я сразу распаковал в /user/js, я указал это во втором пункте своих действий. Или нужно было в корне сайта создать папку /js ?

Единственный «костыль» — то, что я поправил указанный файл стандартного шаблона, а по умному нужно было его скопировать в свой отдельный шаблон и там изменить, а Эгея его сама бы цепляла вместо дефолтного.
То, что стили со скриптами по разным папкам — для меня это плюс: мухи отдельно, котлеты отдельно :)

Спасибо! Галерею будет стильным украшением блога!
Артём Поликарпов
Илья, я описал другой способ подключения: http://fotoramajs.com/ru/faq/blogengine/.

Теперь файлы Фоторамы должны лежать там же, где и header-pre.tmpl.php — в папке /user/extras/. Универсальный способ их подцепления приведён в примерах кода. Таким образом не затрагивается тема оформления (Фоторама будет работать при любой теме), и становится не важно, в какой папке установлен блог.
Илья Видинеев
Спасибо, Артём.
Сделал по вашему новому примеру, всё подцепилось и заработало!
Артём Самохин
Арётм вообще респектос пожизненный! :). У меня http://ixley.ru/blog/?go=2011/10/21/1/ работает :).
Артем Локи
Артем, у меня вопрос. Все работает, кроме подписей к фотографиям. Что я ни делал, они не появляются. С чем может быть связано? Никто не сталкивался?
Артём Поликарпов
А где посмотреть можно?
Артем Локи
Вот здесь — http://lowkee.com/. Последний пост.
Артем Локи
Забыл добавить, в РСС все подписи к фотографиям показываются.
Артём Поликарпов
Разобрался! Это я сломал подписи случайно в предыдущем коммите, текущая 1165-я версия исправляет это :-) Ваш код подключения будет таким:

$('.fotorama').fotorama({
width: 800,
height: 533,
thumbBorderColor: 'white',
thumbMargin: 10,
thumbBorderWidth: 5,
caption: true
}


Кстати, писать «#ffffff #ffffff #ffffff» ни к чему, у меня так сделано, потому что разные грани рамки имеют свой цвет.
Артем Локи
Все заработало, спасибо!
Популярное