Startseite Joomla CSS Gallery - Anleitung Plugin Code
CSS Gallery Plugin Verwendung - Code
Geschrieben von: Andreas Berger   
Montag, den 20. Juli 2009 um 06:24 Uhr

Übersicht über die Möglichkeiten des Aufrufs direkt aus dem Artikel.

Das "CSS Gallery" Plugin wird aus dem jeweiligen Artikel aufgerufen. Dabei gibt es - neben der Wahl des Ordners, in dem die Bilder liegen - weitere Möglichkeiten, die Galerie aufzuwerten oder zu gestalten.

 

A.) Die Galerie selbst

Der Code besteht aus dem Aufruf selbst {*becssg}{/becssg*} (ohne die Sterne) und enthält den Namen des Ordners, in dem wir gerade die Bilder abgelegt haben. Der eingestellte Pfad zum Ordner (imageroot), also per Default "/images/stories/" für Joomla!1.5 und "/images/" für Joomla!1.6/1.7 wird vom Plugin automatisch ergänzt und ist nicht mit anzugeben.

Ein Aufruf sieht also zum Beispiel so aus

{*becssg}cssgallery{/becssg*} - ohne die Sterne


Um einen Ordner in einem Unterordner zu verwenden, wird sinngemäß der Pfad unterhalb von "/images/stories/" unterhalb des eingestellten Hauptordners (per Default "/images/stories/" für Joomla!1.5 und "/images/" für Joomla!1.6/1.7) angegeben, also zum Beispiel in Joomla!1.5 für den Ordner "/images/stories/ordner/unterordner":

{*becssg}ordner/unterordner{/becssg*} - ohne die Sterne

An sich war es das und die Galerie ist einsatzfertig.




B.) Parameter Overrides

Beginnend mit Version 1.2 bietet die "CSS Gallery" die Möglichkeit, alle im Konfigurationspanel des Plugins gesetzten Werte direkt im Aufruf zu überschreiben. Damit können verschiedenst gestaltete Galerien erstellt werden. Man kann verschieden breite und hohe Galerien erstellen, Anzahl der Thumbnails je Reihe und mehr variieren.

Dazu wird der Aufruf des Plugins um die benötigten Parameter erweitert. Diese folgen dem Ordnernamen, von diesem und untereinander jeweils getrennt durch einen vertikalen Trennstrich und haben das Format PARAMETER=WERT:

Übersicht über die möglichen Parameter:

width - maximale Breite des Hauptbildes in Pixel (ganze Zahl) z.B.: 600

height - maximale Höhe des Hauptbildes in Pixel (ganze Zahl) z.B.: 450

iqual - Qualität des skalierten Hauptbildes in Prozent (ganze Zahl von 1-100) z.B.: 90

icrop - Sollen die Bilder proportional skaliert oder beschnitten werden; mögliche Werte: keep (proportional), crop (beschnitten)

throw - Anzahl der Thumbnails pro Reihe (ganze Zahl) z.B.: 4

tqual - Qualität der Thumbnails in Prozent (ganze Zahl von 1-100) z.B.: 70

space - Platz zwischen den Thumbnails (ganze Zahl in Pixel) z.B.: 3

tcrop - Sollen die Thumbnails proportional skaliert oder beschnitten werden; mögliche Werte: keep (proportional), crop (beschnitten)

prld - sollen die Hauptbilder vorgeladen werden; mögliche Werte: 0 (nein), 1 (ja)

align - Ausrichtung der Galerie im Artikel; mögliche Werte: 0 (rechts), 1 (mitte), 2 (links), 3 (float left), 4 (float right)

sort - Sortierung der Bilder; mögliche Werte: 0 (A-Z - DEFAULT), 1 (Z-A), 2 (alt-neu), 3 (neu-alt), 4 (zufällig)

fixstart - Soll das Startbild beim Mouseover sichtbar bleiben; mögliche Werte: 0 (nein), 1 (ja)
(Kann bei verschiedenformatigen Bildern optional deaktiviert werden. Nicht crossbrowser!)

caps - Captions anzeigen; mögliche Werte: 0 (nein), 1 (ja)

links - Links anzeigen; mögliche Werte: 0 (nein), 1 (ja)


Beispiele:

{*becssg}cssgallery|width=600|align=2{/becssg*} - ohne die Sterne
Ungeachtet der Voreinstellungen wird diese Galerie mit einer Breite von 600 Pixel (width=600) angezeigt und im Artikel links angeordnet (align=2)

{*becssg}cssgallery|caps=0|prld=0{/becssg*} - ohne die Sterne
keine Captions (caps=0), kein Preload (prld=0)

{*becssg}cssgallery|width=400|height=300|throw=5|iqual=95|tqual=70{/becssg*} - ohne die Sterne
Breite 400 Pixel (width=400), Höhe 300 Pixel (height=300), 5 Thumbs pro Reihe (throw=5), Qualität Hauptbild 95% (iqual=95), Qualität Thumbs 70% (tqual=70)

Hinweise:

Die Parameter entsprechen den Parametern im Konfigurationspanel des Plugins und sind auf der Seite Anleitung Plugin ausführlich erläutert.
Der erste Parameter innerhalb eines Aufrufs ist immer der Ordner mit den Bildern. Danach ist die Reihenfolge, in der die Overrides angegeben werden frei wählbar.




C.) Captions

Überschriften und Texte werden mit einem eigenen Aufruf angegeben. Dieser lautet:

{*becssg_c}Galerienummer|Bilddatei|Titel|Text{/becssg_c*} - ohne die Sterne


Galerienummer:
Die Galerien innerhalb eines Beitrages werden vom Plugin automatisch von 0 beginnend durchnummeriert.
Diese Eingabe ist unbedingt erforderlich

Bilddatei:
Der exakte Name der Datei "meinbild.jpg".
Wird hier nichts eingegeben, dann wird der Aufruf als Default-Wert für die Galerie verwendet. Das bedeutet, er wird bei allen Bildern angezeigt, für die keine eigene Eingabe vorhanden ist.

Titel:
Die Überschrift. Wird hier nichts eingegeben . . . dann wird keine Überschrift angezeigt.

Text:
Der Text unterhalb der Überschrift. Wird hier nichts eingegeben . . . dann wird kein Text angezeigt.

Beispiele:

{*becssg_c}0||meinTitel|meinText{/becssg_c*} - ohne die Sterne
Dieser Aufruf legt für die erste Galerie im Beitrag den Standardtitel "meinTitel" und den Stadardtext "meinText" fest, indem kein Bild angegeben wird. Hinweis: natürlich muss man keinen Stadardtext festlegen. Findet das Plugin für ein Bilöd keine Angabe, dann wird eben nichts angezeigt.

{*becssg_c}1|bild01.png||meinText{/becssg_c*} - ohne die Sterne
Bei bild01.png in der zweiten Galerie im Beitrag wird keine Überschrift und als Text "meinText" angezeigt.

{*becssg_c}0|bild02.png||{/becssg_c*} - ohne die Sterne
Bei bild02.png in der ersten Galerie im Beitrag wird nichts angezeigt (Auch nicht der weiter oben festgelegte Standardtext/-titel.)

{*becssg_c}0|bilda.jpg|meinTitelA|meinTextA{/becssg_c*} - ohne die Sterne
{*becssg_c}0|bildb.jpg|meinTitelB|meinTextB{/becssg_c*} - ohne die Sterne
{*becssg_c}0|bildc.jpg|meinTitelC|meinTextC{/becssg_c*} - ohne die Sterne
{*becssg_c}0|bildd.jpg|meinTitelD|meinTextD{/becssg_c*} - ohne die Sterne ... ich glaube, das Prinzip ist klar

Hinweise:
Wo im Beitrag und in welcher Reihenfolge diese Angaben gemacht werden ist ohne Belang.
Die Anzahl der Parameter in einem Aufruf muss immer 4 sein. Das bedeutet, es müssen immer 3 vertikale Trennstriche (broken vertikal bar) angegeben sein, auch wenn zum Beispiel kein Text angegeben wird, der Trennstrich nach dem Titel muss vorhanden sein!
Diese Trenner sind hier geschützte Zeichen und dürfen im Text der Eingaben nicht verwendet werden.


D.) Links

Möchten wir die Bilder der Galerie verlinken, dann kommt zusätzlich noch eine dritte Form des Aufrufs zum Einsatz:

