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

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

Go to the control panel and click the “cog-wheel” tab:

Open JBZoo App configuration:

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.

• 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

Find 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.

From 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.

• 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?

Go to an application where you want to show a slider. It is Real Estate in our example.

Go to item editing page.

In 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:

in a “Full” template, without thumbnail navigation	with a thumbnail navigation