ARI Colorbox plugin helps load ARI Colorbox module anywhere in Joomla! content and provide ability for using ARI Colorbox inline in articles.
How to load 'ARI Colorbox' module into article?
Type the following code in article for loading ARI Colorbox module:
{aricolorbox moduleId="<moduleId>"}
Where <moduleId> is ARI Colorbox module id. You can find module id if open 'Extensions->Module Manager' page in modules grid in ID column or on module settings page in ID field.
How to show inline content?
Type the following code in article:
{aricolorbox activeType="icontent" opt_width="300" opt_height="250" link="Click me" title="Hidden text"}
Inline content which you want to show in colorbox goes here.
{/aricolorbox}
How to show external page?
Type the following code in article:
{aricolorbox activeType="rcontent" opt_width="300" opt_height="250" url="http://www.google.com" link="Show google site" title="Google"}{/aricolorbox}
How to show Joomla! modules?
Type the following code in article:
{aricolorbox activeType="module" opt_width="300" opt_height="250" id="<moduleId>" link="Show Joomla! module" title="Joomla! module"}{/aricolorbox}
How to show an article?
Type the following code in article:
{aricolorbox activeType="article" opt_width="300" opt_height="250" id="97" link="Show article" title="Article"}{/aricolorbox}
Indicate necessary article ID with help "id" parameter.
How to show image, Flickr and Picasa galleries?
We recommended to use 'ARI Colorbox' module for showing image, Flickr and Picasa galleries because module contains user friendly UI for entering parameters.
"How to load 'ARI Colorbox' module into article" section contains information how to load 'ARI Colorbox' module into article, but if you want to
specify parameters for showing Flickr photos and image galleries directly in plugin tag, use the following code for showing image galleries:
{aricolorbox activeType="imglist" dir="images/stories;images/banners"}{/aricolorbox}
See below list of available parameters:
- thumbWidth - width of thumbnail images. Values: number;
- thumbHeight - hidth of thumbnail images. Values: number;
- thumbPath - if you want to use your own thumbnails instead of auto generated thumbnails, specify in this field path to thumbnails. You can use predefined variable {$fileName} which contains original file name. For example you want to use thumbnails from 'thumb' subdir in folder which contains original images and thumbnails will have the same file names as original images, then specify in this field 'thumb/{$fileName}' value. Values: string;
- generateThumbs - enable or disable auto generating of thumbnails. For generating thumbnail one of the following PHP graphic library should be installed on your server: GD (usually installed on the most hosting services), ImageMagick. Values: true,false;
- thumbType - specify method for creating thumbnail. Values: resize, crop or cropresize;
Additional parameters for 'crop' method:
- x - x coordinate for crop method;
- x - y coordinate for crop method.
Additional parameters for 'cropresize' method:
- x - x coordinate for crop method;
- x - y coordinate for crop method.
- width - width for crop method;
- height - height for crop method.
- descrFile - file with descriptions of images. It is CSV file where you can place additional parameters for images from folder where this file is located. Use 'File' column for specifing file name, 'Title' column for indicating title of image, you can add aditional columns to this file and use these parameters for showing image gallery. Save this file in UTF-8 encoding without BOM. Values: file name;
- sortBy - specify parameter for image list sorting. Values: none, filename, modified, random;
- sortDir - specify sort direction. Values: asc, desc;
- subdir - specify need to scan subfolders or not. Values: true, false;
- dir - speficy directories with images which you want to display. Values: path to image folders are separated by semicolumns;
- type - layout type. Values: gallery, advgallery, singleimage;
Additional parameters for 'gallery' type:
- itemCount - specify items count per row. Values: number;
- mainClass - specify CSS class of gallery container. Values: name of CSS class;
- rowClasses - specify rows CSS classes. Values: cyclic rows CSS classes are separated by semicolumns;
- emptyText - specify items not found message. Values: string.
Use the following code for Flickr photos:
{aricolorbox activeType="flickr" source="photoset" photosetId="[photosets]"}{/aricolorbox}
See below list of available parameters:
- apikey - Flickr API key. Values: string;
- cachePeriod - indicate cache time in seconds. For this period module will use cached data instead of request data through Flickr API. If you don't want to use cache, leave this parameter empty or set to '0'. Values: number in seconds;
- thumbSize - specify thumbnail size. You can use 'original' value, only if it's permitted by owner of photoset. Values: square, thumbnail, small, medium, large, original;
- imgSize - specify image size. You can use 'original' value, only if it's permitted by owner of photoset. Values: square, thumbnail, small, medium, large, original;
- count - specify image count which will be loaded from photoset. If you specify several photosets, then from each of them will be loaded 'count' photos.. Values: number;
- source - source type. Values: collection, group, photoset, user;
Additional parameters for 'collection' type:
- collectionId - Flickr collection id. Values: Flickr collection IDs are separated by semicolumns;
- userId - Flickr user ID. Values: Flickr user IDs are separated by semicolumns.
Additional parameters for 'group' type:
- groupId - Flickr group id. Values: Flickr group IDs are separated by semicolumns.
Additional parameters for 'photoset' type:
- photosetId - Flickr photoset id. Values: Flickr photoset IDs are separated by semicolumns.
Additional parameters for 'user' type:
- userId - Flickr user ID. Values: Flickr user IDs are separated by semicolumns.
- type - layout type. Values: gallery, advgallery, singleimage;
Additional parameters for 'gallery' type:
- itemCount - specify items count per row. Values: number;
- mainClass - specify CSS class of gallery container. Values: name of CSS class;
- rowClasses - specify rows CSS classes. Values: cyclic rows CSS classes are separated by semicolumns;
- emptyText - specify items not found message. Values: string.
Use the following code for Picasa photos:
{aricolorbox activeType="picasa" user="[picasa_user]" album="[picasa_album]"}{/aricolorbox}
See below list of available parameters:
- cachePeriod - indicate cache time in seconds. For this period module will use cached data instead of request data through Picasa API. If you don't want to use cache, leave this parameter empty or set to '0'. Values: number in seconds;
- thumbSize - specify thumbnail size. Values: 32, 48, 64, 72, 94, 104, 110, 128, 144, 150, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600;
- imgSize - specify image size. Values: 32, 48, 64, 72, 94, 104, 110, 128, 144, 150, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600;
- count - Specify image count which will be loaded from an album. Values: number;
- offset - 1-based index of the first result to be retrieved. Values: number;
- source - source type. Values: albumsource, albumssource;
Additional parameters for 'albumsource' type:
- user - picasa user name. Values: user name;
- album - picasa album name. Values: album name.
Additional parameters for 'albumssource' type:
- user - picasa user name. Values: user name.
- type - layout type. Values: gallery, advgallery, singleimage, picasaalbums;
Additional parameters for 'picasaalbums' type:
- itemCount - specify items count per row. Values: number;
- mainClass - specify CSS class of gallery container. Values: name of CSS class;
- rowClasses - specify rows CSS classes. Values: cyclic rows CSS classes are separated by semicolumns;
- emptyText - specify items not found message. Values: string.
How to create thumbnails for images in content?
If you want to create thumbnails for existing images in Joomla! content and display them in pretty popup, wrap necessary content with {aricolorbox} tag. In other words, use the following code:
{aricolorbox thumbWidth="250" thumbCount="2"}
content ... content ...
<img src="[path_to_large_image]" alt="description" />
content ... content ...
<img src="[path_to_large_image2]" alt="description" />
content ... content ...
{/aricolorbox}
See below list of available parameters:
- thumbWidth - thumbnails height. Values: number;
- thumbHeight - thumbnails width. Values: number;
- generateThumbs - enable or disable auto generating of thumbnails. For generating thumbnail one of the following PHP graphic library should be installed on your server: GD (usually installed on the most hosting services), ImageMagick. Values: true, false;
- thumbType - specify method for creating thumbnail. Values: resize, crop or cropresize;
Additional parameters for 'crop' method:
- x - x coordinate for crop method;
- x - y coordinate for crop method.
Additional parameters for 'cropresize' method:
- x - x coordinate for crop method;
- x - y coordinate for crop method.
- width - width for crop method;
- height - height for crop method.
- thumbCount - count of thumbnails which will be shown on a page. Values: number;
- single - indicates need to group images to gallery or not. Values: true, false;
- class - container CSS class. Values: string.
Note: all omitted parameters will be filled from plugin settings.
How to override plugin parameters?
By default plugin will be used parameters from "Plugin Parameters" on this page. If you want to override parameters, add necessary parameter(s) to
{aricolorbox} plugin tag in the following format parameterName="parameterValue". For example, if you set "Scale photos" parameter to "No" in "Plugin Parameters"
section and want to override it, use the following code:
{aricolorbox opt_scalePhotos="true"}
See below list of available parameters:
- includeJQuery - indicate should the module load jQuery library or not. Values: true, false;
- noConflict - indicate should the module call jQuery.noConflict() method or not. Values: true, false;
- autoShow - indicates will be lightbox shown automatically when page is loaded or not, if you want to auto show lightbox only on the first load, set this parameter to 'first'. Values: true, false, first;
- unique - unique key, this parameter is required only if you set 'autoShow' parameter to 'first'. Values: string;
- theme - specify colorbox theme. Values: white_black, simple_white, black, white, gray;
- opt_transition - transition effect. Values: none, elastic, fade;
- opt_speed - sets the speed of the fade and elastic transitions. Values: number in milliseconds;
- opt_width - set a fixed total width. This includes borders and buttons. Values: width;
- opt_height - set a fixed total height. This includes borders and buttons. Values: height;
- opt_innerWidth - this is an alternative to opt_width used to set a fixed inner width. This excludes borders and buttons. Values: width;
- opt_innerHeight - this is an alternative to opt_height used to set a fixed inner height. This excludes borders and buttons. Values: height;
- opt_maxWidth - set a maximum width for loaded content. This excludes borders and buttons. Values: width;
- opt_maxHeight - set a maximum height for loaded content. This excludes borders and buttons. Values: height;
- opt_initialWidth - set the initial width, prior to any content being loaded. Values: width;
- opt_initialHeight - set the initial height, prior to any content being loaded. Values: height;
- opt_scalePhotos - if 'true' and if opt_maxWidth, opt_maxHeight, opt_innerWidth, opt_innerHeight, opt_innerWidth or opt_innerHeight have been defined, ColorBox will scale photos to fit within the those values. Values: true, false;
- opt_scrolling - if 'false' ColorBox will hide scrollbars for overflowing content. Values: true, false;
- opt_opacity - the overlay opacity level. Values: float number from 0 to 1;
- opt_preloading - allows for preloading of 'Next' and 'Previous' content in a shared relation group, after the current content has finished loading. Values: true, false;
- opt_overlayClose - if 'true', enables closing ColorBox by clicking on the background overlay. Values: true, false;
- opt_loop - If 'true', will disable the ability to loop back to the beginning of the group when on the last element. Values: true, false;
- opt_slideshow - enable or disable slideshow mode. Values: true, false;
- opt_slideshowSpeed - sets the speed of the slideshow. Values: number in milliseconds;
- opt_slideshowAuto - if 'true', the slideshow will automatically start to play. Values: true, false;
- opt_slideshowStart - text for the slideshow start button. Values: text;
- opt_slideshowStop - text for the slideshow stop button. Values: text;
- opt_current - current page text. Values: text;
- opt_previous - current text. Values: text;
- opt_next - next text. Values: text;
- opt_close - close text. Values: text;
- opt_rel - group name. Items with the same group name support navigation between items from this group with help 'Next' and 'Prev' lightbox buttons. If you want to create single item leave this field empty. Values: string.