3D Фотогаларея — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
 
(не показаны 2 промежуточные версии 1 участника)
Строка 21: Строка 21:
 
4. Подключаем таблицу стилей
 
4. Подключаем таблицу стилей
 
<source lang="html4strict"><link type="text/css" rel="stylesheet" href="/css/cms/featureCarousel.css"/></source>
 
<source lang="html4strict"><link type="text/css" rel="stylesheet" href="/css/cms/featureCarousel.css"/></source>
5. Вставляем в шаблон стандартные макросы UMI.CMS (для подключения jQuery версии 1.4.1)
+
5. Вставляем в шаблон стандартные макросы UMI.CMS (для подключения jQuery версии 1.4.1) и скрипт галереи
 
<br />
 
<br />
 
'''%system includeQuickEditJs()%'''
 
'''%system includeQuickEditJs()%'''
 
<br />
 
<br />
 
'''%system includeEditInPlaceJs()%'''
 
'''%system includeEditInPlaceJs()%'''
<br /><br />
+
<br />
 +
<source lang="html4strict"><script type="text/javascript" language="javascript" src="/js/jquery.featureCarousel.js"></script></source>
 +
<br />
 
6. Редактируем шаблон вывода изображений (по умолчанию default.tpl), блоки 'album_block' и 'album_block_line'
 
6. Редактируем шаблон вывода изображений (по умолчанию default.tpl), блоки 'album_block' и 'album_block_line'
 
<source lang="html4strict">
 
<source lang="html4strict">
Строка 59: Строка 61:
 
</source>
 
</source>
  
''Пример реализации можно увидеть по следующей ссылке:''
 
* http://umi.web-portfolio.spb.ru/album/
 
 
<br /><hr />
 
<br /><hr />
 
[[Вопросы и уроки разработки сайтов на UMI.CMS:Фотогалерея]]
 
[[Вопросы и уроки разработки сайтов на UMI.CMS:Фотогалерея]]
 +
[[Категория:Модуль Фотогалереи]]

Текущая версия на 13:18, 5 июня 2013

В 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;
?>



Вопросы и уроки разработки сайтов на UMI.CMS:Фотогалерея