Images

Parent Previous Next

Set activeType attribute to imglist value if you want to show images from folders into the lightbox. A sample code looks like:


{arisexylightbox activeType="imglist" thumbWidth="125" dir="images/stories;images/banners"}{/arisexylightbox}


The parameter on plugin settings are the same as parameter for ARI Sexy Lightbox module.



Attributes of {arisexylightbox} tag for images


thumbWidth is a width of auto-generated thumbnails. If the parameter is empty, it will be calculated automatically based on value of "thumbHeight" parameter keeping original image aspect ratio. Values: an integer number.


{arisexylightbox activeType="imglist" thumbWidth="125" dir="images/stories;images/banners"}{/arisexylightbox}



thumbHeight is a height of auto-generated thumbnails. If the parameter is empty, it will be calculated automatically based on value of "thumbWidth" parameter keeping original image aspect ratio. Values: an integer number.


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners"}{/arisexylightbox}



thumbPath is used if you want to use your own thumbnails instead of auto-generated thumbnails. Specify the path to thumbnails in this field. You can use predefined variable {$fileName} which contains an original file name. For example if you want to use thumbnails from "thumb" sub-directory in folder which contains original images and thumbnails will have the same file names as original images, then specify thumb/{$fileName} value in this field. Values: a string;


{arisexylightbox activeType="imglist" thumbHeight="100" thumbWidth="125" dir="images/stories;images/banners" thumbPath="thumb/{$fileName}"}{/arisexylightbox}



generateThumbs indicates if the extension should generate thumbnails automatically or not. Auto-generate thumbnails feature requires one of the following PHP graphic library on your server: GD (it is usually installed on most hosting services) or ImageMagick. Values: 1 or 0;


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" generateThumbs="0"}{/arisexylightbox}



thumbType is used to specify a method for creating thumbnail. It is possible to use the next values:


o resize is used if you want to create thumbnails saving aspect ratio. It is possible to use the following additional attributes for "resize" method:


behavior is used to specify resize method. It is possible to the next value:


none


fit is used to fit thumbnails to a viewport based on values of "thumbWidth" and "thumbHeight" attributes.


crop is used to crop thumbnails to a viewport based on values of "thumbWidth" and "thumbHeight" attributes.



{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" thumbType="resize" behavior="fit"}{/arisexylightbox}



o crop is used if you want to create thumbnails as a part of original image. It starts to crop image from a start point (see "x" and "y" attributes).


x is an X coordinate of a start point. Values: an integer number;


y is an Y coordinate of a start point. Values: an integer number;



{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" thumbType="crop" x="10" y="20"}{/arisexylightbox}



o cropresize is used if you want to create thumbnails in the following way: at first crop a part of an original image and then resize it.


x is an X coordinate of a start point. Values: an integer number;


y is an Y coordinate of a start point. Values: an integer number;


width is a width of cropping area. Values: an integer number;


height is a height of cropping area. Values: an integer number;



{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" thumbType="cropresize" x="10" y="20" width="200" height="200"}{/arisexylightbox}



grayscale indicates if thumbnails should be created with grayscale effect or not. Values: 1 or 0;


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" grayscale="1"}{/arisexylightbox}



rotate indicates if thumbnails should be rotated or not. Values: 1 or 0.


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" rotate="1"}{/arisexylightbox}



It is possible to use the next additional rotation attributes:


o rotate_type is used to specify rotation type. It is possible to use the next values:


fixed is used for creating thumbnails with fixed rotation angle. It is possible to use the next additional attributes:


rotate_angle is rotation angle for "fixed" type. Value: a number from 0 to 360 in degree;


random is used for creating thumbnails with random rotation angle within specific range. It is possible to use the next additional attributes:


rotate_startAngle is start rotation angle for "random" type. Value: a number from 0 to 360 in degree;


rotate_startAngle is end rotation angle for "random" type. Value: a number from 0 to 360 in degree.


{arisexylightbox activeType="imglist" thumbWidth="150" dir="images/stories;images/banners" rotate_type="fixed" rotate_angle="120"}{/arisexylightbox}


or


{arisexylightbox activeType="imglist" thumbWidth="150" dir="images/stories;images/banners" rotate_type="random" rotate_startAngle="90" rotate_endAngle="150"}{/arisexylightbox}



descrFile is a file with descriptions of images. It is a CSV file where you can place additional parameters for images from folder where this file is located. Use 'File' column to specify file name, 'Title' column to indicate image titles. Save this file in UTF-8 encoding without BOM. Values: a file name.


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" descrFile="description.csv"}{/arisexylightbox}



sortBy is used to specify how to sort images. It is possible to use the next values:


o none


o filename is used to sort images by file names.


o modified is used to sort images by last modified date.


o csv makes sense if CSV file with description is used. In this case images will be sorted as they are located in CSV file(s).


o random is used to sort images in random order.


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" sortBy="random"}{/arisexylightbox}



sortDir is used to specify sort direction. Values: asc or desc.


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" sortBy="filename" sortDir="desc"}{/arisexylightbox}



subdir is used to specify if the extension should load images from sub-directories of folders which are entered in "dir" attribute or not.. Values: 1 or 0.


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" subDir="0"}{/arisexylightbox}



dir are used to specify folder(s) from that images will be loaded. If you want to specify several folders, enter each folder on a new line. Joomla! root directory is used as root path for these folders. It means if you want to show images from <joomla_directory>/images/sexyimages folder, populate parameter with images/sexyimages value. Values: path to image folders are separated by semicolons.


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners"}{/arisexylightbox}



type is used to specify layout type. It is possible to use the next value:


o gallery is used to show thumbnails with titles in a table format. It is possible to use the following additional attributes:


theme is a theme of image gallery. Values: none, shadow, shadow pin, shadow clip, shadow flora, fancy.


visibleItemCount is a quantity of thumbnails which will be shown on a page. If you want to show all thumbnails, set the parameter to 0 or leave empty. Values: an integer number.


itemCount is a quantity of thumbnails which will be shown per row. In other words it is a number of columns. Values: an integer number.


mainClass is CSS class(es) which will be added to a table. It can be used to customize table with thumbnails. Values: name of CSS class.


rowClasses are rows CSS classes. CSS classes which are separated by semicolons will be added in a cyclic way. Values: CSS classes separated by semicolons.


emptyText is a message which is shown if the extension doesn't contain images. Values: a string.



{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" type="gallery" itemCount="4" mainClass="myTable"}{/arisexylightbox}



o singleimage is used to show the first thumbnail and if a user clicks on this, s/he will see image gallery in the lightbox. Enter a link text between {arisexylightbox} and {/arisexylightbox} tags. {$data:sexyimage} predefined variable can be used to show the first thumbnail as a link.


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" type="singleimage"}{/arisexylightbox}


or


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" type="singleimage"}{$data:sexyimage}{/arisexylightbox}



o customtext is used to specify a link and if a user click on it, the lightbox with images appears. Enter a link text between {arisexylightbox} and {/arisexylightbox} tags.


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" type="customtext"}Show images{/arisexylightbox}


If you want to use an image as a link, use the next code:


{arisexylightbox activeType="imglist" thumbHeight="100" dir="images/stories;images/banners" type="customtext"}<img src="LINK_TO_IMAGE" />{/arisexylightbox}


Where LINK_TO_IMAGE is a link to an image.