Гаджеты

С Amiro.CMS вы можете вставить на страничку вашего сайта слайд-шоу из серии различных изображений, любой видео файл, размещенный на таких популярных сервисах, как RuTube и YouTube, либо создать собственный гаджет, работающий с теми или иными объектами мультимедии.

Чтобы вставить гаджет, поместите курсор в то место текста или таблицы, где вы хотите его вставить и нажмите кнопку .

Описание гаджетов

Лента изображений

YouTube

RuTube

Установка собственных гаджетов

Лента изображений

Гаджет “Лента Изображений” предназначен для добавления на страницу визуального элемента, представляющего собой прокручиваемый набор изображений, которые, в зависимости от шаблона, могут быть просмотртены в попапе, нести дополнительную информацию и т.п.

Внешний вид гаджета “Лента Изображений” на публичной части сайта:

Для того чтобы создать ленту изображений, в визуальном редакторе необходимо нажать на кнопку добавления гаджета и выбрать гаджет “Лента Изображений”.

Всплывающее окно настроек гаджета имеет две вкладки.

На вкладке “Изображения” можно добавить изображение в ленту, отредактировать или удалить добавленное изображение.

Добавить новое изображение можно кликнув по картинке с подписью “Добавить”, либо по ссылке “Добавить изображение” в верхнем правом углу.

Клик по добавленному изображению открывает окно редактирования его свойств.

Для удаления изображения нужно кликнуть на соответствующий элемент управления в верхнем правом углу изображения.

Окно добавления / редактирования изображения:

Для каждого изображения имеется возможность указания следующих параметров:

• Альтернативный текст – текст который будет отображаться вместо изображения, если загрузка изображений отключена или невозможна;
• Всплывающий текст – подсказка, которая будет появляться при наведении курсора мыши на изображение;
• Всплывающее изображение – задается на тот случай, если увеличенное изображение должно отличаться от изображения в списке;
• Заголовок;
• Ссылка;
• Заголовок ссылки;
• Описание.

Вкладка “Параметры” содержит настройки внешнего вида гаджета.

Прокрутка – может быть горинтальной и вертикальной.

Количество строк – число изображений в ленте по вертикали, фиксируется для горизонтальной прокрутки, для вертикальной прокрутки означает число видимых строк.

Количество столбцов – число изображений в ленте по горизонтали, фиксируется для вертикальной прокрутки, для горизонтальной прокрутки означает число видимых столбцов.

Пример ленты изображений в 2 строки, 3 столбца, горизонтальная прокрутка.

Шаблон изображения – задает внешний вид гаджета на публичной части, в поставку входят несколько стандартных шаблонов. Пользователь может создавать альтернативные шаблоны, о чем будет рассказано ниже.

Имя группы – имя, объединяющее группу изображений. Если на странице размещается несколько гаджетов “Лента Изображений”, рекомендуется каждому из гаджетов назначать уникальное имя группы.

Создание собственных шаблонов.

Шаблоны гаджета “Лента Изображений” размещаются в пути _local/_admin/templates/ и должны иметь название imagetape_(имя шаблона).tpl. За основу собственного шаблона можно взять шаблон _local/_admin/templates/imagetape.tpl или _loacal/admin/templates/imagetape_nopopup,tpl.

Шаблон состоит из трех сетов:

1) image - шаблон отдельного изображения (в оригинале - thumbnail'а). На входе следующие параметры:

##src## - URL изображения;

##popupsrc## - URL всплывающего изображения;

##groupname## - Имя группы изображений (текст);

##group## - ID группы изображений;

##alt## - значение аттрибута alt картинки;

##title## - значение поля title картинки;

##header## - заголовок;

##url## - URL ссылки;

##urlcapt## - текст ссылки;

##descr## - описание.

2) delimiter - разграничитель рядов ленты, в данном случае может быть пустым

3) template - основной шаблон ленты. На входе следующие параметры:

##group## - ID группы изображений;

##imageset## - имиджсет, все картинки в шаблоне image;

##initial_image## - изображение показываемое по умолчанию (первое в имиджсете);

##scroll## - направление скролла (0 - горизонтальный, 1 - вертикальный);

##width## - ширина видимой области (px);

##height## - высота видимой области (px);

##totalw## - полная ширина имиджсета (px);

##totalh## - полная высота имиджсета (px)

##imgwidth## - ширина thumbnail-а (px)

##imgheight## - высота thumbnail-a (px)

##scrollto## - на сколько пикселей скроллить

##slidername## - имя для объекта слайдера

Пример шаблона:

<!--#set var="image" value="<div style="float:left;margin:6px;cursor:pointer;"><img onclick="AMI.find('#image-##group##').src = '##if(popupsrc)####popupsrc####else####src####endif##'" src="##src##" width="100" height="100" /></div>"-->

<!--#set var="delimiter" value="<div style="clear:both"></div>"-->

<!--#set var="template" value="
##if(scroll != 1)##
<table>
<tr>
    <td align="center">
       <img src="##initial_image##" id="image-##group##" />
    </td>
</tr>
<tr>
    <td>
        <div class="imagetapeControl left" style="height:##height##px;" id="prev-##group##"></div>
        <div id="slider-##group##" style="width:##width##px;height:##height##px;overflow:hidden;float:left;">
            <div id="container-##group##" style="position:relative;width:##totalw##px;height:##totalh##px;">##imageset##</div>
        </div>
        <div class="imagetapeControl right" style="height:##height##px;" id="next-##group##"></div>
        <div style="clear:both;"></div>
        </div>
    </td>
</tr>
</table>
##else##
<div style="float:left;">
    <div class="imagetapeControl up" style="width:##width##px;" id="prev-##group##"></div>
    <div id="slider-##group##" style="width:##width##px;height:##height##px;overflow:hidden;clear:both;">
        <div id="container-##group##" style="position:relative;width:##totalw##px;height:##totalh##px;">##imageset##</div>
    </div>
    <div class="imagetapeControl down" style="width:##width##px;" id="next-##group##"></div>
</div>
<div style="float:left;">
   <img src="##initial_image##" id="image-##group##" />
</div>
##endif##
</div>
<script>
var ##slidername## = new AMI.UI.Slider(AMI.find('#slider-##group##'), AMI.find("#prev-##group##"), AMI.find("#next-##group##"), ##scrollto##, ##if(scroll != 1)##true##else##false##endif##);
</script>

YouTube

Гаджет “YouTube” предназначен для добавления на страницу видео файла, предназначенного для просмотра на сайте.

Для того чтобы поместить видео на странице сайта, в визуальном редакторе необходимо нажать на кнопку добавления гаджета , выбрать "YouTube", указать ссылку на видеоролик с данного сервиса, а так же выставить размеры ширины и высоты.

RuTube

Гаджет “RuTube”, как и "YouTube" - так же предназначен для добавления на страницу видео файла, предназначенного для просмотра на сайте.

Для того чтобы поместить видео на странице сайта, в визуальном редакторе необходимо нажать на кнопку добавления гаджета , выбрать "RuTube", указать ссылку на видеоролик с данного сервиса, а так же выставить размеры ширины и высоты.

Установка собственных гаджетов

Вы можете создать собственный гаджет, отвечающий вашим требованиям вывода той или иной информации на сайте. Более подробно об этом рассказано в разделе Установка собственных гаджетов.