This plugin integrates jQuery ColorBox in XOOPS and Common Utilities.

1. Download compressed file from Github!
2. Extract compressend file to your hard disk drive.
3. Upload forlder "lightbox" to directory "modules/rmcommon/plugins" from your XOOPS installation.
4. Go to XOOPS control panel -> Plugins manager and click on tab "available plugins".
5. Install de plugin.
6. Done!

This plugin provides a set of configuration options that can be useful in most of cases. In order to setup the plugin, follow next steps:

1. Go to XOOPS control panel -> Common Utilities block manager.
2. Locate the plugin in the list from "Installed plugins" tab.
3. Click on "settings" option.

Now you can view the configuration form. Modify the values acording to your preferences.

Next is the list of available options in Lightbox plugin.

Using LightBox for Common Utilities is very simple.

This is the easier way for alls. In order to integrate lighbox with any image (or other elements), you can use the next code:

[lightbox]
<a href="#" class="class-name"><img src="thumbnail"></a>
<a ...></a>
...
[/lightbox]

You can pass any valid parameter to jQuery Color box using custom code (Please, check a list of valid options).

[lighbox name="lightbox-container" rel="my-thumbnails" transition="fase" scalePhotos="true"]
<a href="#" class="class-name"><img src="my-thumbnails"></a>
<a ...></a>
...
[/lightbox]

Note: Lighbox will use, in first place, the options than can be configured from settings form. If you specify any of those default values, then the new value provide by ypu will be used.

You can use the plugin directly from your PHP code.

Example:

HTML code:

<div class="my-thumbnails">
  <a href="image-url-1" class="my-thumb-item" title="The image title"><img src="thumb-url-1"></a>
  <a href="image-url-2" class="my-thumb-item" title="The image title"><img src="thumb-url-2"></a>
  <a href="image-url-3" class="my-thumb-item" title="The image title"><img src="thumb-url-3"></a>
  ...
</div>

PHP code:

if (RMFunctions::plugin_installed('lightbox')){
  RMLightbox::get()->add_element('.my-thumbnails');
  RMLightbox::get()->render();
}

Now, Lighbox will search for a continer with class my-thumbnails in HTMl code and will render the apropiate code to display jQuery Colorbox plugin.

You can pass parameters to javascript code using PHP:

New PHP code:

if (RMFunctions::plugin_installed('lightbox')){
  RMLightbox::get()->add_element('.my-thumbnails');
  // Options
  RMLightbox::get()->add_option( 'rel', 'work-image-item' ); // This will show the images as group related for "my-thumb-item" css class
  RMLightbox::get()->add_option( 'transition', 'fade' ); // This will overwrite de default value for "transition" option.
  RMLightbox::get()->render();
}