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

The bretteleben.de "CSS Gallery" Plugin for Joomla!1.5, Joomla!1.6 and Joomla!1.7 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.

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.5:

- first version available for Joomla!1.6 and Joomla!1.7
- configure the image root folder in the backend
- optional scale images proportionally or cropped
- optional scale thumbnails proportionally or cropped
- choose the space between the thumbs
- the backend check the availability of the PHP GDlib


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

Joomla!1.6.0 seems to be buggy as far as the cache is concerned. If you use this plugin, make sure the cache is disabled!

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, 1.6 and 1.7. 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.5

- first version available for Joomla!1.6 and Joomla!1.7
- configure the image root folder in the backend
- optional scale images proportionally or cropped
- optional scale thumbnails proportionally or cropped
- choose the space between the thumbs
- the backend check the availability of the PHP GDlib
- minor improvements

Support

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).

 

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, upgrade and fresh installation. Please choose the file that fits your Joomla! installation. _J1.5 for Joomla! 1.5.x, _J1.6 for Joomla! 1.6.x and _J1.7 for Joomla! 1.7.x

J!1.5.x - plg_cssgallery_v1.3.5_J1.5.zip Downloads: 35.614

J!1.6.x - plg_cssgallery_v1.3.5_J1.6.zip Downloads: 12.715

J!1.7.x
- plg_cssgallery_v1.3.5_J1.7.zip Downloads: 5.979


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

Last Updated on Friday, 28 October 2011 18:26
 
Comments (230)
Links
230 Wednesday, 11 January 2012 20:08
Perry

Hey, Love the gallery, however when I change the picture and the link address the link doesn't work any more. Is their a fix?

@Perry
Thursday, 12 January 2012 10:56
A. Berger

Hi Perry!

Please provide a link to the page, I will have a look at it.

Best regards
Andreas

Link to anchor causes page to crop.
229 Thursday, 15 December 2011 04:31
Nobleware

Hi, GREAT plugin. I love it.

Just one little issue, I have the plugin loaded into a module and it's working great through plugin to module extension.
When ever I click an image, it crops the top header section of my site completely. The scroll bar resizes and I am no longer able to access my header and therefore I cant access any of the menus.
Any ideas why this may be so?

Regards
Noble

@Nobleware
Monday, 19 December 2011 21:39
A. Berger

Hi Noble!

I can only guess that it might have to do with the stylesheet of your template, but if you provide a link to the page with the gallery, I will have a look at it.

Best regards
Andreas

Is it possible to open Gallery with a simple weblink?
228 Friday, 25 November 2011 20:17
AndreF

I am trying to use this great plugin and i do want to put a link on my site where it simple open the selected Gallery. (sorry i am not a pro Joomla User)

Thanks in Advance
André
(Joomla 1.7.3 and newest plg from here)

@AndreF
Sunday, 27 November 2011 10:54
A. Berger

Hi André!

The CSS Gallery is a Content Plugin that creates a gallery within an article. This means for your purpose you have to create an article, insert the code for the gallery and link to this article.

Best regards
Andreas

Textumbruch um die Gallery
227 Friday, 25 November 2011 13:16
Danny

Hallo Andreas,

tolle Arbeit! Ich möchte die Gallery in einem Beitrag links ausgerichtet veröffentlichen. Der eigentliche Text im Beitrag soll um die Gallery laufen. So wie in Word wenn ein Bild im Text steht und du dann bei Layout die Optionen für den Textumbruch einstellen kannst. Ist sowas möglich oder muss ich mir da was anderes suchen??

Danke für Deine Hilfe.
Danny

@Danny
Sunday, 27 November 2011 10:45
A. Berger
CSS gallery error message
226 Tuesday, 22 November 2011 05:58
Frith McDaniel

Hi,

Would you be able to help me. I have installed the gallery as per instructions, but I am getting this message on the page;

CSS Gallery: Could not find folder /home2/plbphoto/public_html/images/images_homepage/cssgallery=images/images_homepage/

Could you please advise what I am doing wrong.

Many thanks
Frith


 

@Frith McDaniel
Tuesday, 22 November 2011 19:52
A. Berger

Hi Frith!

If the images are stored in the folder "/images/images_homepage/cssgallery" and the parameter "Image root" in the configuration panel of the plugin is set to "/images/" the code in the article should be:
{*becssg}images_homepage/cssgallery{/becssg*} ... without the asterisks

If the problem persists, please provide:

- the setting of the parameter "Image root"
- the code you are using in the article
- the path/folder you uploaded the images
- the Joomla! version you are using
- if any possible a link to the page

I'm sure we will solve this.

Best regards
Andreas

please help; I have an error
225 Friday, 11 November 2011 16:53
Ruud

sorry, I did every step on your instalation text; I changed nothing except the thumbnail quality which I set to 70; I use joomla1.7.2 and your plugin 1.3.5   the 1.7.2.zip ;
the parameters contain map /images/  and within thatI have 6 foto's in .jpg format in map fotosevent2011_p1
(in total I have 40 fotos to display, but for this try-out I used only 6)

