WYSIWYG Web Builder

Содержание

Фотогалерея (Фотоальбом)

Пример фотогалереи (расположение изображений в таблице для ранних версий редакттора)

Пример фотогалереи (с использованием Light Box)

• в меню Insert  выберите Image - Photo Gallery
  
• на Панели вставок щелкните по Photo Gallery.
• на вкладке Insert ленты щелкните Photo Gallery (для WYSIWYG Web Builder 9 и 10)

В окне редактирования растяните рамку для фотогалереи.

Дважды щелкните внутри рамки - откроется окно свойств фотогалереи.

Настройки фотогалереи

Вставьте фотогалерею в окно редактирования. При двойном щелчке по рамке фотогалереи открываются ее настройки.

Раздел Images - Изображения

Add - Добавить - Добавьте одно или более изображений к фотогалерее.

Remove - Удалить  - Удалите выделенное изображение (я) из фотогалереи.

Remove All - Удалите Все - Удалите все выделенные изображения из фотогалереи.

Move Down и Move Up - перемещение изображений вверх\вниз в списке изображений.

Rotate (Вращение)
Поворот выбранного изображения на 90 градусов. Обратите внимание, что это будет изменять исходное изображение.

Advanced
Этот параметр указывает источник (расположение) изображений для галереи.

Use Local images (Использование локальных изображений)
Изображения будут загружены с локального компьютера.

Get images from an Instagram account (Получение изображений из аккаунта Instagram)

Get images from a folder on the server (Получение изображений из папки на сервере)
Это использует PHP поэтому расширениz файла в свойствах страницы должны быть установлены как PHP и страница работает только в интернете! Если изображения имеют метаданные описания, то они будут автоматически использованы для заголовка. 

Auto titles (Авто заголовки)
Используйте этот параметр для автоматического назначения заголовков изображениям на основе названия файла.

Thumbnail title - Заголовок эскиза. Введите текст, который будет отображен под изображением эскиза. (нужно выбрать 'Include title' в Текстовой cтранице).

Thumbnail size - Определяет размер изображений эскиза. Выберите  'Variable' -'Переменную', чтобы динамически определить размер эскиза.
Помимо стандартных размеров Вы можете также ввести свои собственные размеры. Например: 200x300, 50x150 и т.д.

Выберите 'Responsive'  ("отзывчивый"), чтобы сделать фотогалерею отзывчивой для разных экранов. При выборе этого параметра галерея может иметь разное количество столбцов в точках останова (в Контрольных точках).

Columns - Столбцы - Число изображений в строке. Если размер эскиза установлен как 'Responsive' ("отзывчивый"), то количество столбцов может отличаться в точках останова (в Контрольных точках).

alignment - Горизонтальное и вертикальное выравнивание эскизов

Padding (Cell Padding) - Введите расстояние от края ячейки до содержимого ячейки, в  пикселях.

Cell Spacing - Введите расстояние между ячейками таблицы, в пикселях.

Maintain aspect ratio - Выберите этот параметр, если требуется сохранить соотношение сторон изображения в эскизе (сохранять пропорции)
Если эта опция Не выбрана, размер миниатюры будет изменен, чтобы вместить весь прямоугольник.

