Home Joomla CSS Gallery - Howto Plugin Code
Main Menu
Most Read
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

If you like the products on these pages, your support is highly appreciated. Thank you very much!

Amount: 

Latest Items
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
CSS Gallery Plugin Usage - Code
Written by Andreas Berger   
Monday, 20 July 2009 06:24

A survey of the possibilities to call, extend and modify galleries with the code in the content item.

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 configured path to this folder (image root), by default "/images/stories" for Joomla!1.5 and "/images/" for Joomla!1.6/1.7 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 the set root folder (by default "/images/stories" for Joomla!1.5 and "/images/" for Joomla!1.6/1.7) is used, e. g. to use the folder "/images/stories/folder/subfolder" in Joomla!1.5 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

icrop - scale images keeping proportions or cropped; possible values: keep (proportional), crop (crop)

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

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

space - space between thumbnails in pixel (integer) e.g.: 3

tcrop - scale thumbnails keeping proportions or cropped; possible values: keep (proportional), crop (crop)

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.


If you have questions or suggestions, please use the comment-function. Please include the installed Joomla! version and if you have problems - if any possible - the affected page in your comment.

If you need additional features or customizations for your project that exceed the scope of support offered through the comments, you are invited to submit your requirements specification and the planned budget by email (menu item "Contact" in the menu at the top).

If you use this extensions, please post a rating and a review at extensions.joomla.org.

Last Updated on Friday, 28 October 2011 18:19
 
Comments (22)
Positioning the Thumbnails
12 Tuesday, 21 June 2011 02:40
R. Adler

Sorry...I've been searching your documentation but cannot find information on positioning the gallery's Thumbnail images on the left or right of the image, instead of below. How do I put the Thumbnail images on one side of the main gallery image?

Thank you.

@R. Adler
Sunday, 26 June 2011 16:41
A. Berger

Hi R. Adler!

First - sorry for the late response.
Second - the CSS gallery does not offer this kind of layout. Maybe you want to have a look at the "Very Simple Image Gallery" (find the link in the menu at the left), it allows to switch the thumbnails left-bottom-right from the configuration panel of the plugin.

Best regards
Andreas

Aligning The Gallery
11 Friday, 10 June 2011 17:51
Nicole

Hey there! Great gallery, I love how easy it is. I only had one problem, and that was center aligning(or any aligning, for that matter) in the content area I have it in. I tried with the plugin settings, and I also coded it into the string using 'Gallery|align=1' but it still stays where it is. Not sure if there is another easy way of doing this.

The page in question is: http://www.flawlesshairdesign.ca/gallery.html

Thanks

@Nicole
Monday, 13 June 2011 20:59
A. Berger

Hi Nicole!

Aligning the gallery works perfect. The problem: the article that contains the gallery is exactly as wide as the content and it is aligned left.
You could temporarily switch to another template to see what I mean.
To solve this problem, you could set a fixed width for the article (stylesheet "tdefaut", selector "table .contentpaneopen").

Best regards
Andreas

Setting maximum numbers of images and auto-refresh
10 Friday, 03 June 2011 03:48
Arnd

Hello,

currently i tried to use your plugin for displaying webcam images from a folder which basicly works good but i have two problems:
First it would be great if one could set an maximum number of images to display. Which should be quite easy.
Secondly i am looking for a way to auto refresh the pictures cause the webcam is delivering one image per minute. Any tips on how i could accomplish this?

best regards and thx for this great plugin,
Arnd

@Arnd
Monday, 06 June 2011 20:01
A. Berger

Hi Arnd!

I'm sorry but the features you want to see are not possible without heavily patching the plugin whereas it would be relatively easy to patch it to show only a fixed amount of images but the possibility to auto-refresh the page would mean to either manipulate the page headers or to break the main intention - relying on CSS only - of the plugin and create some JavaScript or AJAX auto-refresh.

Best regards
Andreas

Thank you Andrea
9 Wednesday, 01 June 2011 18:18
so|ex

Just wanna thank you for this amazing, simple to use and useful pluggin you made. I found all the information I needed here.

=)

Links
8 Wednesday, 18 May 2011 10:05
Atrooper

Hello, please can you help? I am new to all this and I have this plugin in Joomla 1.5. What I want is just to hoover over the pictures, for themain picture to change to the hoovered over picture. I do not want to link through to anything else just the hoover. How do I get rid of the link but keep the hoover?

Thank you

@Atrooper
Thursday, 19 May 2011 21:17
A. Berger

Hi Atrooper!

I confess, I'm not sure if I really understand what you want to achieve, but if you want to changed main image to stay visible after the mouse left the thumbnail, you may want to have a look at the "Very Simple Image Gallery" (find the link in the menu at the left), it works this way.

