JBImage Slider — jQuery cлайдер картинок для Zoo (nivo)

5.0/10 оценка (5 голосов)

Внешний вид сайта должен быть привлекательным и притягивать к себе внимание посетителей. Для удобства показа товаров и услуг предлагаем установить элемент JBZoo Image Slider.

Что такое JBZoo Image Slider?

JBZoo слайдер — эффектный слайдер картинок для Zoo на основе плагина jQuery Nivo Slider. Он может использоваться, например, для показа изображений товаров, баннеров и т. д.

Особенности:

  • Картинки выбираются из директории;
  • Элемент отправляемый через подачи материалов;
  • Легок в управлении;
  • Настраиваются размеры, эффекты, таймауты и т. д.;
  • Автоматический ресайз картинок под нужный размер.

Настройка элемента

Нахождение настроек в панели управления ZooЗайдите в панель управления и нажмите на шестирёнку с правой стороны экрана.

Настройки приложения JBZoo App

 

Зайдите в настройки приложения JBZoo App.


Библиотека элементовРедактирование типа материалаВыберите тип материала, в котором будет находиться элемент JBZoo Image Slider. При наведении курсора на заголовок типа, появится надпись Редактировать поля. Нажмите на неё.

Справа, в библиотеке элементов, выберите JBZoo Image Slider (nivo).

У вас появится новый элемент. Нажмите на иконку карандаша для редактирования настроек.

Уровень доступа показывает, кто из посетителей сможет увидеть слайдер:

Настройка элемента в типе материала Zoo

  • опубликовано (слайдер доступен всем посетителям);
  • зарегистрированный (доступен для зарегистрированных пользователей);
  • специальный (только для администратора).

Заголовок — название элемента, которое в дальнейшем может быть опубликовано на сайте.

Описание заголовка доступно только для администратора. На сайте оно не показывается.

Исходная директория — это место, откуда слайдер будет брать изображения.

Нажмите кнопку Сохранить и закрыть.

Настройка элемента слайдера в шаблоне

Настройка элемента слайдера в шаблоне FullНайдите ваш тип материала, и напротив него в столбце Вывод шаблона вы увидите шаблоны вывода материалов. Выберите шаблон, например, Full.

Расположение элемента в позициюСправа, в списке Пользовательских элементов, найдите тот, который вы добавили и перетащите в любую позицию слева. Нажмите на иконку карандаша.

  • Опция Показать ярлык отвечает за то, будет ли показано название элемента на сайте или нет.
  • Альтернативная метка — возможность переопределить заголовок поля по умолчанию.
  • Установите Ширину и Высоту миниатюр (в пикселях). Слайдер будет переключать картинки с установленными размерами.

Настройка элемента слайдера для Zoo в шаблоне Full

  • Количество миниатюр — какое количество изображений будет в вашем слайдере (0 означает не ограничено).
  • Сортировка миниатюр производится в зависимости от алфавитного порядка названия файла изображения:
    • по возрастанию (от первой буквы алфавита к последней);
    • по убыванию (от последней к первой);
    • случайный (сортировка картинок в хаотическом порядке).
  • Эффекты переключения картинок могут быть различными. Например, смена изображений справа налево или слева направо. При выборе Случайного эффекта, переход изображений будет производится всеми эффектами в списке в хаотическом порядке. Можете выбрать один понравившийся эффект, несколько (зажав кнопку Ctrl) или даже все эффекты сразу.
  • Скорость анимации — это скорость переключения эффекта в изображении. Устанавливается в милисекундах.
  • Время паузы — это время, в течение которого миниатюра не будет изменятся. Устанавливается в секундах.
  • Вы можете выбрать, будет ли у вас показываться Случайное фото при старте или установленное.
  • Контролы для миниатюр. При их включении под слайдером на сайте будут видны все изображения из директории. При нажатии на картинку, слайдер переключится на эту миниатюру.
  • Если вы не хотите, чтобы пользователи сайта вручную переключали изображения в слайдере, то выберите Да в опции Ручное переключение.

Нажмите кнопку Сохранить и закрыть.

Как добавить слайдер в материал?

Каталог в Zoo для редактирования материаловПерейдите в каталог, в котором хотите показать JBZoo Image Slider. В нашем примере это Недвижимость.

Редактировние материалаЗайдите на страницу редактирования материала.

Выберите директориюВ выпадающем списке вашего элемента выберите директорию, в которой находятся изображения для слайдера.

 Нажмите Сохранить и закрыть.

 

После настройки элемента у вас могут получиться такие слйдеры:

 Элемент без контрол для миниатюр  Элемент с контролами для миниатюр
 в шаблоне Full без контролов для миниатюр  с контролами для миниатюр
Widgetkit, Элементы

У меня остались вопросы, где я могу их задать?

Вы можете обратиться на наш специальный форум техподдержки JBZoo. Если у вас нет активного аккаунта со знаком «плюс» в тарифном плане, то вы можете задать свой вопрос в одном из этих разделов или на любой из наших контактов. Форум специально предназначен для JBZoo, приоритет и скорость ответа там выше.