GraphiBox Element for ZOO

4.9/5 rating (21 votes)
Review on JED
  • Added: 04 October 2012
  • Updated: 30 May 2018
  • File size: 13.59 KB
  • Version: 3.2.0
  • Dwnlded: 2563
  • Author: Attavus M.D.
  • License: GPLv2 or later
  • Type: Non-Commercial

Fork of YOOtheme ZOO Element "HTML Checkbox" - GraphiBox: graphical checkbox, radio, select.

The element allows to add to everyone checkbox, radio, select options on a image.

A select element transformed into a more user friendly graphical interface trought a simple jQuery plugin Image Picker.


GraphiBox Element will only work correctly if your setup meets these requirements:

  • PHP 5.3+
  • MySQL 5+
  • Up-to-date version of Joomla 2.5.x or higher
  • Previously installed YOOtheme ZOO 3.2.x or higher

Important: I can only provide support for setups that:

  • meet the above requirements;
  • do not have extension files or Joomla! core files which have been altered in any way.

Minimum Version of PHP


Minimum Version of MySQL



There are no dependencies.


  1. Download GraphiBox Element package from this page.

  2. Go to the Joomla Extension Manager (Joomla Administration / Extensions / Extension Manager / Install).
  3. Use the "Upload Package File" option to choose the previously downloaded package from your pc.
  4. Click on the "Upload & Install" button.

Note: When you are facing an error during installation, it is highly recommended to try to Install from directory:

  1. Unpack all files from the GraphiBox Element downloaded package to a directory on your pc.
  2. Using FTP, upload this directory to the /tmp directory of your Joomla installation on your webserver.
  3. Go to the Joomla Extension Manager (Joomla Administration / Extensions / Extension Manager / Install).
  4. Use the "Install from Directory" option to set the directory of your uploaded package files.
  5. Click on the "Install" button and Joomla will install it from the given directory.


In this tutorial you learn how to configure a graphibox element with its specific values to use it in the ZOO extension.

1. Element Configuration

Add the GraphiBox Element element to the desired Type and configure as needed. If you are not familiar with this process please review the official ZOO docs.
elm graphibox configuration

 Here is the description of the different values:

Name: Type in the name for this element which will be used later on, for example in the item creation view or as label in the frontend. With the name you also can identify the element, when you assign it to a template position.

Description: The description will show up as a tooltip in the item creation view

Default: When you create an item, the default value is automatically set for this element. In the radio element the default value has to be one of the options (see description of the Option field).

Option: By clicking on Add Option you can add new options to this element. When you type in the name, the value is generated automatically. Usually you do not have to edit the value, but if you want to change it, simply click on it and type in a new one. By hovering the options, small icons for sorting and deleting appear. Note: the button for a choice of the image appears after conservation of primary options of an element.

Type: Type of the GraphiBox - checkbox or radio or select.

Hide Select: Wheter the original select item should be hidden or not. Default: true.

Show Label: If set to true, the text of each option will be added as a paragraph below each image. Default: false.

Multiple: Choose, whether you can select more than one value of this select element during item creation (see step 3).

Data limit: If it's a select multiple and set to any value, it'll cap the selectable elements at that value. Default: undefined.

2. Element Assignment

Every element has to be assigned to a template position to show up for the visitors in the frontend of the site. See this tutorial how to assign elements to the template positions.

graphibox assignment

You can set whether the label is shown in the frontend or not. If you choose Yes the name of the element (see previous step) is used for it. If you do not want to use the elements name as label you can type in an alternative. Of course the Show Label option have to be enabled to show the alternative label.

Alternative Label - Allows to customoze the default label (the element's name set in the Type) for this specific position.

Show option name - If set to true, the text of each option will be added as a paragraph below each image. Default: false.

Separated by - If you show more than one value in the frontend you can set how the values are separated. You can choose between different chars like comma or pipe or the values can be wrapped by a html element like a div or a li.

3. Item Creation

graphibox item creation

This is how the element looks when you create an item. See this tutorial for creating an item. The name of the element is shown on the left and the options on the right.

+ Added graphical radio, select

+ Added support for Joomla 3.0
# Fixed bug
# Fixed bug
^ Changed template
+ Сreated an installation file for Joomla 2.5
+ Initial Release

* -> Security Fix
# -> Bug Fix
$ -> Language fix or change
+ -> Addition
^ -> Change
- -> Removed
! -> Note

Comments (5)

  • LTeds


    13 December 2012 at 23:40 |
    element is not working with joomla 3.0


  • Tomy Francois

    Tomy Francois

    16 March 2013 at 14:34 |
    Hi, we are having a small issue on the position of the field, it is showing behind other fields, how can we send you more information to help us please?


    • Attavus M.D.

      Attavus M.D.

      17 March 2013 at 18:08 |
      Can create new theme in the forum in the relevant branch.


Leave a comment

Please login to leave a comment. is a worldwide leader in online payment services