Примеры использования SwipeBox

Примеры использования SwipeBox

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

ВНИМАНИЕ! все описанное в статье применимо только для сайтов разработанных нашей студией на движке CMF MODx Revolution и встраиваемом визуальном редакторе TinyMCE. 

 

1. Увеличение картинки по клику.

внимание

При увеличении картинка включается в состав "Галереи", состоящей из "Всех" картинок на странице с установленным классом swipebox.
Класс swipebox является инициатором срабатывания скрипта.

 

Пример 1.1 swipebox Увеличение картинки по клику Без Превью

1.1. Увеличение картинки по клику "без Превью".

Действия:

  1. Загрузить на сервер файл картинки в натуральную величину. 
    Рекомендуется, чтобы натуральный размер не превышал 1200х720 px.
  2. Вставить картинку в уменьшенном масштабе.
  3. Сделать ссылкой "на саму себя", т.е. в адрес ссылки подставить адрес картинки.
  4. В окне Параметры ссылки установить:
      • Во вкладке Общие / Класс: swipebox 

 

 

Пример 1.2 swipebox Увеличение картинки по клику с Превью

1.2. Увеличение картинки по клику "с Превью".

Действия:

  1. Загрузить на сервер 2 файла - в натуральную величину и уменьшенную копию.  
    Рекомендуется, чтобы натуральный размер не превышал 1200х720 px.
  2. Вставить картинку - уменьшенную копию.
  3. Сделать ссылкой на файл картинки в натуральную величину, т.е. в адрес ссылки подставить адрес большой картинки.
  4. В окне Параметры ссылки установить:
      • Во вкладке Общие / Классswipebox

 

 

2. Создание Галерей.

 

вниманиеТак формируются независимые Галереи.
При  просмотре будут показаны токлько те картинки, которые объединены параметром
 Gallerys-1, Gallerys-2 ... Gallerys-10

 

Галерея 1 - "Программист в офисе и дома".

Действия для каждого элемента (фото) галереи:

  1. Загрузить на сервер 2 файла - в натуральную величину и уменьшенную копию.
    Рекомендуется, чтобы натуральный размер не превышал 1200х720 px.
  2. Вставить картинку - уменьшенную копию.
  3. Сделать ссылкой на файл картинки в натуральную величину, т.е. в адрес ссылки подставить адрес большой картинки.
  4. В окне Параметры ссылки установить:
      • Вкладка Общие / Классswipebox
      • Вкладка Дополнительно /Отношение страницы к целиGallerys-1

 

Совсем неприметный в офисе программист вечерами преображается и выходит на ночную "Охоту" ...

Гал.1 Программист днемГал.1 Программист ночью

 

 

 

Галерея 2 - "SEO продвижение в Google".

Действия для каждого элемента (фото) галереи:

Повторить все действия как для Галереи 1, но в окне Параметры ссылки установить

      • Вкладка Дополнительно /Отношение страницы к целиGallerys-2

Галерея 2.1. SEO продвижение в Google. Фото 1Галерея 2.1. SEO продвижение в Google. Фото 2Галерея 2.1. SEO продвижение в Google. Фото 3Галерея 2.1. SEO продвижение в Google. Фото 4

 

 

 

Галерея 3 - Одиночная картинка.

 

вниманиеПри  просмотре будет показана токлько эта картинка.
Применяется в тех случаях, когда необходимо показать увеличенную картинку "изолированно" от всех других Галерей и Картинок.

 

Галерея 3 - Одиночная картинкаДействия:

  1. Загрузить на сервер 2 файла - в натуральную величину и уменьшенную копию.  
    Рекомендуется, чтобы натуральный размер не превышал 1200х720 px.
  2. Вставить картинку - уменьшенную копию.
  3. Сделать ссылкой на файл картинки в натуральную величину, т.е. в адрес ссылки подставить адрес большой картинки.
  4. В окне Параметры ссылки установить:
      • Вкладка Общие / Классswipebox
      • Вкладка Дополнительно /Отношение страницы к целиGallerys-3

 

Галерея 4. Gallerys# - Глобальная 

вниманиеЕсли по какой-то причине необходимо "отделить" Gallerys-1 ÷ Gallerys-10 от остальных картинок, т.е. чтобы они не попадали в общую кучу с остальными картинками при их просмотре, тогда используется параметр Gallerys#.

Для этого всем ссылкам с классом swipebox нужно еще установить параметр:

      • Вкладка Дополнительно /Отношение страницы к целиGallerys#

Gallerys# Фото 1Gallerys# Фото 2Gallerys# Фото 3

 

 

Swipe Box video YouTobe Gold Studio

4. Video YouTube

 

Действия:

  1. Загрузить на сервер файл картинку-превью нужного размера. 
  2. Сделать ссылкой, в качестве адреса указав адрес видео, скопированный в адресной строке браузера на странице YouTube.
  3. В окне Параметры ссылки установить:
      • Вкладка Общие / Классswipebox
      • Вкладка Дополнительно /Отношение страницы к целиVideo YouTube


Узнать подробно и проконсультироваться Вы можете у нас в офисе, 
или воспользовавшись контактными данными на

стр. Контакты >