Как вставить и настроить слайдшоу на странице

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

 Кнопка с указанной пиктограммой вставляет настраиваемый блок с желтым фоном и красной границей. После того как блок появится на странице, следует щелкнуть внутри него правой клавищей мыши. Этот щелчек вызывает контекстное меню, где следует выбрать пункт "блок div", чтобы открыть окно настройки. Смотрите рисунок слева. Уберите желтый фон или установите цвет фона, который вам желателен. Цвет фона не имеет значения, если все изображения одинаковы по размеру и размеры блока имеют такие же пропорции, что имеют показываемые в слайд-шоу. Однако при медленных каналах связи загрузка начального изображения может позволить увидеть цвет фона и желтый цвет не лучшее решение.  Кроме того, следует настроить цвет и толщину рамки, если таковая вообще требуется. Вышеуказанные настройки производятся в соответствующих вкладках, как указано на рисунках. Посмотрите на них внимательно - ничего сложного в этих операциях нет. Просто надо помнить, что цвет вы можете задать внося в поле код цвета, либо нажав на кнопку выбора цвета и выбирая потом в палитре нужный вам цвет или оттенок. Также обратите внимание, что настройки располагаются в разных вкладках.

Отдельно стоит поговорить о размерах блока. Где указать размеры блока вы видите на рисунке слева. Следует отметить, что изображения, участующие в слайд-шоу масштабируются при помещении в блок по его ширине. Однако, если изображение не помещается при этом по высоте, то изображение масштабируется так, чтобы поместиться по высоте. При этом сохраняются пропорции. Однако лучше всего, если изображения из слайд-шоу имеют либо одинаковый размер, который и указывается в размерах блока, или одинаковые пропорции. Например, ширина и высота изображений соотносятся как 4 к 3. В этом случае размер блока можно указать, опять же как пример, 400 на 300 пикселей. В этом случае изображения будут показаны с одинаковым размером без пустых пространств до границ блока. Однако, если изображения все имеют разный размер, то система, как это уже подчеркивалось, "втиснет" изображения в блок и расположит его в геометрическом центре блока. 

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