Generate thumbnail images (Создание эскизов изображений
По умолчанию Web Builder создает окно предварительного просмотра, в котором отображаются исходные изображения.
Если размер этих изображений большой, загрузка страницы в браузере может занять много времени. Вместо этого вы можете включить создание миниатюр изображений, которые будут генерировать меньшую версию изображений, так что страница будет загружаться быстрее.

Prefix  используется в названиях миниатюр (при выборе опции Generate thumbnail images).

Enable Lazy Loading (отложенная загрузка)
Включите эту опцию, чтобы отложить загрузку изображений до тех пор, пока они не будут видны в окне просмотра. Это ускорит загрузку страницы. Это также предотвращает загрузку больших изображений в мобильных устройствах, потому что только видимые изображения будут загружены.
Подробнее см. http://www.wysiwygwebbuilder.com/photogallery.html

Gallery Mode - Определяет то, что случается, когда пользователь нажимает на изображение.

Open in the same browser window - Открыть в том же самом окне браузера Большая версия изображения будет отображена в том же самом окне браузера.

Open in a new browser window - Открыть в новом окне браузера
Большая версия изображения будет отображена в новом окне браузера.

Open in a popup window - Открыть во всплывающем окне
Большая версия изображения будет отображена во всплывающем окне браузера. У всплывающего окна будет размер полного изображения.

Open in another window - Открыть в другом окне
Большая версия изображения будет отображена в другом окне (будут применены фреймы).

Open in a jQuery Dialog - Открыть в jQuery Dialog.
Используйте кнопку Settings, чтобы изменить появление диалога.

Light Box Gallery - Демонстрация с использованием  lightbox.
Вы можете выбрать одну из встроенных демонстраций слайдов: slimbox, prettyphoto, fancybox. Чтобы настроить поведение лайтбокса, вы можете добавить дополнительные параметры через 'Options' ("Параметры"). Дополнительные сведения о возможных параметрах конфигурации см. в документации или на веб-сайте конкретного лайтбокса.
Дополнительные galleries/lightbox - дополнения к программе могут быть загружены от раздела загрузки вебсайта:
http://www.wysiwygwebbuilder.com/download.html

Use Links (Использовать ссылки)
Этот параметр позволяет назначить ссылки на изображения вместо открытия изображения.
 

Generate thumbnail images - Произведите изображения эскиза

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

Prefix -Приставка к названию изображения эскиза

Вкладка Style (Стиль)

Display  title (Include title) - Включайте заголовок изображения под эскизом. Вы можете также изменить тип шрифта, размер, стиль и цвет заголовка.

Frame - Выбор вида рамки. WYSIWYG Web Builder включает в себя несколько предопределенных стилей рамки, но вы можете легко добавить свои собственные стили.
Скопируйте свои собственные стили (gif, jpg или png) в папку gallery, где каждый стиль имеет свою собственную папку -
My Documents\WYSIWYG Web Builder\system\gallery\yourstyle\
Стили рамки сделаны из 8 изображений (обратите внимание, что вы также можете использовать расширения jpg и png!).

Тип 'Default' - добавляет просто границу, где Вы можете определить ширину и цвет.

Polaroid mode - Режим Полароида

В фотогалерее также есть режим Polaroid, который использует CSS3 и имеет несколько интересных эффектов, таких как повернутые или переменные поляроиды.

Чтобы включить режим Polaroid, выберите (Polaroid) в качестве стиля рамки (frame style). Для лучшего эффекта установите ширину рамки 20 или более и используйте белый цвет. Также добавление немного тени (shadow), чтобы дать ему более реалистичный эффект.

Rotate polaroids (Поворот полароидов) произвольно поворачивает изображения для имитации стопки фотографий. Полароиды будут беспорядочно вращать изображения.  Вы также можете установить для каждой фотографии разный размер.

Для опытных пользователей, которые хотят иметь больше контроля над углами и индивидуальным масштабированием изображения: удерживая нажатой клавишу SHIFT, установите флажок опции (checkbox options). Откроется диалоговое окно, в котором можно указать массив углов или масштабов.
Если эти значения не имеют смысла для Вас, пожалуйста, не редактируйте их!

Polaroids are draggable
Добавляет возможность перемещать поляроиды по странице. Так же, как "настоящие" Полароиды.

Animate polaroids on page load - создание анимированной фотогалереи Polaroid при загрузке страницы.

Примечание:
Тени и вращение не будут показаны в окне редактирования. Вычисления, необходимые для того, чтобы показать эти эффекты при создании страницы, заняли бы значительное количество времени и системных ресурсов, замедляя работу программного обеспечения. Чтобы рассмотреть результат - пожалуйста анонсируйте страницу в совместимом браузере.

Новое: Галерея теперь использует CSS вместо таблиц.

Галерея автоматически сжимает большие изображения при погрузке.

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

Добавлен выбор 'Responsive' (см. Сайты для разных экранов) для миниатюр изображений. При этом выборе у галереи может быть различное число колонок в контрольных точках! Изображения в галерее будут изменяться в зависимости от доступного места.
Это означает, например, что когда галерея в Сетке расположения , то она может быть полной ширины. Или используйте процент от размера ширины  экрана.
Добавлена поддержка  "Ленивой" загрузке  (Lazy Loading).
Добавлен выбор Text padding.
Добавлен радиус закругления рамок изображений по умолчанию, создание стиля рамки. 
Добавлена способность вставить описание для изображений.
Добавлена возможность создавать миниатюры изображений

Lightbox

Новое: Добавлена поддержка Magnific Popup. Magnific Popup может использоваться в демонстрации слайдов, фотогалерее, YouTube, Vimeo,  Inline frame.
Magnific Popup может также использоваться как замена по умолчанию Fancybox lightbox, который используется в связях. Это может указываться в Свойствах Страницы (Page Properties).
Подробнее о Lightbox

Посмотреть пример фотогалереи (Фотогалерея создана с использованием отзывчивого дизайна - измените ширину окна браузера при просмотре)

Подробнее о создании фотогалереи (англ. язык)

Новое: При создании фотогалереи добавлены некоторые новые функции - возможность интеграции с Instagram, использование новых тегов HTML5 (например <figcaption>), фотогалерея теперь позволяет использовать лайтбокс/Galleria с компоновками  (в меню Tools -> Options -> HTML).