3D Фотогаларея

В UMI.CMS от версии 2.8 используется библиотека jQuery, можно этим воспользоваться для создания 3D фотогалереи.

1. Для реализации задачи нам потребуется скачать скрипт "jquery.featureCarousel.js" + стиль "featureCarousel.css"

• http://www.bkosborne.com/downloads/jquery.featureCarousel-v1.0.zip

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

Пример реализации можно увидеть по следующей ссылке:

• http://umi.web-portfolio.spb.ru/album/