Best regards
Andreas

SUPER PLUGIN
7 Wednesday, 11 May 2011 19:19
Roger Rommel / Domroger

Hallo,

echt gutes Plugin. wird genutzt in Joomla 1.6 und bin sehr zufrieden. Ein grosses Lob an den Entwickler.
www.reguidedr.com
Nach einigen Tests habe ich festgestellt wenn das Plugin in Tabs oder Accordeon eingesetz wird funktioniert es nicht richtig, es werden immer die Bilder nicht die Thumbs von der letzten veroeffentlichten galerie angezeigt. Vielleicht ein Tip fuer die Weiterentwicklung.
Ich habe es nun als einzelne Seiten auf die Startseite gepackt und das funktieniert auch.

Gruss aus der sonnigen Karibik

@Roger Rommel
Wednesday, 11 May 2011 21:23
A. Berger

Hallo Roger!

Ob das Plugin innerhalb anderer Erweiterungen (Tabs etc.) funktioniert, hängt davon ab wie diese Erweiterungen Content Plugins ansprechen. Als Entwickler des Plugins habe ich da meist leider wenig Einfluss.

Gruß
Andreas

Thanks for the Best Gallery
6 Monday, 09 May 2011 00:29
Willem

Hi love this application does every thing so easily.

Is there a plug in/add on/modification that will allow you to add go to next image or previous image like a back forward button ?

Cheers

@Willem
Monday, 09 May 2011 20:17
A. Berger

Hi Willem!

I'm sorry but the plugin has no such feature.

Best regards
Andreas

Title and text
5 Tuesday, 03 May 2011 02:32
anarresti

If I give a title and a text to first picture of my gallery, all others pics shows a shadow of first pic title and text. No way if I leave a first call with an empty pic number.
You can see this (with first pic with no title and no text) at http://www.estuvimos.com.ar/viajes/en-velero/grecia-a-vela#g_52_0

Any idea?
CSS gallery is Great!

@anarresti
Tuesday, 03 May 2011 21:05
A. Berger

Hi annaresti!

This happens because the width/height ratio you set for the gallery in the configuration panel of the plugin does not match the width/height ratio of your images (given the same width the images are lower). This leads to the situation where the fixed caption of the startimage - placed at the bottom of the set gallery-height - does not get hidden by the images you are hovering.
To prevent this from happening, decrease the set height of the gallery till the gallery-proportion matches the proportion of your images.

Best regards
Andreas

main image
4 Wednesday, 27 April 2011 10:59
doug

hi, great little plugin.


could you tell me how to modify the php to only display the thumbnails? without the top image? also how to stop all the pre loading for the top image.


any help would be appreciated. cheers

@Doug
Wednesday, 27 April 2011 20:49
A. Berger

Hi Doug!

I'm sorry but what you want to achieve is out of the scope of this plugin. I suggest to skim through the extensions listed in the category "Photos & Images" at extensions.joomla.org, I'm pretty sure you will find an extension that fits your needs out of the box.

Best regards
Andreas

Internal Links....not Extrenal
3 Wednesday, 27 April 2011 07:43
Kane

Hello Andreas,

Great Extension (!!).

Just haveing a couple of issues working out the link code.

My code says this:

{*becssg}cssgallery|throw=5|iqual=95|tqual=70{/becssg*}
{*becssg_c}0|planet-chocolate.png|PLANET CHOCOLATE|We designed the Planet Chocolate Website. Planet Chocolate approached e-Centric Marketing to bring their brand to life via a website. Their aim was to push their store and franchise business. Technologies Used: HTML, CSS, Custom CMS, Flash.{/becssg_c*}
{*becssg_l}0|planet-chocolate.png|http://www.planetchocolate.com.au/|PlanetChocolate|_blank{/becssg_l*}

But this only sends the hyperlink to:
www.domainname.com/page-name/%3Ca%20href=%22http://www.planetchocolate.com.au/%7CPlanetChocolate%7C_blank%7B/becssg_l%7D%22%3Ehttp://www.planetchocolate.com.au/

Rather than to: www.planetchocolate.com.au
Any suggestions to fix this issue I would be grateful for.

Thanks
Kane

@Kane
Wednesday, 27 April 2011 20:58
A. Berger

Hi Kane!

Please open the article that holds the gallery, switch to HTML-view and make sure, that the URL in the code (the third parameter) is plain text only, not a full-grown hyperlink (i.e.: remove the HTML-tags "a href="/ and so on).

Best regards
Andreas

Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135
English
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 150 guests online