Слайд-шоу на сайте

• 

Подробности

Опубликовано 11.09.2013 17:00

1. Заходим в админ. панель - Расширения - Менеджер модулей. Кнопка Создать на панели инструментов.

2. Выбираем Avatar Slide Galleria.

3. Заполняем основные поля: Заголовок, Позиция, Состояние, Доступ. В правой части страницы находятся настройки модуля. Все они интуитивно понятны. При наведении на название настройки появляется всплывающая подсказка с более подробным описанием.

Нас, в основном, будут интересовать Настройки модуля (задается высота и ширина области слайда), Настройки для папки (выбирается папка, если изображения будут выводится из папок, имеющихся на сервере, а так же задаются названия, описания и ссылки для показываемых изображений), Настройки внешнего вида (выставляются настройки для темы, мини-фото в предпросмотре, рамки вокруг изображений, счетчика кол-ва слайдов, навигации и др.), Slide Setting (устанавливается скорость перелистывания слайдов, эффект смены слайдов и пр.).

4. Сохраняем изменения (кнопка Сохранить на панели инструментов) и проверяем, как отображается модуль на сайте.

Слайд-шоу на сайт можно добавить и в виде плагина, т.е. прямо в текст статьи. Для этого нужно открыть статью для редактирования и прописать следующий код:

1. Для загрузки фото из папки сайта: {avatargalleria src=folder path=/phocagallery/1september/ height=250px width=50% theme=classic thumbnails=false count=15 quality=medium/}
2. Для загрузки фото из web-альбома Flickr{avatargalleria src=flickr search=search string=$New York$ sort=dpa width=100% height=200px  count=16 quality=medium theme=august/}
3. Для загрузки фото из web-альбома Picasa {avatargalleria src=picasa search=user string=$116771399288983097230$ width=500px height=200px   count=100 quality=original theme=september/}

Параметры в фигурных скобочках заполняются следующим образом: параметр=значение.

Разберем подробнее настройки для плагина (в скобках указаны аналогичные для модуля):

• avatargalleria - указывает, что система должна использовать это расширение для вывода слайд-шоу на сайт
• src (Ресурс) - это folder, picasa или flirck. Пример: src=folder
• path (Выбрать папку) - указывается только в том случае, если в качестве src Вы выбрали folder (т.е. папку с сайта). Путь указывается относительно папки images в Медиа-менеджере
• count - кол-во изображений, которое будет выводиться. Настройка актуальна, если src выбрано flirck или picasa
• search, string - методы поиска для flirck и picasa (см. в настройках модуля)
• sort - сортировка, если src=folder. Принимаемые значения: random(случайная сортировка) или false(без сортировки)
• height (Высота) - высота слайда. К примеру, 100px или 0.5
• width (Ширина) - ширина слайда. Например, 100px или 100%
• auto (Проигрывать сразу) - проигрывать сразу или нет слайды при загрузке страницы. Принимаемые занчения: true(да) или false(нет)
• responsive (Отзыв) - делать ли окно слайда отзывчивым на движение мышки, если размер картинки превышает размер окна
• lightbox (Lightbox) - показывает изображение во всплывающем окне, когда пользователь щелкает по нему. Принимаемые занчения: true(да) или false(нет)
• imgcrop (Кадрирование изображения) - устанавливает, как именно галерея будет кадрировать изображение. Принимаемые значения: true(да), false(нет), portrait(портретная ориентация), landscape(альбомная ориентация), height(по высоте), width(по ширине)
• showcounter (Показать счетчик) - включает счетчик изображений. Принимаемые значения: true(да), false(нет)
• shownav (Показать навигацию) - показывать или нет навигацию. Принимаемые значения: true(да), false(нет)
• swipe (Swipe) - переключение слайдов на устройствах с тачпадом. Принимаемые значения: true(да), false(нет)
• transition (Переход) - устанавливает, какой переход использовать (fade - плавное наложение изображений, flash - исчезновение изображения, pulse - быстро удаляется текущее изображение, плавно появляется новое, slide - движение изображения в зависимости от его положения, fadeslide - эффект слайда)
• time (Время перелистывания) - время, через которое будет осуществляться переход к следующему изображению (в млс).
• thumbnails (Эскизы изображений) - как отображать предпросмотр картинок (true - показывать, false - не показывать, empty - оставить пустое место, number - только номера)
• info - показывать или нет информацию об изображении. Принимаемые значения: true(да), false(нет)
• fullscreen (Показать кнопку полноэкранного режима) - полный экран. Принимаемые значения: true(да), false(нет)
• progress - показывать или нет шкалу загрузки. Принимаемые значения: true(да), false(нет)
• speed (Скорость перехода) - скорость смены слайдов (пример: 500)

 Пример

{avatargalleria src=folder path=/phocagallery/1september/ height=250px width=50% theme=classic thumbnails=false count=15 quality=medium/} вставит изображения из папки (src=folder) на сервере (path=/phocagallery/1september/). Высота блока 250рх, ширина - 50% от ширины родительского элемента. Тема оформления классическая (theme=classic). Предпросмотр слайдов выключен (thumbnails=false), качество изображений среднее (quality=medium).

Если не указаны остальные настройки, они будут использоваться по умолчанию.

Результат: