Startseite Joomla CSS Gallery
2010-08-01
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! 1.5 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.
Beim ersten Aufruf werden im angegebenen Ordner zwei Unterordner angelegt. In einem speichert das Plugin die Thumbnails, im anderen die Bilder. Skaliert wird jeweils entsprechend den eingestellten Vorgaben. Die Originalbilder bleiben unverändert.
Das Plugin prüft bei jedem Aufruf, ob die gespeicherten Bilder/Thumbnails noch den eingestellten Parametern entsprechen. Hat man etwas geändert, dann werden aus den Originalen neue Bilder und Thumbnails erzeugt.

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

Neu in Version 1.3.2:

- Bildnamen im Code für Links und Captions caseINsensitive

Neu in Version 1.3.0:

- zusätzliche Optionen bei Ausrichtung: float:left, float:right
- Bilder sortierbar A-Z, Z-A, alt-neu, neu-alt, zufällig
- Parameter "limitstart" in onPrepareContent auf "0" um Fehlermeldungen mit div. content2module-Erweiterungen zu vermeiden
- Thumbnails unterstützen transparente GIFs und PNGs
- jedes Thumbnail kann gesondert verlinkt werden
- das "target" Attribut ist für jedes Bild frei wählbar
- optional kann ein Link für die gesamte Galerie festgelegt werden

 

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! 1.5.6, 1.5.9 und 1.5.15 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.

Version 1.3.4 - 2010-06-15

- preload Array ist unter gewissen Umständen sichtbar - behoben

Support

Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung.

Wer die Erweiterung nutzt den bitte ich, sie auf extensions.joomla.org zu bewerten und einen Erfahrungsbericht zu posten. Darüber hinaus freue ich mich über jeden, der die Möglichkeit findet, mich durch einen Link zu www.bretteleben.de auf seiner Webseite zu unterstützen. Das Plugin selbst produziert keine versteckten Links oder sonstige Nettigkeiten welcher Art auch immer.

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 kann als Neuinstallation und als Upgrade genutzt werden.

Downloads:
DateiZuletzt bearbeitet
Diese Datei herunterladen (plg_becssg_1.3.4.zip) plg_becssg_1.3.4.zip2010-06-15
Zuletzt aktualisiert am Dienstag, den 15. Juni 2010 um 20:15 Uhr
 
Kommentare (323)
becsscg.css
323 Mittwoch, den 14. Juli 2010 um 10:29 Uhr
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
Mittwoch, den 21. Juli 2010 um 15:47 Uhr
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 Sonntag, den 11. Juli 2010 um 09:31 Uhr
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
Mittwoch, den 21. Juli 2010 um 15:42 Uhr
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 Samstag, den 10. Juli 2010 um 07:22 Uhr
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
Mittwoch, den 21. Juli 2010 um 15:51 Uhr
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 Donnerstag, den 08. Juli 2010 um 06:38 Uhr
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
Donnerstag, den 08. Juli 2010 um 21:45 Uhr
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 Donnerstag, den 01. Juli 2010 um 00:23 Uhr
Paul Richardson

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

Make thumbnail images clickable?
318 Dienstag, den 29. Juni 2010 um 15:51 Uhr
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
Donnerstag, den 01. Juli 2010 um 21:51 Uhr
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 Samstag, den 26. Juni 2010 um 22:16 Uhr
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
Donnerstag, den 08. Juli 2010 um 22:08 Uhr
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 Samstag, den 26. Juni 2010 um 19:22 Uhr
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.
Montag, den 28. Juni 2010 um 21:40 Uhr
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 Donnerstag, den 24. Juni 2010 um 16:21 Uhr
Barb

Hi everyone!

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

Thanks!!!


 

@Barb
Donnerstag, den 24. Juni 2010 um 22:00 Uhr
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 Mittwoch, den 23. Juni 2010 um 08:07 Uhr
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
Mittwoch, den 23. Juni 2010 um 20:53 Uhr
A. Berger

Hi Serg!

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

Best regards
Andreas

Deutsch
Panoramic Image Viewer
AddThis Social Bookmark Button
Wer ist online
Wir haben 31 Gäste online
Neueste Beiträge