{*becssg_l}Galerienummer|Bilddatei|Verweisziel|Titel|target{/becssg_l*} - ohne die Sterne


Galerienummer:
Die Galerien innerhalb eines Beitrages werden vom Plugin automatisch von 0 beginnend durchnummeriert.
Diese Eingabe ist unbedingt erforderlich

Bilddatei:
Der exakte Name der Datei "meinbild.jpg".
Wird hier nichts eingegeben, dann wird der Aufruf als Default-Wert für die Galerie verwendet. Das bedeutet, er wird für alle Bilder verwendet, für die keine eigene Eingabe vorhanden ist.

Verweisziel:
Die URL zu der verlinkt werden soll. Z.B.: http://www.bretteleben.de

Titel:
Der Text, der beim Überfahren des Bildes für den Link angezeigt werden soll. z.B.: bretteleben.de

target:
Das Fenster, in dem das Verweisziel geöffnet werden soll. z.B.: _blank (neues Fenster), _self (selbes Fenster)

Beispiele:

{*becssg_l}0||http://www.bretteleben.de|bretteleben.de|_blank{/becssg_l*} - ohne die Sterne
Dieser Aufruf legt durch den leeren Bildnamen für die erste Galerie im Beitrag den Standardlink www.bretteleben.de mit dem Text bretteleben.de fest, geöffnet wird der Link in einem neuen Fenster.

{*becssg_l}1|bild01.png|http://www.disney.com|Disney|_self{/becssg_l*} - ohne die Sterne
bild01.png in der zweiten Galerie wird mit www.disney.com verlinkt, der Link öffnet im selben Fenster.

{*becssg_l}0|bild02.png|||{/becssg_l*} - ohne die Sterne
bild02.png in der ersten Galerie im Beitrag soll nicht verlinkt werden. Ein Sonderfall, denn wenn man Links aktiviert hat, dann werden alle Bilder der Galerie verlinkt. bild02.png wird in diesem Fall einen leeren Verweis haben und auf die selbe Seite verlinken.

{*becssg_l}0|bilda.jpg|http://www.meine.domain.com/meinTollesProdukt1|tollesProdukt1|_self{/becssg_l*} - ohne die Sterne
{*becssg_l}0|bildb.jpg|http://www.meine.domain.com/meinTollesProdukt2|tollesProdukt2|_self{/becssg_l*} - ohne die Sterne
{*becssg_l}0|bildc.jpg|http://www.meine.domain.com/meinTollesProdukt3|tollesProdukt3|_self{/becssg_l*} - ohne die Sterne
{*becssg_l}0|bildd.jpg|http://www.meine.domain.com/meinTollesProdukt4|tollesProdukt4|_self{/becssg_l*} - ohne die Sterne ... usw.

Hinweise:
Wo im Beitrag und in welcher Reihenfolge diese Angaben gemacht werden ist ohne Belang.
Die Anzahl der Parameter in einem Aufruf muss immer 5 sein. Das bedeutet, es müssen immer 4 vertikale Trennstriche (broken vertikal bar) angegeben sein, auch wenn eine Angabe (zum Beispiel der Name der Bilddatei) leer bleibt!
Diese Trenner sind hier geschützte Zeichen und dürfen im Text der Eingaben nicht verwendet werden.


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


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

Zuletzt aktualisiert am Freitag, den 28. Oktober 2011 um 18:19 Uhr
 
Kommentare (96)
code überschreiben geht nicht
96 Donnerstag, den 12. Januar 2012 um 09:51 Uhr
chris

Hallo Andreas

Sorry, es klappt jetzt doch, bin happy.  Hab Herzlichen Dank.

Christian

code überschreiben geht nicht
95 Donnerstag, den 12. Januar 2012 um 09:39 Uhr
chris

Hallo Andreas

Danke für die Antwort, aber auch mit den vertical bars will es nicht klappen,(habe sie allerdings nur rauskopiert, da ich sie auf der Tasatur nicht finden konnte- könnte es daran liegen?) hast Du noch eine andere Idee?

Herzlichen Dank
Chris

probleme beim überschreiben des codes der css-gallery
94 Dienstag, den 10. Januar 2012 um 22:48 Uhr
chris

Hallo Zusammen

Die css Galerie klappt wirklich gut. Ich habe nur ein Problem! Ich verwende sie für verschiedene Beiträge, und möchte sie mal links oder zentral oder rechts setzen, schaffe es aber nicht die Grundeinstellung sprich den einzelnen Code einer Galerie zu überschreiben. Laut Anleitung müßte alles richtig sein, aber es kommt immer die Meldung, daß das Verzeuchnis nicht gefunden wird.

Beispiel: {*becssg}cssgallery{/becssg*}  (ohne sterne)  hier klappt alles gut, schreibe ich jetzt aber :{*becssg}cssgallery/width=600/align=2{/becssg*} erscheint die Meldung das der Folder nicht gefunden wird..... wer könnte mir einen Tipp geben???

Herzlichen  Dank
Chris

@Chris
Mittwoch, den 11. Januar 2012 um 12:55 Uhr
A. Berger

Hallo Chris!

Ich. Schrägstriche werden zum Definieren von Pfaden verwendet, deshalb werden auch die Parameter vom Pfad nicht mit Strägstrichen sondern vertikalen Trennern (vertical Bar |) getrennt. In Deinem Fall sucht das Plugin den Ordner "cssgallery/width=600/align=2", den es natürlich nicht gibt. Versuch es also mal so:

{*becssg}cssgallery|width=600|align=2{/becssg*}  ... ohne die Sterne

Gruß
Andreas

Wie bekomme ich die Gallerie in einzelne Beiträge
93 Mittwoch, den 14. Dezember 2011 um 02:06 Uhr
Dominik

Hallo Zusammen,

kann mir hier irgendjemand erklären wie ich die Gallerie auf meine Seitebekomme bzw. in Beiträgen integrieren kann.
Muss ich den etwas in den html Bereich eintragen?
Ich steh grad total auf dem Schlauch...und mein Englisch ist leider zu schlecht um die englische Anleitung zu verstehen.

Grüße Dominik

@Dominik
Mittwoch, den 14. Dezember 2011 um 19:37 Uhr
A. Berger

Hallo Dominik!

Indem Du den Code für die Galerie im Artikel eingibst.

Zur Anleitung: Wenn Du am oberen Ende der rechten Spalte auf dieser Seite, dort wo neben der englischen Flagge "English" steht, "Deutsch" auswählst, dann steht Dir die Anleitung auch auf Deutsch zur Verfügung. :)

Gruß
Andreas

Positioning and text
92 Donnerstag, den 24. November 2011 um 13:46 Uhr
Danny

Hi Guy,
the gallery works fine and was setup within a few minutes. But now I have one essential (for me) question: Ist it possible (and if yes how does it work) to position the gallery left and let the text of an article flew besides it like it is in Word for Example?

Thanks in advice
Danny

@Danny
Dienstag, den 29. November 2011 um 22:37 Uhr
A. Berger

Hallo Danny!

Da das Plugin extrem auf absolute Positionierung setzt und nahezu das gesamte CSS dynamisch erzeugt, hat es kein eigenes Stylesheet. Kompliziert sollte es aber trotzdem nicht sein, dann wenn die Galerie in einer Liste angezeigt wird und Du weißt, dass sie mittels DIV-Containern aufgebaut ist, dann kannst Du auf den DIV-Container innerhalb des Listenpunktes zugreifen:
ul li div {} ... entweder die Liste oder der Listenpunkt sind in Deinem Template sicher über eine Klasse oder eine Identity erreichbar/definierbar.

Gruß
Andreas

erledigt
Dienstag, den 29. November 2011 um 20:37 Uhr
Danny

Hallo Andreas, sorry...war mein Fehler...man sollte genau hinsehen was man macht...align_ left und float=left sind natürlich was anderes...hat geklappt. Jetzt noch die abschließende Frage: Kann ich margin irgendwie einstellen, weil bei mir steht die Gallery in einer Aufzählung und die Aufzählungspunkte sind teilweise hinter der Gallery....

@Danny
Montag, den 28. November 2011 um 20:28 Uhr
A. Berger

Hallo Danny!

Dann vertragen sich die Einstellungen irgendwie nicht mit Deinem Template. Gib einfach Bescheid, wenn der Wartungsmodus beendet ist, ich schau' es mir dann gerne an.

Gruß
Andreas

Float left geht nicht
Sonntag, den 27. November 2011 um 22:33 Uhr
Danny

