Startseite Joomla CSS Gallery - Anleitung Plugin Code
Hauptmenü
Meist gelesen
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

Wenn Sie die Erweiterungen und Scripts auf diesen Seiten nützlich finden, freue ich mich über Ihre Unterstützung. Danke!

Betrag: 

Neueste Beiträge
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
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 (22)
danke für das Plugin
22 Montag, den 07. Mai 2012 um 09:05 Uhr
Ropeworker

Hallo zusammen,

ich habe das Plugin in meine Webseite www.ropeworker.de  eingebunden und es funktioniert einwandfrei.  mit einer Diashowfunktion wäre es mir zwar noch lieber aber das muss nicht sein

Danke

Help with gallery links on images
21 Sonntag, den 29. April 2012 um 18:36 Uhr
Hristo

Hello, please help me on the following page http://archp-bg.com/index.php/component/categoryblock/?view=article&Itemid=0&id=340 what i need to do NOT to have links on the images themselves. This is switched off from the backend but still working? Could you please help? Thank you!

@Hristo
Dienstag, den 01. Mai 2012 um 15:12 Uhr
A. Berger

Hi Hristo!

The plugin is not creating link to the image. What happens is the following:

The plugin uses links and their pseudo CSS classes to provide the functionality of the gallery (without JavaScript).
If the feature "links" - that allows to set specific targets - for these links is not used, the plugin sets an anchor to the top of the gallery. The anchor is a relativ link, that uses the current URL. Or to be precise - it uses the current URL if no base-href is set. And this is where the trouble starts: Joomla! usually uses the current page for the base-href but your page uses "archp-bg.com/index.php/component/categoryblock/" for the base-href which is different from the current URL. The result: The in-page-anchor becomes a link to another page.

The solution would (probably) be to let Joomla! create the base-href or use SEF-URLs.

Best regards
Andreas

Änderung der Funktion
20 Montag, den 16. April 2012 um 17:57 Uhr
Richard

Hallo,

das Plugin hat ja derart viele Funktionen, das ich den Überblick etwas verloren habe. Wäre es auch möglich, dass ich z.B. acht Vorschaubilder im Artikel anzeigen lassen kann, das Hauptbild wegfällt und nach Klick auf ein Vorschaubild ein großes Bild angezeigt wird, z.B. durch ein Popup, oder ähnliches?

Ich hoffe man kann mir noch folgen!

@Richard
Montag, den 16. April 2012 um 19:58 Uhr
A. Berger

Hallo Richard!

Nein, das ist nicht möglich.

Gruß
Andreas

code überschreiben geht nicht
19 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
18 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
17 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
16 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
15 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
14 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
13 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

Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135
Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 54 Gäste online