3D Фотогаларея
Материал из Umicms
В UMI.CMS от версии 2.8 используется библиотека jQuery, можно этим воспользоваться для создания 3D фотогалереи.
1. Для реализации задачи нам потребуется скачать скрипт "jquery.featureCarousel.js" + стиль "featureCarousel.css"
2. Распакуем архив и сохраним файлы в соответствующие папки
- Стиль featureCarousel.css сохраняем в папку "/css/cms"
- Скрипт jquery.featureCarousel.js сохраняем в папку "/js"
3. Для того, чтобы карусель работала - добавим следующий скрипт в шаблон галереи (перед закрывающимся тегом </head>):
<script type="text/javascript"> $(document).ready(function() { $("#featureCarousel").featureCarousel({ // include options like this: // (use quotes only for string values, and no trailing comma after last option) // option: value, // option: value }); }); </script>
4. Подключаем таблицу стилей
<link type="text/css" rel="stylesheet" href="/css/cms/featureCarousel.css"/>5. Вставляем в шаблон стандартные макросы UMI.CMS (для подключения jQuery версии 1.4.1) и скрипт галереи
%system includeQuickEditJs()%
%system includeEditInPlaceJs()%
<script type="text/javascript" language="javascript" src="/js/jquery.featureCarousel.js"></script>
6. Редактируем шаблон вывода изображений (по умолчанию default.tpl), блоки 'album_block' и 'album_block_line'
$FORMS['album_block'] = <<<END <div id="featureCarousel"> %lines% </div> END;
$FORMS['album_block_line'] = <<<END <div class="feature"> <a href="%link%">%data getProperty('%id%', 'photo', '3d_photo')%</a> <div> <p> %descr% </p> </div> </div> END;
7. В макросе %data getProperty('%id%', 'photo', '3d_photo')% третьим параметром используется шаблон вывода непосредственно изображений (3d_photo). Необходимо создать этот шаблон в папке "/tpls/data"
<?php
$FORMS = Array();
$FORMS['img_file'] = <<<END
%system makeThumbnail(%filepath%, auto, 250, 'view')%
END;
?>