JBZoo Image Slider (nivo) - jQuery image slider for ZOO

8.0/10 rating (3 votes)

Website appearance should be attractive and must draw attention of its visitors. In order to display items and services more conveniently, we suggest you to try JBZoo Image Slider element.

What is JBZoo Image Slider?

JBZoo slider is a spectacular image slider for ZOO based on a jQuery Nivo Slider plugin. It can be used to display product images, banners etc.

Features:

  • Images are selected from a folder;
  • This element can be used in the item submission;
  • Easily manageable;
  • It’s possible to configure dimensions, effects, timeouts etc;
  • Automatic image resizing to the needed size.

Element configuration

Settings in the ZOO control panelGo to the control panel and click the “cog-wheel” tab:

JBZoo App configurationOpen JBZoo App configuration:

Element LibraryEditing an item type

Choose an item type that will contain JBZoo Image Slider element. Hover over it with a mouse and click on the “Edit Elements” link.

Choose JBZoo Image Slider (nivo) from the Element Library on the right.

 

You’ll have new element. Click on the pencil icon to configure it.

Element configuration in a ZOO item type

  • Access level shows what kind of users will be able to see this element:
    • public (all visitors can see the slider);
    • registered (slider will be only available for registered users);
    • special (only for administrators).
  • Name is an element title that can be later displayed on the website.
  • Description is available only for administrators. It will not be displayed on the website.
  • Source Directory is a place from where the slider will take images.

Press “Save & Close”.

Configuring the slider in a template

Item template layoutsFind your item type and you’ll see a list of its templates in the “Template Layouts” column. Choose one of the templates, “Full”, for example.

Dragging element to a positionFrom the list of custom elements on the right find the one that you’ve added and drag it to a desired position on the left. Then click on the pencil icon.

Slider element configuration in the Full template

  • Show label option determines whether element name will be displayed on the website or not.
  • Alternative label allows you to override a default label
  • You can set width and height of thumbnails in pixels. The slider will switch images of a specified dimensions.
  • Thumbnail count determines how many images will be in your slider (0 - no limit).
  • Sorting of thumbnails depends on alphabetical order of image files:
    • ascending - from the last alphabet letter to the first;
    • descending - from the first letter to the last one;
    • random - sorts images randomly.
  • Effects of image switching can be different. For example, transition from right to left or from left to right. If you choose “Random”, effects will be selected randomly. You can select one effect, several (by holding CTRL) or even all at once.
  • Animation speed is a speed of the image transition effect. It is set in milliseconds.
  • Pause time is a time when thumbnail will not change. It is set in milliseconds.
  • You can set whether there’ll be a random or a specified image at the start.
  • If you enable Navigation thumbnails then all images from the folder will be displayed under the slider. If you click on such icon, the slider will switch to that thumbnail.
  • If you don’t want your visitors to switch images on their own, then choose “No” for the “Manual Advance” option.

Press “Save & Close” button.

How to add a slider to an item?

Application for the sliderGo to an application where you want to show a slider. It is Real Estate in our example.

Item editingGo to item editing page.

Choose a folderIn the drop-down list of your element select a folder with the images for a slider. Press “Save & Close”.

After all configuration is done you can have a slider that looks similar to these:

Element without thumbnail navigation Element with a thumbnail navigation
in a “Full” template, without thumbnail navigation with a thumbnail navigation
Elements, Slider

Still gotta questions, who can help me?

Visit our special JBZoo tech support forum which is specifically meant for JBZoo so the priority of the response and its promptness are much better there than in any other place. With inactive account with a “Plus” sign in a tariff plan you can ask for support in one of these sections or use any of our contacts.