I got the following error
Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 20736 bytes) in /home/deb49390/domains/itunited-event2011.nl/public_html/joomla/plugins/content/cssgallery/files/cssgalleryhelper.php on line 150  

when the gallery would work as promised I would be very glad
thanks in advance
Ruud

@Ruud
Sunday, 13 November 2011 21:51
A. Berger

Hi Ruud!

Please check the Page "FAQ&Troubleshooting" (menu at the left), it deals with this problem.

Best regards
Andreas

Please help
224 Wednesday, 09 November 2011 17:14
Mehnoush

Hi Andrea

First thank you for your contribution.
I am fairly new to Joomla platform (just registered). I was looking for a slide show module to install and found yours which is exactly what I wanted.
When I download the version 1.7 the folder name is plg_cssgallery_v1.
and these are the files: cssgallery.php, cssgallery.xml, a folder: files/, index.html & LICENSE.txt. In the folder "files" also there is nothing that I can install.
Am I missing something? Where I can find the folder to upload to my joomla and install.
I really appreciate your help

Thank you
Mehnoush

Re: Help
Wednesday, 09 November 2011 22:28
Mehnoush

Hi

I found the way to do the installation. Could be because I am using Mac but when downloading the file it was not zipped therefore could not install it. I zipped the folder first and then was able to install it.
Now I will start working on it.

Thank you
Mehnoush

I need the older version 1.3.3 please.
223 Monday, 07 November 2011 23:34
Marcela

Hi, where can I get the older version 1.3.3 of the CSS Gallery?

Thanks in advance!!

@Marcela
Tuesday, 08 November 2011 21:57
A. Berger

Hi Marcela!

What for?

Best regards
Andreas

Help!
222 Tuesday, 18 October 2011 16:44
Whitney

I know this may be a stupid question, but I am having trouble installing. I try to upload the files but it constantly says "unrecognized archive type". I'm new to Joomla, so I'm not quite sure if I'm doing something wrong...

@Whitney
Tuesday, 18 October 2011 22:43
A. Berger

Hi Whitney!

Are you using the Joomla! Installer to install the extensions? (I not, please do so!)
Are you pointing the installer to the file plg_cssgallery_v1.3.5_J1.5.zip (Joomla! 1.5) or plg_cssgallery_v1.3.5_J1.6.zip (Joomla! 1.6)?

Did you check the page:
http://www.bretteleben.de/lang-en/joomla/css-gallery/installation-and-usage-plugin.html
to get some instructions?

Best regards
Andreas


Links
221 Monday, 13 June 2011 14:46
atrooper

Hi,

I have Joomla 1.5.22 installed and have css plugin becssg, I want to be able to hover over the images as shown but not link through to anything else (at the moment people think you can link through to somewhere as they see the hand, but all it takes them through to is the front page!). How do I do this please? please follow the link to see what I mean
http://cathedralviewlincoln.co.uk/rooms/room1

Thank you

@atrooper
Sunday, 26 June 2011 16:51
A. Berger

Hi atrooper!


Up till now this is possible only using the feature "Links" to create specific links to the original image files.
A feature to auto-link the original image files as already available for the "Very Simple Image Gallery" will be part of the next update.

Best regards
Andreas

links
Monday, 20 June 2011 15:05
atrooper

Hello,

Is there anyway that when you click on the link you get a larger image of the photo, I'm trying to work around the fact that you can not remove the links?

Thank you

@atrooper
Tuesday, 14 June 2011 21:10
A. Berger

Hi atrooper!

There is no way to completely remove the links because the whole functionality of this CSS gallery is based on the usage of CSS pseudo-classes available for links.
If you don't want to correct the setting of base href on your website, I suggest to have a look at my other gallery plugin, the "Very Simple Image Gallery" (find the link in the menu at the left), it has an other approach and - as long as you don't explicitely activate the feature "Links" - does not work with relative anchors.

Best regards
Andreas

Links
Tuesday, 14 June 2011 13:32
atrooper

Thank you you for your prompt answer. Sorry I am new to all of this and don't fully understand! How do I remove the link totally?

Thank you

@atrooper
Monday, 13 June 2011 20:33
A. Berger

Hi atrooper!

The thumbnails of the CSS Gallery link to an anchor (#g_26_0) the plugin itself created for just this purpose at the top of the gallery. This means, if somebody clicks at one of the thumbnails, the links just scrolls the gallery in view. No problem.


As you see, this link to the anchor is a relative link. The page it is relative too is determined by the current URL or - if set - by the metatag "base href". Usually - activating "Search Engine Friendly URLs" in the global configuration this value brings up this tag in the Joomla! head data and sets it to the current URL (http://cathedralviewlincoln.co.uk/rooms/room1) but in your case it is set to a fixed value "http://cathedralviewlincoln.co.uk/". This causes the thumbnails to link to http://cathedralviewlincoln.co.uk/(base href)#g_26_0( an anchor not present at this page).


I am not sure, why the base-href at your site is set to a fixed value, but as long as the link has this value - the thumbs will fail to link to the gallery.


Best regards
Andreas

English
Panoramic Image Viewer
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 49 guests online