Startseite Joomla CSS Gallery
Joomla: CSS Gallery
Geschrieben von: Andreas Berger   
Sonntag, den 14. Dezember 2008 um 12:07 Uhr

Das bretteleben.de "CSS Gallery" Plugin für Joomla!2.5 und Joomla!3.1 ist ein einfach zu konfigurierendes Plugin, das es erlaubt, eine Galerie mit Thumbnails in einem Beitrag anzuzeigen. Die Besonderheit bei diesem Plugin ist, dass es nur mit X-HTML und CSS arbeitet und gänzlich auf JavaScript, Flash oder sonstige Scripts und Player verzichtet.

Features:

- unterstützte Bildformate .jpg, .png und .gif
- im Beitrag positionierbar (links, rechts, zentriert, float links, float rechts)
- beliebig viele Galerien in einem Beitrag
- jede einzelne Galerie beliebig konfigurierbar(Parameter Overrides)
- zu jedem Bild kann Titel und Text angezeigt werden (Captions)
- optional ist ein Titel/Text für die gesamte Galerie möglich
- jedes Vorschaubild kann gesondert verlinkt werden (Links)
- optional ist ein Link für die gesamte Galerie möglich
- voll funktionsfähig ohne JavaScript
- Bilder wahlweise proportional skalieren oder beschneiden
- Thumbnails wahlweise proportional skalieren oder beschneiden

Neu in Version 1.3.7:

- Sprach-Datei
- verfügbar für Joomla! 3.x


Installation und Verwendung

Eine Schritt für Schritt Anleitung zu Installation und Verwendung findet sich auf der Seite Anleitung Plugin .
Die Optionen beim Aufruf aus dem Artikel selbst auf der Seite Anleitung Plugin Code .

Demo

Anleitung Plugin Anleitung Plugin Anleitung Plugin Anleitung Plugin Anleitung Plugin Anleitung Plugin Anleitung Plugin Anleitung Plugin Anleitung Plugin Anleitung Plugin

Einschränkungen/Vorschau

In der aktuellen Version des Plugins ist ein Script für den gesamten Ablauf zuständig. Das kann bei sehr großen Originalbildern beim Skalieren dazu führen, dass die maximale Laufzeit für Scripts überschritten wird und PHP das Script mit einem Fehler beendet. In diesem Fall reicht es, die Seite ein oder zwei mal neu aufzurufen. Dann sind alle Bilder skaliert. Das tritt nur bei der Einrichtung einer Galerie auf, den Seitenbesucher trifft das nicht.

Nicht alle Browser unterstützen die Funktionalität, das Startbild beim Überfahren der Galerie auszublenden. Dieses Feature funktionert unter IE7, IE8b, FF und Opera. Google Chrome, Safari und IE bis 6 unterstützen es nicht.
Von Bedeutung ist das nur dann, wenn man in einem Set Bilder verschiedener Größe verwendet (z.B.: Landscape und Portrait). In diesem Fall sollte das erste Bild eines derer sein, die die eingestellte Galeriefläche nicht voll ausnützen, damit es bei der Anzeige weiterer gleich großer Bilder von diesen verdeckt wird.

Voraussetzungen

Das Plugin verwendet die PHP GD library zur Generierung der Thumbnails und Bilder.

Kompatibilität

Das Plugin ist unter Joomla! 2.5 und 3.1 erfolgreich getestet, das Zusammenspiel mit den verschiedensten anderen Erweiterungen mag aber Probleme mit sich bringen. Ich empfehle einen Testlauf vor dem Einsatz auf einer aktiven Seite und stehe für Fragen und Anregungen immer gerne zur Verfügung.

Lizenz

Das Plugin ist unter der GNU Public License (www.gnu.org/copyleft/gpl.html) lizensiert.

aktuelle Version Joomla!2.5, und 3.1.: 1.3.7

- behebt einen Fehler mit PHP5.4
- verfügbar für Joomla!3.1
- Sprachdateien

Support

Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung. Bitte geben Sie bei Ihrer Frage die verwendete Joomla! Version an und posten Sie bei Problemen - soweit möglich - einen Link zur betroffenen Seite.

Wer für sein Projekt zusätzliche Funktionen oder Adaptierungen über die Möglichkeiten des hier gebotenen Supports benötigt, der ist eingeladen, mich mit einer Beschreibung der gewünschten Leistungen und dem angedachten Budget per Email zu kontaktieren (Menüpunkt "Kontakt" im Topmenü).

Download

Das ZIP-Archiv enthält das Plugin, mit dem Download erklären Sie sich mit den Bestimmungen der GNU Public License einverstanden. Das ZIP-Archiv kann für Update und Neuinstallation verwendet werden. Bitte verwenden Sie das für Ihre Joomla! Installation passende Archiv. _J2.5 für Joomla! 2.5.x und _J3.1 für Joomla! 3.x

J!2.5.x - plg_cssgallery_v1.3.7_J2.5.zip Downloads: 6.334

J!3.1.x
- plg_cssgallery_v1.3.7_J3.1.zip Downloads: 5.452

Wer die Erweiterung nutzt den bitte ich, sie auf extensions.joomla.org zu bewerten und einen Erfahrungsbericht zu posten.

Zuletzt aktualisiert am Sonntag, den 18. August 2013 um 13:15 Uhr
 
Kommentare (33)
Please help
23 Mittwoch, den 09. November 2011 um 17:14 Uhr
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
Mittwoch, den 09. November 2011 um 22:28 Uhr
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.
22 Montag, den 07. November 2011 um 23:34 Uhr
Marcela

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

Thanks in advance!!

@Marcela
Dienstag, den 08. November 2011 um 21:57 Uhr
A. Berger

Hi Marcela!

What for?

Best regards
Andreas

Help!
21 Dienstag, den 18. Oktober 2011 um 16:44 Uhr
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
Dienstag, den 18. Oktober 2011 um 22:43 Uhr
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
20 Montag, den 13. Juni 2011 um 14:46 Uhr
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
Sonntag, den 26. Juni 2011 um 16:51 Uhr
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
Montag, den 20. Juni 2011 um 15:05 Uhr
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
Dienstag, den 14. Juni 2011 um 21:10 Uhr
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
Dienstag, den 14. Juni 2011 um 13:32 Uhr
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
Montag, den 13. Juni 2011 um 20:33 Uhr
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

Probleme mit captions
19 Montag, den 06. Juni 2011 um 22:14 Uhr
webstone

vielen dank erst mal für deine wirklich tolle arbeit. hoffe du kannst mir beim finishen weiterhelfen: ich habe die css gallery installiert, läuft alles prima.
das problem: wenn ich captions aktiviere, dann bleibt der erste text incl. head (vom ersten bild) quasi darunter immer als geister-text sichtbar. dies stört die anderen caption-texte natürlich sehr. wenn ich fixed start image deaktiviere, springt mir immer das erste bild weg, was auch nicht erwünscht ist.
kannst du mir weiterhelfen? der link lautet: http://htr.mrco.de/index.php?option=com_content&view=article&id=1&Itemid=2
noch eine frage: wie komme ich an die formatierung der captions heran? notfalls könnte ich mir damit auch behelfen (background mit gleichem farbwert wie color)?

vielen dank für deine hilfe ;-() webstone

@webstone
Dienstag, den 07. Juni 2011 um 21:23 Uhr
A. Berger

Hallo webstone!

ad1) Die Captions sind dafür ausgelegt, dass sie überdas Bild eingeblendet werden. In Deinem Fall sind die Bilder quadratisch, die Galerie allerdings ist höher als breit. Dadurch werden die Captions unterhalb des unteren Randes des Bilds angezeigt - und die Captions des Startbildes (fix und immer "sichtbar") nicht vom jeweils aktuellen Bild verdeckt. Ändere das Format der Galerie so, dass sich das Verhältnis mit dem der Originalbilder deckt (Breite = Höhe) und das Problem ist behoben.

ad2) Die Galerie hat kein eigenes Stylesheet, auf die Captions kannst Du aber mit den beiden folgenden Selektoren (z.B. im Stylesheet des Templates hinzufügen) zugreifen:
mylink:hover span span {} ... Captions allgemein
.mylink:hover span span.becssg_cap_title {} ... Titelzeile (soweit anders als die Textzeile)
Ich gehe aber davon aus, dass sich diese Frage erübrigt sobald Du Punkt 1 erledigt hast. :)

Gruß
Andreas

Bei Klick auf ein Bild wird auf die Startseite verlinkt?
18 Samstag, den 21. Mai 2011 um 17:22 Uhr
Clemens

Erstmal vielen Dank für dieses geniale Plugin!

Was mich nur etwas stört und in den Plugineinstellungen auch nicht wirklich behebbar zu sein scheint ist die Sache, dass ich jedes Bild anklicken kann und dann auf die Startseite weitergeleitet werde. Die Bilder sollten eigentlich gar nicht anklickbar sein. Wie mache ich das?

Mit besten Grüßen
Clemens

Jetzt funktioniert's...
Donnerstag, den 26. Mai 2011 um 14:33 Uhr
Clemens

Plötzlich funktionierts :) Naja... hatte der Browser mal einen schlechten Tag.

Vielen Dank für den Support.

@Clemens
Montag, den 23. Mai 2011 um 19:42 Uhr
A. Berger

Hallo Clemens!

Anklickbare Links werden die Thumbnails immer bleiben, denn darauf ist das Plugin aufgebaut. Wenn alles korrekt funktioniert, dann sollte der Klick auf ein Thumbnail aber nicht zur Startseite weiterleiten sondern zu einem Anker am oberen Rand der Galerie. Sie wird also nur exakt ins Bild gerückt.
Eine mögliche Ursache für das Verhalten, das Du beschreibst ist, dass der Tag für die Dateibasis (base href) im Head der Seite nicht - wie bei Joomla! üblich - auf die aktuelle Seite sondern auf die Domain verweist.

Gruß
Andreas

Trouble Displaying in module
17 Dienstag, den 17. Mai 2011 um 21:48 Uhr
Zericoni

Thanks for the amazing gallery! It works beautifully inside an article, but need when I use Articles Anywhere to pull it into a module, it breaks apart, causing the photo and thumbnails to spread out on the page (See left column of link below). Is there a way to fix this?

http://67.228.225.128/~tcac08/index.php?option=com_content&view=article&id=87&Itemid=54


Thanks! Z

@Zericoni
Dienstag, den 17. Mai 2011 um 22:00 Uhr
A. Berger

Hi Zericoni!

Obviously "Articles Anywhere" does not allow the plugin to add CSS to the HEAD of the page. This causes the plugin to fail. The page FAQ&Troubleshooting (find the link in the menu at the left) lists two extensions (there may be more - if you find one, please let me know) that allow the plugin to be used at module positions.
Anywhere, there are limitations:
At the moment (till the next update) the plugin will work this way but only as long as there is just a single instance at one page. This is caused by the fact that the used extensions are not providing the (in an article available) article identity, the plugin needs to create unique CSS selectors. The next version will overcome this dependency but if your project needs multiple galleries at module positions - I would switch to an extension explicitly developed as a module. The category "Photos & Images" at extensions.joomla.org lists a lot of them.

Best regards
Andreas

click to enlarge :)
16 Montag, den 16. Mai 2011 um 07:54 Uhr
Davs

Hi ! and thanks for this nice gallery :)

is it possible that by clicking on a thumbnail image or the gallery that opens this picture great?

@Davs
Dienstag, den 17. Mai 2011 um 19:44 Uhr
A. Berger

Hi Davs!

No, up till now this is only possible by creating links to the original image manually. Maybe you want to have a look at my other gallery plugin, the "Very Simple Image Gallery" (find the link in the menu at the left), it allows to auto-link the main image to the original image file (opening in a new window) by setting the appropriate parameter in the configuration panel.

Best regards
Andreas

1.5_gallery
15 Samstag, den 14. Mai 2011 um 07:18 Uhr
brl_Fred

ein weltklasse-ding ! funzt unter 1.5 einwandfrei und schnell, ich bin gebeistert !

Gruß

captions etc
14 Donnerstag, den 12. Mai 2011 um 20:07 Uhr
maverick

Hi,

I've just downloaded and installed you gallery (it's pretty good) but I have a few problems:

How can I add captions to my images?
How can I change horizontal space between thumbs - I did this in settings but it dosn't work

Can you help me please? (:
Thank you in advance!

@maverick
Freitag, den 13. Mai 2011 um 21:27 Uhr
A. Berger

Hi maverick!

Captions are added using additional code in the article. Check the page "Howto Plugin Code" (find the link in the menu at the left), it explains the feature.

About the space between the thumbs - activate the option to crop the thumbnails. Any changes? Does the option to change the space between them work now?

If yes: The proportion you set for the main images does not exactly meet the real image proportions. Therefore the thumbs show more horizontal space then expected. Either change the settings for the main images to meet the real image proportions - or leave the option to crop the thumbs activated.

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

Best regards
Andreas

Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 60 Gäste online