JBZoo image - repeatable image with pop-up

New ZOO element - repeatable image with lightbox zoom.

9.8/10 rating (5 votes)

JBZoo Image is a repeatable image with pop-up. This means that it becomes enlarged after a click. Usually images can have big dimensions and take up a lot of space on a website. With JBZoo Image element it is possible to make them smaller which will be prettier and more convenient.

Element description

JBZoo Image is an improved version of the standard ZOO image element.

Features:

  • Repeatable field. Now there is no need to make several extra fields for images.
  • Built-in pop-up (image is displayed in a lightbox on a click).
  • This element works with item submission forms.
  • It is possible to specify a custom link or a link to an item.
  • Configurable dimensions of thumbnails and pop-up images.
  • It is possible to upload files of different users in separate folders.
  • Also it is possible to specify the path to a default image.

Example on the demo website

Adding new field

JBZoo Image in the Element LibraryIn order to add new field to your application, you need to do the following:

  1. Click the “Cog-wheel” icon in the ZOO component.
  2. Select “JBZoo App”.
  3. Hover a mouse cursor over needed item type and click "Edit Elements".
  4. Find “JBZoo App” header in the “Edit Elements” section.
  5. Click on the JBZoo Image.

How to configure JBZoo Image

After adding new element you’ll see a form with "New" as a header.

Element editing in the item type screen

Fill in the common information: field name and description, access level.

Let’s examine the following settings in more detail:

  • Repeatable. This option determines whether it is possible to add multiple images to an item. Now there is no need to have a lot of additional fields for images.
  • Upload path. This is a folder where images from item submission form are uploaded.
  • Max upload size. This is a function that limits image file size (in KB).
  • Upload by users. This option allows to upload images of different users to separate folders.
  • Enable default. This option enables "Default" option.
  • Default. This is a relative path to the default image.

Element configuration in the item template

Go to the configuration of the needed item template and add your new field to it.

Item template layouts

Element configuration in the item template

You can set following parameters here:

  1. Separated by — this is a symbol that will separate images. Like for all repeatable elements in ZOO.
  2. Display — an option that allows you to display all images, only the first one or all except the first one. For example, this is especially convenient in such templates as “Teaser”, where one image is all you need.
  3. Template:
    • Default — it will be displayed like ZOO image (simple image without pop-up).
    • Any link — it will be referring to an url specified during item editing.
    • Item link — it is convenient for a teaser in order to open detailed page on click.
    • Pop-up — image will pop-up on click.
  4. Width and height — image dimensions in normal state.
  5. Pop-up width and height — image dimensions after pop-up.

By default, width and height of the pop-up image are determined by the screen size. If an image is too big, it will be scaled down and centered. It will also have small margins from the screen borders. If an image is smaller than the screen, it will be just centered.

Adding an image to the item

Open an item for editing.

Add a first image. Now, in order to add next one, click on the “Add another Image” link. Also there are “Title” and “Link” tabs. Title will be displayed at the bottom of a pop-up image instead of the page title.

Image management buttons

A link will be referring to any specified page if “Any link” template is chosen.

How does link button work

Appearance on the website

Images are scaled to the size that was specified in the field configuration (width and height). After a click one of four possible actions happen (specified in the “template” parameter).

Configured pop-up image

Elements, JBImage

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.