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)
@Dylan L.W. van der Braak
67 Dienstag, den 23. Februar 2010 um 21:20 Uhr
A. Berger
Hi Dylan!

I'm sorry but that's not possible because it is the usage of the zIndex that allows to stretch the link holding the main image as background image over the thumbnails whilst still keeping them clickable.

Best regards
Andreas
CSS gallery and z-index
66 Dienstag, den 23. Februar 2010 um 16:43 Uhr
Dylan L.W. van der Braak
Compliments on this plugin. However I fear a problem with my templates. I use z-index intensively to place background layers on top of eachother. My (template) z-indexes are generated dynamically depending on what's loaded and configured in a text-file.

Sorry for the long explanation. My question is: is there a way to use CSS gallery without the z-index in CSS Gallery code?

TIA
Horizontale Linie
65 Sonntag, den 21. Februar 2010 um 11:40 Uhr
Dirk
Hallo,

zunächst einmal: Tolles, schlankes und unkompliziertes Plugin.

Aber wie kann ich die Horizontale Linie, die unter dem Text Eures Beispieles hinterlegt ist, anzeigen. Danke für die Hilfe

Grüße Dirk
@Edi
64 Donnerstag, den 11. Februar 2010 um 18:46 Uhr
A. Berger
Hi Edi!

The code for the third image looks fine, maybe there is a typo in the image file name.
The code for the forth image should start with a "0" as the first parameter because it targets the same gallery (the first one in your article).

If there is no typo in the image file name of the third image, please provide a link to the page, I will have a look at it.

Best regards
Andreas
CSS Gallery plugin captions
63 Donnerstag, den 11. Februar 2010 um 00:52 Uhr
Edi
Hello Andreas,
I am using the CSS Gallery plug in on a website I am working on and what I am experiencing is the following:
I am able to see the caption for two of the images, but unable to see it for the remaining! It is the same code with the only change the file name and the caption itself
Here is how I have the code right now

{becssg}cssgallery{/becssg}

{becssg_c}0|DSCF4002.jpg|| Councillor David Cohen at the Annual Meeting of the Downtown Richmond Hill BIA{/becssg_c}

{becssg_c}0|DSCF4012.jpg||

David Cohen with Downtown Business Founder Councillor Lynn Foster at the Downtown BIA meeting{/becssg_c}

{becssg_c}0|chinesebusiness.jpg|| Richmond Hill Markham Chinese Business Association dinner{/becssg_c}

{becssg_c}2|DSCF4021a.jpg|| Richmond Hill Markham Chinese Business Association dinner{/becssg_c}

It works for the firs and second image but no for the third and fourth.
Are you able to identify why this is happening?
Thanks in advance
Edi
@William
62 Mittwoch, den 03. Februar 2010 um 18:45 Uhr
A. Berger
Hi William!

I found only 16 projects on your portfolio page, but every single one of them worked fine for me (using Chrome 4.0.249.78 on Vista).

Did you change anything?

Best regards
Andreas
Thumbnails show up but do not change large picture when hovering over
61 Mittwoch, den 03. Februar 2010 um 01:27 Uhr
William
Well the subject says pretty much everything. I am using this plugin on my website www.wabashstudio.com on my portfolio page and I have setup everything correctly as far as I know. I have a total of 17 different designs posted on my site that I am using this plugin to display different images of each one. I made folders for each design inside of the stories folder and used the correct code in the article. For some reason with only 6 out of the 17 the 3rd thumbnail shows but when hovering over it does not change the larger display picture. This is when using Google Chrome. I switched over to Firefox and tried those certain ones and everything worked fine. I am just trying to figure out why they will not switch correctly when viewing with Google Chrome.

Thanks for the help ahead of time!
@Julien
60 Freitag, den 29. Januar 2010 um 18:32 Uhr
A. Berger
Hi Julien!

No, the main image you see is the background image of the links, tied to the thumbnails. This way the gallery works without JavaScript. To get this up and running, the main image and the thumbs are positioned absolute within the main div. No real chance to move them around with CSS.
If you need a gallery that allows such tricks, you might want to have a look at the "Very Simple Image Gallery" (menu at the left).

Best regards
Andreas
thumbs in one div full image in an other div
59 Freitag, den 29. Januar 2010 um 11:55 Uhr
Julien
Hi !
Is there a way to have the thumbs in one specific div and put the full image in an other div ?

Thanks,
Julien
@Stef
58 Sonntag, den 24. Januar 2010 um 20:53 Uhr
A. Berger
Hi Stef!

The gallery depends on generating most of the CSS settings on the fly because what you see as the main image is the background of a link, tied to the respective thumbnail. This leads to a lot of absolute positioning.
Anyway, to integrate a static stylesheet, in the file /plugins/content/becssg.php you find - starting at line 176 - a prepared switch. Remove the comments (//) and change the condition from "smaller or equal" to "larger or equal". Having done this, the plugin will load the stylesheet /plugins/content/plugin_becssg/becssg.css into the head of the page whenever the page contains a CSS Gallery.

Best regards
Andreas