Как подружить Фотораму с Эгеей
Первый ответ в рубрике вопросов на сайте Фоторамы:
http://fotoramajs.com/ru/faq/blogengine/
Твитнуть
Поделиться
Поделиться
Отправить
Популярное
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. Результат: фотки расположены друг за другом, с подписями.
Очень понравилась галерея, хочется всё починить!
Подключил стили и скрипт через файл шаблона /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/js, я указал это во втором пункте своих действий. Или нужно было в корне сайта создать папку /js ?
Единственный «костыль» — то, что я поправил указанный файл стандартного шаблона, а по умному нужно было его скопировать в свой отдельный шаблон и там изменить, а Эгея его сама бы цепляла вместо дефолтного.
То, что стили со скриптами по разным папкам — для меня это плюс: мухи отдельно, котлеты отдельно :)
Спасибо! Галерею будет стильным украшением блога!
Теперь файлы Фоторамы должны лежать там же, где и
header-pre.tmpl.php— в папке/user/extras/. Универсальный способ их подцепления приведён в примерах кода. Таким образом не затрагивается тема оформления (Фоторама будет работать при любой теме), и становится не важно, в какой папке установлен блог.Сделал по вашему новому примеру, всё подцепилось и заработало!
$(’.fotorama’).fotorama({
width: 800,
height: 533,
thumbBorderColor: ’white’,
thumbMargin: 10,
thumbBorderWidth: 5,
caption: true
}
Кстати, писать «#ffffff #ffffff #ffffff» ни к чему, у меня так сделано, потому что разные грани рамки имеют свой цвет.