3D Фотогаларея — различия между версиями
Cmac (обсуждение | вклад) |
Cmac (обсуждение | вклад) |
||
Строка 61: | Строка 61: | ||
''Пример реализации можно увидеть по следующей ссылке:'' | ''Пример реализации можно увидеть по следующей ссылке:'' | ||
* http://umi.web-portfolio.spb.ru/album/ | * http://umi.web-portfolio.spb.ru/album/ | ||
− | [[Вопросы и уроки разработки сайтов на UMI.CMS:Фотогалерея]] | + | [[:Категория:Вопросы и уроки разработки сайтов на UMI.CMS:Фотогалерея]] |
Версия 20:53, 28 июня 2010
В 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()%
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;
?>
Пример реализации можно увидеть по следующей ссылке:
Категория:Вопросы и уроки разработки сайтов на UMI.CMS:Фотогалерея