Hallo Andreas, die Gallery steht schon auf "float left", trotzdem gehts nicht? Es erscheint erst die Gallery, dann untendrunter der Text. Leider kann ichs Dir nich zeigen, da die Seite momentan im Wartungsmodus ist....

@Danny
Donnerstag, den 24. November 2011 um 22:43 Uhr
A. Berger

Hi Danny!

Give it a try and set the parameter "Align the Gallery" to "float left".

Best regards
Andreas

a doubt
91 Dienstag, den 01. November 2011 um 20:58 Uhr
laura

hello. I'm looking for a gallery that can do this:
I want a gallery that allows me to have the thumbnails in the article and to see the big picture in a module. Can do this some of your galleries?
thanks!

@laura
Mittwoch, den 02. November 2011 um 21:55 Uhr
A. Berger

Hi laura!

No.

Best regards
Andreas

Thumbnail bar
90 Montag, den 24. Oktober 2011 um 23:32 Uhr
Michael

What happens if I want to put say 30 images in my gallery. When I scroll down 6 rows I can no longer see the main image above, and given that the image only displays when you hover over the thumbnail there becomes no way to see the image.


Is there some type of scroll-bar option for the thumbnails, so I could display 2-3 rows and have a button to scroll between thumbnail pages? I can't see an option but perhaps I'm missing something.

@Michael
Mittwoch, den 26. Oktober 2011 um 13:34 Uhr
A. Berger

Hi Michael!

I would either use smaller thumbnails or siwtch to the "Very Simple Image Gallery" (link in the menu at the left), it allows to split the thumbnails into sets of arbitrary size.

Best regards
Andreas

Positioning the Thumbnails
89 Dienstag, den 21. Juni 2011 um 02:40 Uhr
R. Adler

Sorry...I've been searching your documentation but cannot find information on positioning the gallery's Thumbnail images on the left or right of the image, instead of below. How do I put the Thumbnail images on one side of the main gallery image?

Thank you.

@R. Adler
Sonntag, den 26. Juni 2011 um 16:41 Uhr
A. Berger

Hi R. Adler!

First - sorry for the late response.
Second - the CSS gallery does not offer this kind of layout. Maybe you want to have a look at the "Very Simple Image Gallery" (find the link in the menu at the left), it allows to switch the thumbnails left-bottom-right from the configuration panel of the plugin.

Best regards
Andreas

Aligning The Gallery
88 Freitag, den 10. Juni 2011 um 17:51 Uhr
Nicole

Hey there! Great gallery, I love how easy it is. I only had one problem, and that was center aligning(or any aligning, for that matter) in the content area I have it in. I tried with the plugin settings, and I also coded it into the string using 'Gallery|align=1' but it still stays where it is. Not sure if there is another easy way of doing this.

The page in question is: http://www.flawlesshairdesign.ca/gallery.html

Thanks

@Nicole
Montag, den 13. Juni 2011 um 20:59 Uhr
A. Berger

Hi Nicole!

Aligning the gallery works perfect. The problem: the article that contains the gallery is exactly as wide as the content and it is aligned left.
You could temporarily switch to another template to see what I mean.
To solve this problem, you could set a fixed width for the article (stylesheet "tdefaut", selector "table .contentpaneopen").

Best regards
Andreas

Setting maximum numbers of images and auto-refresh
87 Freitag, den 03. Juni 2011 um 03:48 Uhr
Arnd

Hello,

currently i tried to use your plugin for displaying webcam images from a folder which basicly works good but i have two problems:
First it would be great if one could set an maximum number of images to display. Which should be quite easy.
Secondly i am looking for a way to auto refresh the pictures cause the webcam is delivering one image per minute. Any tips on how i could accomplish this?

best regards and thx for this great plugin,
Arnd

@Arnd
Montag, den 06. Juni 2011 um 20:01 Uhr
A. Berger

Hi Arnd!

I'm sorry but the features you want to see are not possible without heavily patching the plugin whereas it would be relatively easy to patch it to show only a fixed amount of images but the possibility to auto-refresh the page would mean to either manipulate the page headers or to break the main intention - relying on CSS only - of the plugin and create some JavaScript or AJAX auto-refresh.

Best regards
Andreas

Deutsch
Panoramic Image Viewer
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 39 Gäste online