Inline images

Parent Previous Next

If you want to create thumbnails for existing images in Joomla! content and display them in the lightbox, wrap necessary content with {arisexylightbox} tag and set activeType attribute to inlineimg value. In other words, use the following code:


{arisexylightbox activeType="inlineimg" thumbWidth="250"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/arisexylightbox}


Settings


CSS class is a name of a CSS class which will be added to thumbnails. It can be used to add custom styles for thumbnails.


Thumbnails count is a number of visible thumbnails. For example if a content contains 5 images and the parameter is set to 2, the extension shows two thumbnails, other images will be available into the lightbox. If you want to show all thumbnails, leave the parameter empty or set it to 0.


Thumbnail width is a width of auto-generated thumbnails. If the parameter is empty, it will be calculated automatically based on value of "Thumbail height" parameter keeping original image aspect ratio.


Thumbnail height is a height of auto-generated thumbnails. If the parameter is empty, it will be calculated automatically based on value of "Thumbail width" parameter keeping original image aspect ratio.


Generate thumbnails 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.


Create thumbnail method


o Resize is used if you want to create thumbnails saving aspect ratio.


Resize method


- None -


Fit to viewport is used to fit thumbnails to a viewport based on values of "Thumbnail width" and "Thumbnail height" parameters.


Crop to viewport is used to crop thumbnails to a viewport based on values of "Thumbnail width" and "Thumbnail height" parameters.


o Crop is used if you want to create thumbnails as part of original image. It starts to crop image from a start point (see "X coordinate" and "Y coordinate" parameters).


X coordinate is an X coordinate of a start point.


Y coordinate is an Y coordinate of a start point.


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


X coordinate is an X coordinate of a start point.


Y coordinate is an Y coordinate of a start point.


Crop width is a width of cropping area.


Crop height is a height of cropping area.


Grayscale indicates if thumbnails should be created with grayscale effect or not.


Rotate indicates if thumbnails should be rotated or not.


Rotate settings are used to specify rotate settings.


o Fixed angle is used if you want to rotate all thumbnails to fixed angle.


Angle is an rotation angle for thumbnails. Use an integer number from 0 to 360.


o Random angle is used if you want to rotate each thumbnail randomly. Rotate angle is generated randomly between Start angle and End angle range.


Start angle


End angle


Single mode indicates if the extension should show only one image into the lightbox without navigation between other images or not.



Attributes of {arisexylightbox} tag for inline 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="inlineimg" thumbWidth="125"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/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="inlineimg" thumbHeight="100"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/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="inlineimg" thumbHeight="100" generateThumbs="0"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/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 specified 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="inlineimg" thumbHeight="100" thumbType="resize" behaviour="fit"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/arisexylightbox}



o crop is used if you want to create thumbnails as 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="inlineimg" thumbHeight="100" thumbType="crop" x="10" y="20"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/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="inlineimg" thumbHeight="100" thumbType="cropresize" x="10" y="20" width="200" height="200"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/arisexylightbox}



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


{arisexylightbox activeType="inlineimg" thumbHeight="100" grayscale="1"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/arisexylightbox}



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


{arisexylightbox activeType="inlineimg" thumbHeight="100" rotate="1"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/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="inlineimg" thumbWidth="150" rotate_type="fixed" rotate_angle="120"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/arisexylightbox}


or


{arisexylightbox activeType="inlineimg" thumbWidth="150" rotate_type="random" rotate_startAngle="90" rotate_endAngle="150"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/arisexylightbox}



thumbCount is a number of visible thumbnails. For example if a content contains 5 images and the parameter is set to 2, the extension shows two thumbnails, other images will be available into the lightbox. If you want to show all thumbnails, leave the parameter empty or set it to 0. Values: an integer number.


{arisexylightbox activeType="inlineimg" thumbWidth="150" thumbCount="2"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/arisexylightbox}



single indicates if the extension should show only one image into the lightbox without navigation between other images or not. Values: 1 or 0.


{arisexylightbox activeType="inlineimg" thumbWidth="150" single="0"}

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE1" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGE2" alt="description" />

 content ... content ...

 <img src="PATH_TO_LARGE_IMAGEN" alt="description" />

 content ... content ...

{/arisexylightbox}


class is a name of a CSS class which will be added to thumbnails. It can be used to add custom styles for thumbnails. Values: a string.