- Как интегрировать плагин?
- Как добавлять видео?
- После установки плагина, не отображаются видео
- Как инициализировать скрипт плагина вручную?
- Как поместить плагин на отдельную страницу и сделать фото, либо видео галерею?
- Как вывести видео отдельно от фотогалерии на странице товара?
- Как заменить иконку полноэкранного режима?
- Как отредактировать HTML-шаблон плагина?
- Скрипт импорта существующих видео
- Использование плагина в других приложениях
- Использование плагина в приложении Фото
- Как настроить мобильную версию плагина?
- Список всех параметров плагина Галерея+
- Как скрыть кнопки навигации в мобильной версии?
- Пример, как можно получить доступ к функциям, через JavaScript
Откройте приложение "Магазин" -> "Плагины" -> "Галерея+".
Вариант №1: Автоматический вывод с помощью хука:
Включите плагин установив галочку "Включить".
После включения, плагин автоматически выводит галерею на странице товара с помощью хука "frontend_product".
Если в текущей теме дизайна уже существует фотогалерея, ее необходимо удалить из шаблона.
Вариант №2: Вывод с помощью вставки кода в шаблоне:
Включите плагин установив галочку "Включить".
Отключите опцию "Использовать хук (frontend_product)".
Если в текущей теме дизайна уже существует фотогалерея, ее необходимо удалить из шаблона.
Пример (для темы Дефолт 3.0): gp.default.zip
Пример (для темы "Дизайн со вкусом 2.0"): gp.dsv2.zip
Пример (для темы "Удобная Покупка"): gp.comfortbuy.zip
Пример (для темы "Unishop"): gp.unishop.zip
Как добавлять видео?
Откройте видео на YouTube которое хотите поместить в Галерею+.
Кликните правой кнопкой мыши в окне видео и выберите пункт "Копировать URL видео".
Откройте приложение "Магазин" -> "Товары" -> выберите необходимый товар -> "Редактировать" -> "Фото и видео" -> "Менеджер видео" -> нажмите кнопку "Добавить", вставьте URL в поле "Видео URL", нажмите "Сохранить".
После установки плагина, не отображаются видео
По умолчанию, плагин не отображает видео которые указаны в приложении Магазин. Ссылки на видео, в плагине, добавляются через раздел "Магазин" -> "Товары" -> выберите необходимый товар -> "Редактировать" -> "Фото и видео" -> "Менеджер видео" -> нажмите кнопку "Добавить", вставьте URL в поле "Видео URL", нажмите "Сохранить".
Но можно автоматически перенести ссылки с приложения в плагин с помощью простого скрипта, который достаточно загрузить в корневой каталог сайта, указать настройки подключения к базе данных и открыть в браузере. Ссылка на скрипт: upd_video.php.zip
Как инициализировать скрипт плагина вручную?
Если по каким-то причинам автоматическая инициализация не устраивает, Вы можете инициализировать скрипт плагина вручную.
В настройках плагина, снимите галочку "Автоматическая инициализация", в текущей теме дизайна используйте скрипт.
Пример скрипта:
<script type="text/javascript">(function($){$(function(){$('.galleryplus').each(function(){$(this).GalleryPlus();});});})(jQuery);</script>
Пример с переназначением настроек:
<script type="text/javascript">(function($){$(function(){$('.galleryplus').each(function(){$(this).GalleryPlus({'slideShow':true});});});})(jQuery);</script>
Пример для использования галереи в темах дизайна с быстрым просмотром товаров в категории:
Для работы этого кода, нужно снять галочку "Загружать скрипты плагина только на странице товара".
{$gpID = time()}
{if $wa->shop}{shopGalleryplusPlugin::display($product.id, ['id'=>$gpID])}{/if}
{literal}<script type="text/javascript">
(function($){$(function(){$('.galleryplus-id-{/literal}{$gpID}{literal}').each(function(){$(this).GalleryPlus();});});})(jQuery);
</script>{/literal}
Откройте настройки плагина и снимите галочку "Только на странице товара".
Создайте новый товар без указания категории.
Откройте "Менеджер видео" добавьте необходимые URL.
Если нужна фото галерея, загрузите необходимые изображения.
Узнайте ID товара:
Используйте код:
{if $wa->shop}{shopGalleryplusPlugin::display(ID)}{/if}
на нужной вам странице (с поддержкой Smarty) или в шаблоне темы дизайна.Например, если ID товара: 43 код будет: {if $wa->shop}{shopGalleryplusPlugin::display(43)}{/if}
Как вывести видео отдельно от фотогалерии на странице товара?
По умолчанию, видео отображается в галерее вместе с фото.
Вы можете отключить отображение видео в галерее и вывести его отдельно в шаблоне с помощью кода.
Откройте настройки плагина, для опции "Положение видеоминиатюр" установите значение "Скрыть".
В файл product.html добавьте код:
{shopGalleryplusPlugin::getVideosById($product.galleryplus_videos,800,600)} - с указанием размера видео.
{shopGalleryplusPlugin::getVideosById($product.galleryplus_videos,640,360,false)} - без добавления переноса строки для каждого видео.
Вы можете переназначить CSS правила в текущей теме дизайна.
Пример CSS:
.galleryplus-maximize .galleryplusicon-zoom-in::before {
content: " ";
background-image: url(http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Misc-Zoom-In-icon.png);
width: 20px;
height: 20px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
}
Откройте приложение "Магазин" - "Витрина" - (текущая тема дизайна) - "Шаблоны" - "(+) Новый файл" - "Создать новый файл" - "Имя файла": Galleryplus.html
Скачайте (0.3.4) и откройте файл Galleryplus.html, скопируйте все содержимое и поместите его в редакторе, нажмите "Сохранить".
Скрипт импорта существующих видео
Данный скрипт, копирует существующие видео товаров в "Менеджер видео" плагина Галерея+.
Для использования скрипта, поместите его в корневой каталог установки Webasyst.
В браузере откройте адрес: http://названиевашегосайта.ru/importvideo.php
Скачать скрипт importvideo.php.zip
Использование плагина в других приложениях
Откройте нужное приложение в бекенде - Дизайн - Шаблоны - файл head.html, в конце файла добавьте строку:
{if $wa->shop}{shopGalleryplusPlugin::getScripts()}{/if}
Создайте товар без категории и узнайте ID товара:
Используйте код:
{if $wa->shop}{shopGalleryplusPlugin::display(ID)}{/if}
на нужной вам странице (с поддержкой Smarty) или в шаблоне темы дизайна.Например, если ID товара: 43 код будет: {if $wa->shop}{shopGalleryplusPlugin::display(43)}{/if}
Использование плагина в приложении Фото
Откройте приложение Фото - Дизайн - Шаблоны - файл head.html, в конце файла добавьте строку:
{if $wa->shop}{shopGalleryplusPlugin::getScripts()}{/if}
Затем, откройте файл main.html (index.html либо content.html) и добавьте код из файла template.txt. См. также доп. файлы для вывода альбомов.Как настроить мобильную версию плагина?
Используя данный код в шаблоне темы дизайна, Вы можете изменить настройки плагина для мобильной версии на произвольные.
{if waRequest::isMobile()}
{* Мобильная версия *}
{shopGalleryplusPlugin::display($product.id, ['modalImgFit'=>'cover', 'thumbnailsSize'=>'48x48', 'thumbsAlign'=>'bottom'])}
{else}
{* ПК версия *}
{shopGalleryplusPlugin::display($product.id)}
{/if}
Список всех параметров плагина Галерея+
| Параметр | Тип | Значение по умолчанию | Описание | Доступные значения |
| Активация | ||||
| enabled | bool | 0 | Включить | |
| autoInit | integer | 1 | Автоматическая инициализация | |
| hookFrontendProduct | bool | 1 | Использовать хук (frontend_product) | |
| onlyProductPage | integer | 1 | Только на странице товара | |
| Общие | ||||
| displayMode | string | both | Режим отображения | images, videos, both, |
| width | string | auto | Ширина | |
| ratio | string | 4/3 | Соотношение сторон | |
| mainImageSize | string | 750x0 | Размер основного изображения | |
| thumbnailsSize | string | 48x48 | Размер миниатюр | |
| largeImageSize | string | 970x0 | Размер увеличенного изображения | |
| slideShow | bool | 0 | Слайд-шоу | |
| slideShowBtn | bool | 1 | Кнопка слайд-шоу | |
| slideShowTimeout | int | 6000 | Время перехода слайдов | |
| clickOnImage | string | none | Клик по изображению | none, next, open, |
| showNextOnClick | bool | 1 | Показать следующий слайд | |
| imgFit | string | contain | Как помещать изображения | cover, contain, auto, 100%, 100% 100% |
| infiniteLoop | bool | 1 | Бесконечный цикл | |
| showNavButtons | bool | 0 | Включение кнопок навигации | |
| useBadge | bool | 1 | Использование наклеек | |
| buttonsColor | string | white | Цвет кнопок | white, black, red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, aqua, teal, green, light-green, lime, sand, khaki, yellow, amber, orange, deep-orange, blue-gray, brown, gray, |
| spinnerId | string | 4 | Спиннер | 1, 2, 3, 4, 5, 6, |
| Миниатюры | ||||
| showThumbnails | bool | 1 | Отображать миниатюры | |
| thumbsAlign | string | bottom | Выравнивание миниатюр | top, left, right, bottom, |
| thumbEventType | string | click | Переключение слайдов | none, click, hover, both, |
| thumbFit | string | cover | Как помещать миниатюры | cover, contain, auto, 100%, 100% 100% |
| thumbVideoFit | string | 180% | Как подгонять миниатюры видео | cover, contain, auto, 100%, 100% 100% |
| placeVideoThumbnails | string | left | Расположение видео эскизов | left, right, |
| thumbsVerticalWidth | float | 55 | Ширина контейнера для вертикальных миниатюр | |
| Полноэкранный режим | ||||
| mode | string | modal | Режим всплывающего окна | modal, fullwindow, none, |
| modalShowNavButtons | bool | 1 | Включение кнопок навигации | |
| modalShowNextOnClick | bool | 1 | Открытие следующего слайда при клике по изображению | |
| modalShowZoomButtons | bool | 1 | Показать кнопки масштабирования | |
| modalShowTitle | bool | 1 | Показать заголовок | |
| modalTitleTextAlign | string | left | Выравнивание заголовка | left, center, right, justify, |
| modalShowDescription | bool | 1 | Отображать описания изображений | |
| modalDescriptionDisplay | string | bottomleft | Расположение текста описания | topmiddle, topleft, topright, bottomleft, bottomright, bottommiddle, |
| modalDescriptionAtimationClass | string | left | Анимация текста описания | none, left, right, opacity, |
| modalImgFit | string | contain | Как помещать изображения во всплывающем окне | cover, contain, auto, 100%, 100% 100% |
| modalBackgroundColor | string | white | Цвет фона всплывающего окна | white, black, red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, aqua, teal, green, light-green, lime, sand, khaki, yellow, amber, orange, deep-orange, blue-gray, brown, light-gray, gray, dark-gray, pale-red, pale-yellow, pale-green, pale-blue, |
| Миниатюры во всплывающем окне | ||||
| modalShowThumbnails | bool | 1 | Отображать миниатюры | |
| modalThumbsAlign | string | bottom | Выравнивание миниатюр | top, bottom, |
| Увеличение изображения | ||||
| elevateUseZoom | bool | 1 | Использовать зум | |
| elevateZoomType | string | lens | Тип увеличения лупы | window, lens, inner, |
| elevateLensShape | string | round | Форма лупы | round, square, |
| elevateZoomWindowPosition | integer | 1 | Положение окна лупы | 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, |
| elevateScrollZoom | bool | 1 | Масштабирование с помощью прокрутки | |
| elevateLensSize | int | 250 | Размер линзы | |
| elevateLensBorderColor | string | #fff | Цвет границы | |
| elevateLensBorderSize | int | 1 | Толщина границы | |
| Видео проигрыватель | ||||
| ytplayer_modestbranding | integer | 0 | Скрыть логотип YouTube | |
| ytplayer_color | string | red | Цвет прогрессбара видеоплеера | red, white, |
| ytplayer_theme | string | dark | Тема оформления видеоплеера | light, dark, |
| ytplayer_iv_load_policy | integer | 1 | Видеоаннотации | 1, 3, |
| ytplayer_showinfo | integer | 0 | Отображение информации видео | |
| ytplayer_rel | integer | 0 | Показывать похожие видео | |
| ytplayer_fs | integer | 1 | Показать кнопку полноэкранного режима | |
| ytpquality | string | hqdefault | Качество (разрешение) изображения предварительного просмотра для видео | hqdefault, sddefault, maxresdefault, |
| ytpquality2x | string | maxresdefault | Качество (разрешение) изображения предварительного просмотра для видео (2X) | hqdefault, sddefault, maxresdefault, |
| Интеграция | ||||
| embedCode | Примеры кодов встраивания | По идентификатору товара: {if $wa->shop}{shopGalleryplusPlugin::display($product.id)}{/if} По идентификаторам нескольких товаров: {if $wa->shop}{shopGalleryplusPlugin::multiDisplay([1,2,3], [slideShow=>true])}{/if} По списку товаров: {if $wa->shop}{shopGalleryplusPlugin::displaySet('promo', [slideShow=>true])}{/if} Из массива данных: {if $wa->shop}{shopGalleryplusPlugin::customDisplay([['thumb'=>'/thumb.jpg', 'img'=>'/img.jpg', 'big'=>'/big.jpg', 'title'=>'Product name', 'desc'=>'Description']], '[{"0":"https://youtube.com/embed/s5nWTeLxhHA","title":"Test","desc":"Description"},["https://youtube.com/embed/5gvJGrvRS2k"]]', [slideShow=>true])}{/if} |
||
| videosEmbedCode | Только видео YouTube, без галереи | {shopGalleryplusPlugin::getVideosById($product.galleryplus_videos)} | ||
| Сброс | ||||
| resetSettings | bool | 0 | Сбросить настройки | |
| convertVideos | bool | 0 | Конвертировать видео в новый формат |
Добавьте в конце файла head.html текущей темы дизайна код:
{if $wa->isMobile()}
<!-- {literal} --><style>
.galleryplus-next, .galleryplus-prev {display: none !important;}
</style><!-- {/literal} -->
{/if}
Нужно отключить в настройках плагина опцию "Автоматическая инициализация", и добавить код в шаблоне:
{literal}
<script type="text/javascript">
(function($){$(function(){
$('.galleryplus').each(
function(){
var gp = $(this).GalleryPlus();
gp.fn.playSlideShow(); //получение доступа к нужным функциям
});
});
})(jQuery);
</script>
{/literal}
Такая возможность, добавлена, начиная с версии v0.3.4
↑ Вверх ↑
