The "CSS Gallery" Plugin is called from within the content item. The code used offers - beside of setting the folder with the images - additional possibilities to enhance and arrange the gallery.

A.) Gallery

The code consists of the call {*becssg}{/becssg*} (without the asterisks) and contains the name of the folder with your images. The path to this folder "/images/stories" is added by the plugin automatically and must not be inserted.

The complete call for example would look such as:

{*becssg}cssgallery{/becssg*} - without the asterisks

To use a folder within a folder, the path below "/images/stories/" is used, e. g. to use the folder /images/stories/folder/subfolder" the call would look such as:

{*becssg}folder/subfolder{/becssg*} - without the asterisks

In general that´s it and the gallery is ready to go.

B.) Parameter Overrides

Starting with version 1.2.0 the "CSS Gallery" offers the possibility to change every default setting from the backend whilst calling the plugin within the content item. With this feature it is possible to use different settings for every single gallery. One may create galleries of different width and height, change the number of thumbnails per row and more.

To achieve this, the call of the plugin gets extended by the needed parameters. They are separated from the folder name and from each other by vertical bars (|). The have the syntax PARAMETER=VALUE:

List of possible parameters:

width - maximum width of main image in pixel (integer) e.g.: 600

height - maximum height of main image in pixel (integer) e.g.: 450

iqual - quality of scaled main image in percent (integer) e.g.: 90

throw - number of thumbnails per row (integer) e.g.: 4

tqual - quality of thumbnails in percent (integer) e.g.: 70

prld - should we preload the images? possible values: 0 (no), 1 (yes)

align - align the gallery within the content item; possible values: 0 (right), 1 (center), 2 (left), 3 (float left), 4 (float right)

sort - images sort order; possible values: 0 (A-Z - DEFAULT), 1 (Z-A), 2 (old-new), 3 (new-old), 4 (random)

fixstart - leave the start-image visible on hover; possible values: 0 (no), 1 (yes)
(may be deactivated when showing images of different proportion in one gallery. not crossbrowser!)

caps - show captions; possible values: 0 (no), 1 (yes)

links - show links; possible values: 0 (no), 1 (yes)


Samples:

{*becssg}cssgallery|width=600|align=2{/becssg*} - without the asterisks
Regardless of the settings in the backend, this gallery is shown with a width of 600 pixel (width=600) and aligned left in the article (align=2)

{*becssg}cssgallery|caps=0|prld=0{/becssg*} - without the asterisks
No captions (caps=0), no preload (prld=0)

{*becssg}cssgallery|width=400|height=300|throw=5|iqual=95|tqual=70{/becssg*} - without the asterisks
Width 400 pixel (width=400), height 300 pixel (height=300), 5 thumbs per row (throw=5), quality of main image 95% (iqual=95), quality of thumbs 70% (tqual=70)

Notice:

The parameters listed here correspond with the parameters in the plugins configuration panel. Find a details description at: Howto Plugin .
The first parameter of the initial call always has to be the folder name (path). The sorting of the other parameters is arbitrarily.

C.) Captions

Captions and text have there own call. It´s:

{*becssg_c}gallery-number|imagefile|caption|text{/becssg_c*} - without the asterisks

Gallery-number:
The galleries within one content item are numbered by the plugin automatically starting with 0.
This setting is obligatory.

Imagefile:
The exact name of the file "myimage.jpg".
Left empty, the call is used as default for the whole gallery. This means, if there is no setting for an image, this one is used.

Caption:
The Caption. If left empty . . . no caption is shown.

Text:
The additional text below the caption. If left empty . . . no text is shown.

Samples:

{*becssg_c}0||myTitel|myText{/becssg_c*} - without the asterisks
This call sets "myTitel" and "myText" as the default values for the first gallery within the current content item by leaving the imagefile-value empty.
Notice: You don´t have to set a Default. If you don´t and there is no setting for an image, just nothing is shown.

{*becssg_c}1|pic01.png||myText{/becssg_c*} - without the asterisks
pic01.png of the second gallery in the content item has no caption but the text "myText"

{*becssg_c}0|pic02.png||{/becssg_c*} -without the asterisks
pic02.png in the first gallery shows no caption and no text although there is a default. The explicit setting overrides it.

{*becssg_c}0|pic05.jpg|myTitelA|myTextA{/becssg_c*} - without the asterisks
{*becssg_c}0|pic06.jpg|myTitelB|myTextB{/becssg_c*} - without the asterisks
{*becssg_c}0|pic07.jpg|myTitelC|myTextC{/becssg_c*} - without the asterisks
{*becssg_c}0|pic08.jpg|myTitelD|myTextD{/becssg_c*} - without the asterisks . . . and so on

Notice:
It is of no importance where within your content item and in which order your setting are.
The number of parameters has always to be 4. This means, a call always must contain 3 vertical bars, even if a setting is empty (e.g. the imagefile).
These vertical bars are protected characters within the calls and may not be used within your values.

D.) Links

If we want to link the images of our gallery, there is a third call to do so:

{*becssg_l}gallery-number|imagefile|URL|titel|target{/becssg_l*} - without the asterisks

Gallery-number:
The galleries within one content item are numbered by the plugin automatically starting with 0.
This setting is obligatory.

Imagefile:
The exact name of the file "myimage.jpg".
Left empty, the call is used as default for the whole gallery. This means, if there is no setting for an image, this one is used.

URL:
The URL you want to link the image with. e.g.: http://www.bretteleben.de

Titel:
The titel, shown when the mouse is over the image. e.g.: bretteleben.de

target:
The window, you want to open the linked URL. e.g.: _blank (new window), _self (same window)

Samples:

{*becssg_l}0||http://www.bretteleben.de|bretteleben.de|_blank{/becssg_l*} - without the asterisks
This call sets a default link for the first gallery within the current content item by leaving the value for the imagefile empty. The link opens in a new window.

{*becssg_l}1|pic01.png|http://www.disney.com|Disney|_self{/becssg_l*} - without the asterisks
pic01.png in the second gallery within the content item is linked to www.disney.com. The link opens in the current window.

{*becssg_l}0|pic02.png|||{/becssg_l*} -without the asterisks
We don´t want pic02.png in the first gallery within the content item to be linked. A special case, because as soon as we have links within a gallery, every image gets linked. Setting this empty call the image is linked to the current page, without any further setting.

{*becssg_l}0|pica.jpg|http://www.my.domain.com/myGreatProduct1|greatProduct1|_self{/becssg_l*} - without the asterisks
{*becssg_l}0|picb.jpg|http://www.my.domain.com/myGreatProduct2|greatProduct2|_self{/becssg_l*} - without the asterisks
{*becssg_l}0|picc.jpg|http://www.my.domain.com/myGreatProduct3|greatProduct3|_self{/becssg_l*} - without the asterisks
{*becssg_l}0|picd.jpg|http://www.my.domain.com/myGreatProduct4|greatProduct4|_self{/becssg_l*} - without the asterisks ... and so on

Notice:
It is of no importance where within your content item and in which order your setting are.
The number of parameters has always to be 5. This means, a call always must contain 4 vertical bars, even if a setting is empty (e.g. the imagefile).
These vertical bars are protected characters within the calls and may not be used within your values.

That's it, have fun with the plugin!

If you have questions or suggestions, please use the comment-function.

If you use this extensions, please post a rating and a review at extensions.joomla.org. Furthermore I appreciate everyone, supporting me with a link back to www.bretteleben.de on his/her website. The extension itself does not produce any hidden links, eastereggs or whatever.