После того, как указан тип "слайдшоу", в окне настройки блока  появляется вкладка "настройка слайдшоу" в которой следует указать параметры, что и как показывать. Укажите с каким интервалом сменять изображения. Укажите откуда брать изображения. Если надо брать изображения из папки с изображениями, укажите с какого изображения следует стартовать. Если имя стартового файла начать с символа "*", то имя станет шаблоном для выбора файлов из папки. Например, 123453322/*foto. Файлы foto12.jpg и foto22.png будут отобраны по этому шаблону из папки 123453322. Можно не указывать папку, а набрать список изображений произвольно. Если указано выбирать изображения из папки, то список игнорируется. Нажмите кнопку "Вставить", чтобы сохранить настройки.

Как видите, ничего сложного! Зато какой результат! Заметьте, вы можете на одной странице показывать сразу несколько слай-шоу. И еще, в приведенном слайд-шоу используются изображения совершенно разных размеров, выбранных из указанной папки. Кстати, эти изображения вы можете встретить в примере вывода изображений из папки по шаблону в виде таблицы.

А поскольку изображения из папки (все или по указанному списку) могут выводиться по шаблону, то стоит отметить, что и тут существует способ использовать слайд-шоу. Например, изображения для разделов каталога товаров помещены в одну папку изображений. Положим это разделы: туфли, босоножки и сапоги. Т.е. имеется три изображения - по одному для каждого раздела. Для каждого изображения, а следовательно и для соотвествующего раздела товаров, задана страница описания. Как это сделать ищите в этом руководстве. В каждой странице описания указано, что для данного раздела следует использовать изображения для вывода на страницу из  определенной папки с изображениями. Понятно, что при этом для каждого раздела есть свой набор изображений. Вы сейчас видите слайд-шоу из изображений, находящихся в папке "Туфли". Далее немного напрягите внимание. Итак, страницу можно настроить так, что в нее будут помещены изображения из какой-либо папки с изображениями. Причем можно указать шаблон, который будет использоваться для оформления вывода изображений. Если для выводимых изображений существуют страницы описаний, в которых в свою очередь указано выводить изображения из папки с изображениями, то можно сделать так, что вместо изображения раздела каталога товаров будет выводиться слайд-шоу из изображений товаров этого раздела! Для этого достаточно указать такой шаблон:

В шаблоне укажите рабочую ширину (width) и высоту (height) блока слайд-шоу, вместо указанных в примере 100%. Если все сделано правильно, то на странице каталога, где должны были бы выводится изображения разделов, вы увидите три слайд-шоу, каждое из которых будет показывать товары из своего раздела. Причем, если количество товаров в папке изображений какого-то раздела изменится, то никаких перестроек страницы делать не надо - все изображения товаров будут выводиться последовательно. А что если какой-то раздел не имеет страницы описания, а следовательно и набора изображений? В этом случае будет показано статичное изображение для раздела и слайд-шоу для этого раздела показано не будет. Чтобы понять, как это получается, обратите внимание на переменные шаблона. Вместо {GALLERY_URL} система подставляет адрес первого изображения из папки с товарами раздела, а если такой папки нет, то здесь пусто и начинает работать переменная {FOTO}, которая указывает на изображение для раздела. Кроме того, задано, чтобы при щелчке на слайд-шоу открывалась страница описания данного раздела товаров. За это отвечает переменная {SITE_URL}. Описания необходимых классов содержит файл menu.css, который включается в шаблон сайта. При необходимости укажите атрибут data_wvg_variant="X" для DIV (в примере сразу после тега А). Это заставит слайды меняться смещением по горизонтали. 

Web-мастерам : для того, чтобы все работало нормально в файле стилей menu.css должно быть задано следующее:

 Имеется более продвинутый способ вставить слайд-шоу на страницу. Причем это работает для папок изображений, имеющих шаблон для вывода. Т.е. прокручиваться будут блоки. В документации при описании "Шаблоны вывода изображений" дан пример вывода изображений по шаблону. Но там на страницу основной контент выведен в переменную {CONTENT }, а вот изображения по шаблону вставлены вместо переменной {SUBCONTENT }. Однако можно было бы вставить в содержание страницы блок. Как вставляется блок, описано в документации "Как вставить карту на страницу сайта". Кроме описанного там способа заполнения содержимым, есть возможность заполнить блок содержимым из папки с изображениями. Но папка с изображениями обязательно (!) должны иметь шаблон вывода ее содержимого. Чтобы произвести необходимые настройки создайте, а затем откройте блок на вкладке "flex"
Укажите как располагать содержимое - в строку или колонку. Вариант зависит от того, как заданы ширина и высота блока. В нашем случае шаблон задан в виде строк и столбцов таблицы, поэтому системы и выведет таблицу. Следовательно надо указать, что содержимое выводится в столбец.  Запретите перенос и укажите, что выравнивать следует вверх и влево. После чего следует заполнить поля внизу вкладки:

Выберите любое изображение из папки с изображениями, содержимое которой следует вывести в блок. Но помните, что шаблон вывода изображений не должен быть таблицей с ID="КОНТЕЙНЕР"- такая таблица представляет все изображения как единый элемент (хоть и со многими строками), а для слайдирования необходимо несколько элементов. Если вы укажите интервал прокрутки содержимого, то прокрутка будет осуществляться автоматически - влево или вверх, а потом возврат к исходному положению. Если интервал задан 0, а в примере поле "из папки прокрутка через сек" именно 0, то прокрутка может быть сделана вызовом функции toScroll("Id_блока"). Именно так следует прописать в виде действия onclick в элементе управления, который вы также можете вставить в редакторе. Если надо прокручивать в обратном порядке, то укажите toScroll('Id_блока',1). Обязательно задайте имя (Id) блоку в его настройках (см. вкладку "события") и тип блока "flex" (см.вкладку "база"). Все! Более ничего не требуется. Как это может выглядеть, смотрите внизу:

 В примере ширина блока не указывалась, чтобы он автоматически расширился под всю строку. А высота была задана так, чтобы поместилось 2 строки. Система сама слегка подстраивает ширину или высоту блока так, чтобы содержимое не вылезало или висело. Но если не указывать высоту и ширину, то все содержимое будет помещено в блок и видно в нем. Укажите в этом случае интервал 0 и вот вам еще один способ представить содержимое папки с изображениями целиком. Когда указано изображение из папки с изображениями, содержимое которой следует вывести в блок и при этом перед именем файла стоит символ "*" (звездочка), тогда система воспринимает это имя как шаблон для отбора файлов. Например, указано /images/12345543/*foto.png. Система отберет только файлы, которые начинаются с "foto". Т.е. будут отобраны файлы foto123.png или foto_2.jpg или fotoprimer.gif.