Эффект jCarousel для фотоальбома TPL — различия между версиями
(Новая страница: «== Подключение эффектов jCarousel == Скачиваем jCarousel с официального сайта: * http://sorgalla.com/projects/jcarousel…») |
(→Подключение эффекта в фотоальбоме) |
||
| Строка 20: | Строка 20: | ||
Вызываем функцию карусели вставив скрипт так же между тегами <head></head> в основном шаблоне: | Вызываем функцию карусели вставив скрипт так же между тегами <head></head> в основном шаблоне: | ||
| + | <source lang="html4strict"> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(document).ready(function() { | jQuery(document).ready(function() { | ||
| Строка 26: | Строка 27: | ||
}); | }); | ||
</script> | </script> | ||
| + | </source> | ||
* Редактируем шаблон '''default.tpl''' в папке ''"/tpls/photoalbum"'' | * Редактируем шаблон '''default.tpl''' в папке ''"/tpls/photoalbum"'' | ||
В блоке '' 'album_block' '' добавляем атрибуты для инициализации эффекта: | В блоке '' 'album_block' '' добавляем атрибуты для инициализации эффекта: | ||
| + | <source lang="html4strict"> | ||
$FORMS['album_block'] = <<<END | $FORMS['album_block'] = <<<END | ||
| Строка 42: | Строка 45: | ||
END; | END; | ||
| + | </source> | ||
| − | Помимо этого добавляем для каждого блока с фотографией и описанием значение списка | + | Помимо этого добавляем для каждого блока с фотографией и описанием значение списка для корректного формирования эффекта прокрутки: |
| − | |||
$FORMS['album_block_line'] = <<<END | $FORMS['album_block_line'] = <<<END | ||
Версия 07:13, 3 июня 2013
Подключение эффектов jCarousel
Скачиваем jCarousel с официального сайта:
Разархивируем файлы по соответствующим папкам в системе:
- Все изображения из папки "/skins/tango/" сохраняем в папке "/templates/demoold/images/jCarousel/"
- Скрипт jquery.jcarousel.js и jquery-1.9.1.min.js сохраняем в папку "/templates/demoold/js/jCarousel/"
- Файл стилей style.css из папки "/skins/tango/" сохраняем в папку "/templates/demoold/css/jCarousel/"
В файле style.css меняем направление к изображениям с "images/" на "images/cms/data/jcarousel/"
Подключение эффекта в фотоальбоме
Подключаем js и css в шаблонах. Добавим три строки между тегами <head></head> в основной шаблон, по умолчанию фотоальбом работает с файлом /templates/demoold/tpls/content/inner.tpl:
<script type="text/javascript" src="/templates/demoold/js/jCarousel/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/templates/demoold/js/jCarousel/jquery.jcarousel.js"></script> <link rel="stylesheet" type="text/css" href="/templates/demoold/css/jCarousel/skin.css" />
Вызываем функцию карусели вставив скрипт так же между тегами <head></head> в основном шаблоне:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
});
});
</script>
- Редактируем шаблон default.tpl в папке "/tpls/photoalbum"
В блоке 'album_block' добавляем атрибуты для инициализации эффекта:
$FORMS['album_block'] = <<<END
<div umi:element-id="%id%" umi:module="photoalbum" umi:method="album">
<ul id="mycarousel" class="jcarousel-skin-tango">
%lines%
</ul>
%system numpages(%total%, %per_page%, 'standart')%
</div>
END;
Помимо этого добавляем для каждого блока с фотографией и описанием значение списка для корректного формирования эффекта прокрутки:
$FORMS['album_block_line'] = <<<END
|
<a href="%link%"> %data getProperty('%id%', 'photo', 'preview_image')% </a> |
<a href="%link%" umi:element-id="%id%" umi:field-name="name"> %name% </a> |
|
%descr% |
END;
В стандартном шаблоне в конце блока 'album_block_line' стоят два тега
для разделения фотографий, но в jCarousel они создают эффект лестницы, поэтому их лучше убрать.
Дополнительно
Для настроек jCarousel можно использовать описание разработчика. Изменения необходимо вносить в файле jquery.jcarousel.js Далее идет описание некоторых опций:
