Эффект jCarousel для фотоальбома TPL — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «== Подключение эффектов jCarousel == Скачиваем jCarousel с официального сайта: * http://sorgalla.com/projects/jcarousel…»)
(нет различий)

Версия 07:10, 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

     %lines%
     %system numpages(%total%, %per_page%, 'standart')%

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 Далее идет описание некоторых опций: