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: 8.949

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

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)
little problem
13 Montag, den 09. Mai 2011 um 16:12 Uhr
Mathieu Ben

I have just downloaded the css gallery module for joomla 1.6 and it looks great. Unfortunately some error messages appear on the front end when I use it.

Strict Standards: Only variables should be assigned by reference in C:\xampp\htdocs\Sacea\plugins\content\cssgallery\cssgallery.php on line 79
Strict Standards: Non-static method plgContentCssgalleryHelper::beSortImages() should not be called statically, assuming $this from incompatible context in C:\xampp\htdocs\Sacea\plugins\content\cssgallery\cssgallery.php on line 149
[...]

I use Joomla Joomla! 1.6.3 Stable [ Onward ] with the Beez5 default template.
I have the lastest version of xamp.
I spent a long time trying to understand what these messqges meant on internet but I couldn't find any usefull information. I would be very glad if someone could help me out.

Thanks

@Andreas
Dienstag, den 10. Mai 2011 um 09:01 Uhr
Mathieu Ben

I changed the setting to simple and it works now.

Your module is great. Thanks a lot!

@Mathieu Ben
Montag, den 09. Mai 2011 um 20:15 Uhr
A. Berger

Hi Mathieu!

What you see are "notices", not "errors" and they are caused by the fact that the Error Reporting Level on your XAMPP is set to "_ALL^E_STRICT".
With this notices PHP tells you (in fact it tells me), that it thinks my code could be improved. The reason why you see these notices, is that the Error Reporting Level in your Joomla! Installation is - probably - set to "Maximum". To change this (on a live site errors should be turned off anyway), log into your Joomla! backend, go to "Site" > "Global Configuration" > "Server" and under "Server Settings" change the setting for "Error Reporting" to "Simple" or just "None". Having saved the changes, the notices should be gone.

If this does not work, just feed your favorite search engine with "php turn off strict errors", you will find lots of useful tips.

Best regards
Andreas

allowed memory size exhausted
12 Sonntag, den 08. Mai 2011 um 23:16 Uhr
web genius

I have 35 pictures in my gallery & it was working great for 2 days. I received the error message after 2 days when trying to access the page where the gallery is called. I'm using joomla 1.6

Fatal error: Allowed memory size of 18874368 bytes exhausted (tried to allocate 8192 bytes)

@web genius
Montag, den 09. Mai 2011 um 20:22 Uhr
A. Berger

Hi web genius!

You are running into a fatal error because the GD library needs more memory to create the scaled images/thumbs than your web-account provides. Please check the page "FAQ&Troubleshooting" (find the link in the menu at the left), it deals with this problem.

About the fact that this happens after the plugin worked fine for two days:
Maybe you added a large (in terms of dimensions not necessarily file size) image that hits the limit or you installed additional extensions that consume additional memory since your last changes in the settings of the plugin.

Best regards
Andreas

how set different folder for image?
11 Freitag, den 06. Mai 2011 um 11:57 Uhr
franco

hi

gallery is nice.

how set different folder for image?
i can use this gallery in different page with different photo?

@franco
Montag, den 09. Mai 2011 um 21:24 Uhr
A. Berger

Hi franco!

The name of the folder (or path to the folder starting from the image root) is part of the code in your article. This means with every single code you decide which folder to use:

{*becssg}folderA{/becssg*}
{*becssg}folderB{/becssg*}
{*becssg}folderC{/becssg*}
{*becssg}folderD{/becssg*}
{*becssg}folderWHATEVER{/becssg*} ... without the asterisks

Insert as many galleries in as many articles you want/need.

Best regards
Andreas

photo titles - lower decenders on letters "y", "p", "g", etc are cut off
10 Freitag, den 29. April 2011 um 20:42 Uhr
Paul Knupke

I have just started using CSS Gallery and really like it.  I am having a problem with photo titles cutting off the letters with lower decenders such as "y", "p", "g", etc.
Is there a setting that will fix this issue?  Here is the webpage: http://www.stmat.org/index.php?option=com_content&view=category&layout=blog&id=68&Itemid=104
Any suggestions is greatly appreciated.

Thanks,
Paul, email:  paul DOT knupke AT stmat DOT org

@Paul Knupke
Samstag, den 30. April 2011 um 15:01 Uhr
A. Berger

Hi Paul!

You are right, Internet Explorer does not display the Captions the way they should be. Thanks for pointing me to this, I will address this with the next update.

Best regards
Andreas

css gallery erstellt keine images / thumbs
9 Donnerstag, den 28. April 2011 um 10:11 Uhr
sigi

hallo,

wollte das plugin benutzen, hab aber probleme: plugin installiert, den code im beitrag eingefügt mit entsprechendem ordnerlink.
im beitrag wird das plugin geladen, aber nicht ordentlich ausgeführt: statt den thumbs erscheint der dateiname in richtig großen buchstaben und ein thumb bzw. das bild wird nicht angezeigt.
im ftp-server sehe ich, wie im bilderordner die 2 ordner (images, thumbs) erstellt wurden, diese aber leer sind.
rechte von ordner sind auf 755. (standard)
server von einsundeins.de
irgendwelche ideen?

gruß sigi

@sigi
Montag, den 02. Mai 2011 um 21:17 Uhr
A. Berger

Hallo sigi!

Fein dass es jetzt funktioniert.
Zu Deinen Fragen zwischendurch:
- der JavaScript-Fehler kann nicht mit dem Plugin zu tun haben - es arbeitet ohne JavaScript
- ja, ich habe eine Emailadresse, sie findet sich im Menüpunkt "Kontakt" im Top-Menü :)

Gruß
Andreas

fehler gefunden!
Montag, den 02. Mai 2011 um 08:11 Uhr
sigi

ich habs gefunden, lag an der php version.

bei installation von joomla auf dem 1&1 server gab es php probleme; in der htaccess die php version definiert auf php6 (wie in entsprechenden faqs erläutert).
habe in der htaccess die php auf 5 geändert und es geht nun! es wird nun auch jpg supporter in der gd-lib.
dh es gab wohl bei den gallerien probleme, das thumbnail als jpg zu generieren.

gruß sigi

nachtrag
Montag, den 02. Mai 2011 um 07:40 Uhr
sigi

der iexplorer gibt folgende fehlermeldung aus:

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; AskTbFXTV5/5.9.1.14019)
Zeitstempel: Mon, 2 May 2011 06:39:58 UTC

Meldung: 'document.getElementById(...)' ist Null oder kein Objekt
Zeile: 57
Zeichen: 2
Code: 0
URI: http://desch-architekten.de/index.php/jgerman/test

ich kann damit nichts anfangen :P

..
Montag, den 02. Mai 2011 um 07:10 Uhr
sigi

hallo andreas,

jetzt geht der zugriff, hp war auf wartungsmodus.
ich kann bei direkter eingabe das bild öffnen,
das level hab ich max gesetzt, keine änderung
ftp-modus ist deaktiviert und kann ich nicht ändern:

JFTP::login: Unable to login
JFTP: :write: Passiver Modus kann nicht genutzt werden
Konnte die Daten nicht speichern. Fehler: In die Konfigurationsdatei kann nicht geschrieben werden!

dieser ftp-fehler ist mir schon länger mit 1&1 bekannt, hat aber noch nie probleme gemacht.
bin ratlos :(
weil eben auch andre plugins welche ebenfalls im content bilder darstellen nicht funktionieren :( :( :(
andreas, hast du mailaddresse oder andre kontaktmöglichkeit?

@sigi
Sonntag, den 01. Mai 2011 um 21:07 Uhr
A. Berger

Hallo sigi!

Danke für den Link, leider ist die Seite für Besucher gesperrt.

Da ich damit weiter blind rate:
- hast Du mal versucht, eines der hochgeladenen Bilder im Browser direkt zu öffnen (http://desch-architekten.de/images/DEINORDNER/DEINBILD.PNG)?
- hast Du mal versucht, das Error Reporting Level im Backend auf "Maximum" zu setzen? Wird dann im Beitrag mit der Galerie eine Fehlermeldung angezeigt?
- hast Du mal versucht, den Joomla! FTP-Layer zu aktivieren bzw. - wenn er aktiviert ist - zu deaktivieren?

Gruß
Andreas

...
Sonntag, den 01. Mai 2011 um 17:07 Uhr
sigi

hier der link: http://desch-architekten.de/index.php/jgerman/test

hab auch schon 1&1 angeschrieben (wegen dem fehlen von jpg in der gd-lib) aber noch keine antwort bekommen.

gruß sigi

@sigi
Samstag, den 30. April 2011 um 12:32 Uhr
A. Berger

Hallo sigi!

An sich ist das Ganze recht seltsam. Dass die Ordner für Bilder und Thumbs leer sind UND es keine Fehlermeldung im Frontend gibt, würde für ein Problem mit der GD lib sprechen.
Bei Problemen mit den Ordner-/Dateirechten gibt das Plugin die entsprechende Fehlermeldung aus.

Würdest Du bitte einen Link zur Seite mit der Galerie posten?

Gruß
Andreas

weiterhin
Freitag, den 29. April 2011 um 07:10 Uhr
sigi

hallo andreas,

danke für die hinweise.
gd lib wird aktiv im pluginbackend angezeigt, wobei nur png supported wird und keine jpg (seltsamer mist) gif als create und read.
jedenfalls habs ich die bilder auch als png aufn server. geht auch nicht.
und die rechte der bilder auf dem ftpserver sind wie gewollt 644.

hier ein screen des beitrags, zwar nicht aussagekräftig aber immerhin: http://img824.imageshack.us/img824/1747/screenitg.png

nochmal zum systemkonfiguration:
webspace bei puretec (1&1.de), php5, joomla 1.6, css gallery 1.3.5; bilder unter images/subfolder als jpg png und gif.

aus joomla, systeminfo:
PHP Version 5.3.99-dev
System     Linux infong 2.4 #1 SMP Thu Nov 25 01:59:22 UTC 2010 i686 GNU/Linux
Build Date     Apr 13 2011 16:57:27
Configure Command     '../configure' '--program-suffix=6' '--with-pear=/usr/lib/php6' '--with-config-file-path=/usr/lib/php6' '--with-mysqli' '--with-kerberos' '--with-imap-ssl' '--enable-soap' '--with-xsl' '--enable-mbstring=all' '--with-curl' '--with-mcrypt' '--with-gd' '--with-pdo-mysql' '--with-freetype-dir' '--with-libxml-dir' '--with-zlib' '--enable-debug=no' '--enable-safe-mode=no' '--enable-discard-path=no' '--with-png-dir' '--enable-track-vars' '--with-db' '--with-gdbm' '--enable-force-cgi-redirect' '--with-ttf' '--enable-ftp' '--enable-dbase' '--enable-memory-limit' '--enable-calendar' '--enable-wddx' '--with-jpeg' '--enable-bcmath' '--enable-gd-imgstrttf' '--enable-shmop' '--enable-mhash' '--with-mhash' '--with-openssl' '--enable-xslt' '--with-xslt-sablot' '--with-dom' '--with-dom-xslt' '--with-dom-exslt' '--with-imap' '--with-iconv' '--with-bz2' '--with-gettext' '--enable-exif' '--with-sqlite' '--enable-sqlite-utf8' '--enable-zip' '--with-tidy' '--enable-intl'
Server API     CGI/FastCGI
Virtual Directory Support     disabled
Configuration File (php.ini) Path     /usr/lib/php6
Loaded Configuration File     /usr/lib/php6/php.ini
Scan this dir for additional .ini files     (none)
Additional .ini files parsed     (none)
PHP API     20100412
PHP Extension     20100525
Zend Extension     220100525
Zend Extension Build     API220100525, NTS
PHP Extension Build     API20100525, NTS
Debug Build     no
Thread Safety     disabled
Zend Memory Manager     enabled
Zend Multibyte Support     provided by mbstring
IPv6 Support     enabled
DTrace Support     disabled
Registered PHP Streams     https, ftps, compress.zlib, compress.bzip2, php, file, glob, data, http, ftp, phar, zip
Registered Stream Socket Transports     tcp, udp, unix, udg, ssl, sslv3, sslv2, tls
Registered Stream Filters     zlib.*, bzip2.*, convert.iconv.*, mcrypt.*, mdecrypt.*, string.rot13, string.toupper, string.tolower, string.strip_tags, convert.*, consumed, dechunk

gd
GD Support     enabled
GD Version     bundled (2.0.34 compatible)
FreeType Support     enabled
FreeType Linkage     with freetype
FreeType Version     2.2.1
GIF Read Support     enabled
GIF Create Support     enabled
PNG Support     enabled
libPNG Version     1.2.15beta5
WBMP Support     enabled
XBM Support     enabled

@sigi
Donnerstag, den 28. April 2011 um 20:16 Uhr
A. Berger

Hallo sigi!

Überprüf mal im Konfigurationspanel des Plugins (am Ende der Parameter) ob die GD library installiert und aktiviert ist und ob der Dateityp den Du verwendest (jpg, gif oder png) auch unterstützt wird.
Wenn dort alles in Ordnung ist, dann überprüfe bei den hochgeladenen Bildern auch noch, ob die Rechte für die Bilder korrekt gesetzt sind (644).

Gruß
Andreas

Ordering the images?
8 Sonntag, den 24. April 2011 um 15:26 Uhr
Philippe

Is there a way for the images to appear in the alphabetical order? I tried naming my pictures 1.jpg, 2.jpg, 3.jpg etc. but the plugin doesn't respect that order and they appear in a seemingly random order on my page.

Thanks for any help!

@Philippe
Montag, den 25. April 2011 um 14:03 Uhr
A. Berger

Hi Philippe!

The parameter "Sort Order" set the way the plugin sorts the images. Choose "A-Z" to get them sorted alphabetically, ascending. If you are using numbers as file names, make sure to start with 01, 02 for more than 9 images.

Best regards
Andreas

Installationsproblem bei der CSS-Galerie
7 Donnerstag, den 21. April 2011 um 02:15 Uhr
Sepp Martin

Ich scheitere noch beim Aufruf der Medienbibliothek im localhost - danke für die Unterstützung

@Sepp Martin
Donnerstag, den 21. April 2011 um 20:39 Uhr
A. Berger

Hallo Sepp Martin!

Ein base64 kodiertes Bild in einen Kommentar einzufügen, ist zwar eine nette Idee, aber da es mir durch seine Breite das Layout zerschossen hätte - habe ich es entfernt.

Zu Deinem Problem: Es hat zwar nichts mit diesem Plugin zu tun, aber um es zu lösen geh im Joomla! Backend zum Menüpunkt "Site" > "Konfiguration", dort auf den Reiter "System" und dort änderst Du in der Sektion "Medien" den Wert des Parameters "Bilderverzeichnis" von "images{ppgallery}portraits{\ppgallery}" zurück auf den Standardwert "images/stories".

Gruß
Andreas

Default link not working
6 Montag, den 18. April 2011 um 19:01 Uhr
Michael

Hello,


I have the plugin working nicely - great job - i am just having trouble getting the default link to work


i have the album displaying with the thumbnails - and the links for the specific image in the album is working - but on initial load - there is not link on the first picture that loads until you rollover its thumbnail


here is the code (with asterisks for comment post)

{*becssg}product_images/walk_the_line{/becssg*}
{*becssg_l}0||hindex.php?page=shop.product_details&flypage=flypage.tpl&product_id=73&category_id=1&option=com_virtuemart&Itemid=160|Black Whiskey|_self{/becssg_l*}
{*becssg_l}0|productPhoto_walkBWcategory.jpg|index.php?page=shop.product_details&flypage=flypage.tpl&product_id=73&category_id=1&option=com_virtuemart&Itemid=160|Black Whiskey|_self{/becssg_l*}
{*becssg_l}0|productPhoto_walkCBcategory.jpg|index.php?page=shop.product_details&flypage=flypage.tpl&product_id=74&category_id=1&option=com_virtuemart&Itemid=160|Carbon Black|_self{/becssg_l*}
{*becssg_l}0|productPhoto_walkDCcategory.jpg|index.php?page=shop.product_details&flypage=flypage.tpl&product_id=75&category_id=1&option=com_virtuemart&Itemid=160|Dark Coffee|_self{/becssg_l*}

any help would be appreciated - great plugin
Michael

@Michael
Dienstag, den 19. April 2011 um 21:27 Uhr
A. Berger

Hi Michael!

Your code looks fine, the problem is caused by the way, the gallery works. It is built upon CSS only and the links you set are attached to the thumbnails, not the main images. In fact, what you see as the main image is the background image of a link attached to the thumbnails.
The initial image (if using a fixed image) is the background of the area the main images are using. It has no extra link attached.

If you need the links to work from the beginning, maybe you want to have a look at the "Very Simple Image Gallery" (link in the menu at the left), it is not self-limited to CSS and does not come with the flaw.

Best regards
Andreas

Automatischer Wechsel der Bilder?
5 Samstag, den 16. April 2011 um 11:29 Uhr
Albin

Hallo!

Super Plugin - nur noch eine Frage - ist es möglich die Bilder automatisch weiterzuschalten ohne das man mit der Maus drauf muß?

LG
Albin

@Albin
Sonntag, den 17. April 2011 um 18:26 Uhr
A. Berger

Hallo Albin!

Nein, das ist mit diesem Plugin nicht möglich. Auf extensions.joomla.org findest Du in der Kategorie "Photos & Images" aber einige Erweiterungen, die Galerie und Slideshow kombinieren.

Gruß
Andreas

Crop Images
4 Donnerstag, den 14. April 2011 um 16:54 Uhr
Catherine

Hi!

I Love VSIG! I just have a questions...Is there a way to also crop the images to a specific height and width? I need the gallery to be always the same size, without having to crop manually all of my images to have them fit the same ratio...
I tried CSS gallery,, but I don't want the pictures to change on hover, only on click...
Is there a way to do this?

Thank you! :)
Catherine

@Catherine
Donnerstag, den 14. April 2011 um 20:37 Uhr
A. Berger

Hi Catherine!

Not up till now, but I plan to add this option to the next version of the Very Simple Image Gallery too.

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 11 Gäste online