Home Joomla CSS Gallery
2010-02-09
Main Menu
external Links
Most Read
Support

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

Amount: 

Joomla: CSS Gallery
Written by Andreas Berger   
Sunday, 14 December 2008 12:07

The bretteleben.de "CSS Gallery" Plugin for Joomla! 1.5 is an easy to configure plugin, that enables you to display a gallery with thumbnails in a content item. Unlike other gallery-plugins the CSS Gallery works with pure X-HTML and CSS without JavaScript, Flash or any other script/player.
When called first, the plugin creates to subfolders in the referenced folder. In one of them the plugin stores the scaled images, in the other the scaled thumbnails. Scaling follows your settings, the original images stay untouched.
Whenever called, the plugin checks, if the stored files still match your settings. If you have changed your settings, the plugin creates the corresponding images/thumbnails automatically.

Features:

- supports .jpg, .png und .gif
- can be aligned in your content item left, right, centered, float left or float right
- as many galleries per content item as you want
- every gallery can be configured individually (Parameter Overrides)
- optional show title and/or text with every single picture (Captions)
- optional show default title/text for the whole gallery
- optional link every single thumbnail to a different target (Links)
- optional use a default link for the whole gallery
- works without JavaScript

New in Version 1.3.2:

- image file names in calls for links and captions are caseINsensitive

New in Version 1.3.0:

- additional options to align: float:left, float:right
- sort images A-Z, Z-A, old-new, new-old, random
- set parameter "limitstart" in onPrepareContent to "0" to avoid errors when used with different content2module-extensions
- creating thumbnails supports transparent GIFs and PNGs
- possibility to link each single thumbnails
- set the "target" attribute for every single link
- option to use a default-link for a whole gallery


Installation and Usage

A step by step tutorial on installation and usage can be found at Howto Plugin .
The possibilities the code inside the article offers can be found at Howto Plugin Code .

Demo

Howto Plugin Howto Plugin Howto Plugin Howto Plugin Howto Plugin Howto Plugin Howto Plugin Howto Plugin Howto Plugin Howto Plugin

Limitations/Preview

This version of the plugin uses one script, doing the whole work. This may cause - when using very large image-files - the maximum execution time of PHP to be exceeded on your server. If this happens, the script fails with an error.

In this case, just refresh the page one or two times. This should be enough to get all images scaled. As soon as the plugin in configured and all images are scaled, everything works fine and your visitors will not be affected.

Not all browsers support the feature of hiding the main image on mouse:hover. This works with IE7, IE8b, FF and Opera. Google Chrome, Safari and IE up to version 6 don´t.
This is of relevance only if you have images with different proportions (width<>height) in one set. In this case the first image should be one, that does not use the full given space, this way ensuring, that it is covered by the other images.

Requirements

The plugin requires the PHP GD library to generate the thumbnails and images.

Compatibility

The plugin is tested successful with Joomla 1.5.6, 1.5.9 and 1.5.15. Anyway, using it aside with one or another existing plugin/modul/component may bring to light problems i haven't foreseen.
I suggest a test run before using it on a live site and stand by for your questions and suggestions.

License

The plugin is licensed under the GNU Public License (www.gnu.org/copyleft/gpl.html).

update Version: 1.3.2

- image file names in calls for links and captions are caseINsensitive
- try to remove blanks and linebreaks between code-lines
- new configuration panel

Support

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.

Download

The ZIP-archive contains the plugin, by downloading it you agree to the terms of the GNU Public License. The ZIP-archive can be used for both new installation and upgrade.

Downloads:
FileLast Modified
Download this file (plugin_becssg_1.3.2.zip) plugin_becssg_1.3.2.zip2010-01-03
Last Updated ( Wednesday, 13 January 2010 09:08 )
 
Comments (231)
@Andrea Paci
231 Thursday, 04 February 2010 18:42
A. Berger
Hi Andrea!

As you say: The gallery works completely without JavaScript so there is no possibility to add such an effect. At least I don't now such feature, generated with CSS only.

Best regards
Andreas
fade in / fade out... is that possible?
230 Wednesday, 03 February 2010 22:21
Andrea Paci
Hello,
Is is possible to add a fade effect transition between the images? Probably not since there is no JavaScript on this gallery... Any idea?
It already looks great as it is, I just would like to have a quick fade effect between pictures as it can be less eye straining.
Thanks.
Andrea
perfect tool
229 Wednesday, 03 February 2010 11:36
Atti
Hi Andreas,

Thanks for the guide, will change the onclick to hower :). Absolutely fast and very clear programming:)
Cheers
Atti
@JonB
228 Tuesday, 02 February 2010 19:40
A. Berger
Hi JonB!

#g_57_0 is a dynamically generated anchor at the top of the main image of the gallery (g-[Gallery] 57-[article 57] 0-[1th gallery in article]). If omitted a click on the thumbnail (and there is always a link attached to the thumb because the hover of this link shows the main image) would bring you to the top of the page (a not so desired result).
So - no, there is no way around this link, but if you don't like it, you might want to have a look at the "Very Simple Image Gallery" (menu at the left). This plugin changes the main image onClick and uses this anchor only for images without set links when links are activated.

Best regards
Andreas
Image Links
227 Tuesday, 02 February 2010 15:07
JonB
Hi, I have switched off image links in the control panel however, when a user clicks on the image rather than hovers it sends them to a link like this - domain.com/#g_57_0 is there a simple way for me to stop this from happening?

Great plugin though!

Thanks,
Jon
@defi
226 Sunday, 31 January 2010 12:35
A. Berger
Hallo defi!

Nein, über eine solche Funktion verfügt das Plugin nicht und um ehrlich zu sein - sie ist auch für die Zukunft nicht vorgesehen.

Vielleicht findet sich aber auf extensions.joomla.org oder joomlaos.de ein anderes Plugin, das diese Funktionalität bietet.

Gruß
Andreas
Möglichkeit thumbnails durch textlinks zu ersetzen?
225 Sunday, 31 January 2010 04:33
defi
Ich würde gernen anstelle der Thumnaildarstellung einen einfachen Text als link für das Bild darstellen. Also Beipsielsweise habe ich 10 Bilder darzustellen und bennene die von 01.jpg bis 10.jpg. nun möchte ich links neben dem angezeigtem erstem Bilde

01
02
03
04
05
06
07
08
09
10

als einfachen link haben. Ist das machbar mit dem plugin?

gruß defi
@Atti
224 Saturday, 30 January 2010 11:13
A. Berger
Hi Atti!

The onclick-event is set in /plugins/content/vsig.php at line 369 (as of version 1.5.4). Just replace it to fit your needs.

Best regards
Andreas
Simple gallery with hover
223 Saturday, 30 January 2010 10:20
Atti
Hi Andreas,

Thanks very much for your quick reply. The simple gallery is perfect. Is it possible to have hover over instead of click? That would be a perfect solution for the job I'm on.
Thanks
A
@Atti
222 Friday, 29 January 2010 18:41
A. Berger
Hi Atti!

With the "CSS Gallery" this is not possible at the moment, but you might want to take a look at the "very Simple Image Gallery" (menu at the left), it offers this feature.

Best regards
Andreas