Home Joomla CSS Gallery
2010-08-01
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.4 - 2010-06-15

- preload array is visible under certain circumstances - fixed

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 (plg_becssg_1.3.4.zip) plg_becssg_1.3.4.zip2010-06-15
Last Updated on Tuesday, 15 June 2010 20:15
 
Comments (323)
becsscg.css
323 Wednesday, 14 July 2010 10:29
Heike

Hallo Andreas,


ich möchte das Tool gerne einsetzen und bin vor allem mit der Dokumentation sehr zufrieden. Jetzt komme ich jedoch nicht weiter. Für meine Anforderungen sind Titel und Text sehr wichtig. Wenn ich deine Demo-Seite im IE8 anschaue,ist der Hintergrund weiss und die Schrift sehr gut lesbar. Wenn ich die gleiche Demo-Seite im FF anschauen wird der Hintergrund transparent dargestellt. Dies kann ich nicht verwenden. Im Forum habe ich den Hinweis zu becssg.css gefunden und es eingerichtet. html erkennt Datei zwar nimmt jedoch die Formatierung nicht an. Was kann ich tun?


.becssg_cap_title{line-height:20px;opacity:1;}


Danke für jegliche Unterstützung.

@Heike
Wednesday, 21 July 2010 15:47
A. Berger

Hallo Heike!

Wenn möglich, dann beschreib bitte, was Du erreichen möchtest und poste einen Link zur Seite. Ich schau mir das gerne an.

Gruß
Andreas

I can't add Images anymore
322 Sunday, 11 July 2010 09:31
Abbas

Hello Everyone,


When i installed the plugin last week i added the images without any problems. now i want to add more images i went back but i cant seem to find where to add the images. Can someone help me put please.

@Abbas
Wednesday, 21 July 2010 15:42
A. Berger

Hi Abbas!

The plugin shows all of the images it finds in the given folder. This means, to add images - upload them to the folder. To remove images - delete them from the folder.

Best regards
Andreas

CSS Gallery
321 Saturday, 10 July 2010 07:22
Ankit

Hi,


Really a very nice plugin. Its awesome.


One thing I wanted to ask. In this plugin when we hover the mouse over thumbnails that image is being displayed. Can I make some changes in code and make it a slideshow till the user not hovering mouse over the thumbnails and when user hover mouse over the thumbnail that slideshow will stop and that image will be displayed.

@Ankit
Wednesday, 21 July 2010 15:51
A. Berger

Hi Ankit!

Of course this would be possible. Nearly everything is possible. But the main idea of this plugin is to work with X-HTML and CSS only and without any kind of script I see no way to realize the suggested feature. Therefore, this will not become part of this plugin.

Best regards
Andreas

How to locate its CSS?
320 Thursday, 08 July 2010 06:38
Ryann

Hello guys, good day, i need help, when i use and insert it in the article, when i clicked preview, it works but the images are scattered i believe that the problem is the CSS of this plugin. How can i solve that? THanks

@Ryann
Thursday, 08 July 2010 21:45
A. Berger

Hi Ryann!

The plugin makes heavy use of absolute positioning and therefore creates most of the CSS on the fly. There is no external stylesheet. Anyway, if you provide a link to the page, I will have a look at it.

Best regards
Andreas

CSS Gallery
319 Thursday, 01 July 2010 00:23
Paul Richardson

Awesome bit of kit - straight in and works like a dream

Make thumbnail images clickable?
318 Tuesday, 29 June 2010 15:51
Iain

I like your work and use the Css Gallery.

I am wanting to make the main image change to the selected image within the gallery on click not hover? I am wanting to use this for a mobile site and the hover function isn't useful.

Thanks in advance.

@Iain
Thursday, 01 July 2010 21:51
A. Berger

Hi Iain!

The CSS Gallery uses Hover to allow the change of the main image without reload AND without JavaScript. If you want the main image to change onClick, you might want to take a look at my other gallery plugin, the "Very Simple Image Gallery" (menu at the left), it changes the main image onClick.

Best regards
Andreas

Größenänderung
317 Saturday, 26 June 2010 22:16
Thomas

Hi Andreas,

leider habe ich auch das Problem mit der Größenänderung.
Aus 600x450 wird, wie im Namen auch sichtbar: (z.B. image01_595_446_100.jpg im /cssgallery/images-Ordner) 595x446
Zudem wird die Farbigkeit erheblich geändert. Aus meinem sRGB macht er irgend etwas anderes (werde mal testen was).
Wenn ich das berechnete Bild /cssgallery/images durch das Original mit gleichem Namen erstze ist alles perfekt, aber sehr umständlich - hast Du eine Idee?

Gruß,
Thomas

@Thomas
Thursday, 08 July 2010 22:08
A. Berger

Hallo Thomas!

Bislang ist es mir nicht gelungen, das nachzustellen. Könntest Du mir die Einstellungen des Plugins im Backend mitteilen und mir ein oder zwei der betroffenen Bilder zukommen lassen (Link, Email)?

Gruß
Andreas

CSS Gallery: Could not find folder!!
316 Saturday, 26 June 2010 19:22
Khalid R.

I was hosting the website locally but when i moved to godaddy i got this message:
CSS Gallery:
Could not find folder /home/content/w/a/t/watertecsadmin/html/images/stories/projects/reverse_osmosis
It was working fine on xampp but now i dont know what's wrong although the path is coorect and nothing was touched in there!!

Any Ideas

@Khalid R.
Monday, 28 June 2010 21:40
A. Berger

Hi Khalid!

If the folder exists and the path is correct, maybe there is a problem with the directory permissions that prevents the plugin from "seeing" the folder. Check the permissions (755 for the folder, 644 for the images). If the permissions are fine and the problem persists, try to open one of the images directly from your browsers address bar (http://www.yoursite.com/images/stories/projects/reverse_oosmosis/YOURIMAGE.JPG). If this works too (i.e. everything is fine) and the problem still persists - please provide a link to the page.

Best regards
Andreas

Add caption to the photos
315 Thursday, 24 June 2010 16:21
Barb

Hi everyone!

I have no idea how to add the caption to the every single image... Does any can help?

Thanks!!!


 

@Barb
Thursday, 24 June 2010 22:00
A. Berger

Hi Barb!

Have a look at the page "Howto Plugin Code" (menu at the left), part C.) captions. It explains the feature in detail.

Best regards
Andreas

The program modifies the output of the image
314 Wednesday, 23 June 2010 08:07
Serg

Hi

Gallery is good. I have a problem. I upload an image of 680 by 500 pixels. Options also 680 by 500 pixels. The program modifies the output of the image to 679 by 499 pixels. You can output the original image without changing the pixels?

Thank you.

@Serg
Wednesday, 23 June 2010 20:53
A. Berger

Hi Serg!

This should not happen. Could you provide a link to the page please?

Best regards
Andreas

English
Panoramic Image Viewer
AddThis Social Bookmark Button
Who's Online
We have 31 guests online
Latest Items