Startseite Joomla CSS Gallery - Anleitung Plugin Code
2010-09-09
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 Pfad zum Ordner, also "/images/stories/" 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/" angegeben, also zum Beispiel 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

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

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.


Das wars! Viel Spass mit dem Plugin!


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.

Zuletzt aktualisiert am Samstag, den 27. Februar 2010 um 16:25 Uhr
 
Kommentare (107)
Images shows when hovering thumbnail
77 Donnerstag, den 11. März 2010 um 13:51 Uhr
Petar
It would be great if there was option like fixstart but image would be shown only while you're hovering over thumbnail and not the oposite with fixstart option turned off, it would be really great actually
@Petar
Freitag, den 12. März 2010 um 20:03 Uhr
Andreas Berger

Hi Petar!
You mean a setting where the main image in general is shown only when hovering the thumbs? If so - no, there is no such setting (and the space needed to show the main image is reserved in any case). To achieve this behavior anyway you would have to either patch the plugin or include custom CSS settings that target the specific gallery in your templates stylesheet.

Best regards
Andreas

@David Steele
76 Mittwoch, den 10. März 2010 um 22:38 Uhr
A. Berger
Hi David!

"To access the private area of this site, please log in." ... so there is not a lot I can tell you about the page

Best regards
Andreas
A great plug-in
75 Mittwoch, den 10. März 2010 um 15:35 Uhr
David Steel
I like this. It is clean, simple and works really well with the minimum of fuss and set up. So far, I have only a few minor defects that I need some help with:

1) I use captions but find that the descenders on characters like 'y' and 'g' are clipped when viewed in IE7 and IE8 (but not Firefox) - see my site at http://www.eaf.org.uk/index.php/test/championship-gallery.html and click on one of the tabs at the top to show a gallery.

2) The main image disappears if I mouse over it - can I stop this?

3) The first image caption text appears to be black while rollovers on the thumbnails show captions in grey. Is this a configuration setting somewhere?

Also, as an enhancement for the future, it would be nice if a chosen image stayed on screen if the thumbnail is clicked and the mouse moved away from the thumbnail.

Thanks

David
@Michael
74 Sonntag, den 07. März 2010 um 21:23 Uhr
A. Berger
Hi Michael!

Not really - all I can do is using HTML and HTML attributes the way they are meant to be used. This does not prevent some browsers (by default or by user setting) from handling these attributes a way they are not meant because the developer of the program thinks this is the right way or because this is the way your visitor is used to surf the web. You will never have full control over the user experience on your site - my best tip: live with it. ;)

Best regards
Andreas
Links opening tabs
73 Sonntag, den 07. März 2010 um 19:07 Uhr
Michael
Brilliant plug-in - thanks!

I have set it up with internal links in the thumbnails (using _self). When I use these links, Firefox opens a new tab.

Is there any way of forcing the new page to appear in the same tab, please?
@Cinesinho
72 Samstag, den 06. März 2010 um 19:47 Uhr
A. Berger
Hi Cinesinho!

No, that's not possible with this gallery because the main image you see is the background image of the link, attached to the thumb you are hovering with your mouse. If you need this functionality, you might want to have a look at the "Very Simple Image Gallery" (menu at the left), it changes the images onClick.

Best regards
Andreas
Fix Picture
71 Freitag, den 05. März 2010 um 09:20 Uhr
Cinesinho
Hi, I Have a problem with CSS Gallery, because when I move the mouse over a thumb picture, the big picture change, but after the click, when I move the mouse out of the thumb, the big picture charge again.
Can I fix the showed picture with a click?
Z Index
70 Freitag, den 26. Februar 2010 um 06:29 Uhr
Steve Kennedy-Williams
Not really needing higher z index. Just read another's issues and had the idea.

I'm getting back into joomla after a few years, and was exploring what extensions are available. Nice work.

Steve
@Steve Kennedy-Williams
69 Donnerstag, den 25. Februar 2010 um 20:26 Uhr
A. Berger
Hi Steve!

Using zIndex values about 100 will solve the problem for one user (you) and cause problems for hundreds of useres because it breaks extensions like expandable menus, that depend on the zIndex to overlap the content of the page.

Making the zIndex available via the configuration panel is an option and I will think about it. Meanwhile you might want to consider using the Very Simple Image Gallery (menu at the left), it works without any fixed zIndex-setting and is controlable via the plugins stylesheet (/plugins/content/plugin_vsig/vsig.css).

Best regards
Andreas
z-index hack
68 Donnerstag, den 25. Februar 2010 um 09:36 Uhr
Steve Kennedy-Williams
Couldn't you offset the gallery's starting z-index?

If you for example start at 100, then you have 99 layers available below it. Should be enough.
How about a plugin parameter to set starting z-index?