Startseite Joomla CSS Gallery - Anleitung Plugin Code
2010-08-01
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)
Image names
107 Mittwoch, den 21. Juli 2010 um 08:52 Uhr
Marcell

Hello,

Is there an easy way to set the plugin not to show anything (image name, text etc.) when the pointer is moved over a picture or the thumbnail? I use one gallery per page, and my code is "{*becssg}Imagedir/Imagesubdir{/becssg}"

Ty!

@Marcell
Mittwoch, den 21. Juli 2010 um 14:48 Uhr
A. Berger

Hi Marcell!

Use an empty default caption (refer to section captions) in addition to the initial code:

{*becssg}Imagedir/Imagesubdir{/becssg}
{*becssg_c}0|||{/becssg_c} ... without the asterisk

Best regards
Andreas

Captions not working on more than one image
106 Dienstag, den 20. Juli 2010 um 15:52 Uhr
Mark McElhone

Hi Andreas,

great product although I am having problems with getting different captions appearing on different images. I call the gallery using
{*becssg}cssgallery{/becssg} - works fine

to add captions to all the images within the gallery I use
{*becssg_c}0||Default Title|Fault Text{/becssg_c} - works fine

To add a caption to just one image I use
{*becssg_c}0|pic01.jpg|Default Title|Default Text{/becssg_c} - works fine

The problem appears when I try to add different captions to different images. For this I would use:

{*becssg_c}0|pic01.jpg|Pic 01 Title|Pic 01 Text{/becssg_c}
{*becssg_c}0|pic02.jpg|Pic 02 Title|Pic 02 Text{/becssg_c}

When I put this in and hit save/apply I get an error like this:


Pasted Graphic.tiff

@Mark McElhone
Mittwoch, den 21. Juli 2010 um 15:11 Uhr
A. Berger

Hi Mark!

The comment extension does not allow to attach images, so - could you provide a link to the page please?

Best regards
Andreas

Anklicken eines Bildes
105 Dienstag, den 06. Juli 2010 um 19:28 Uhr
Thomas

Hallo,

zunächsteinmal danke für die Gallerie, genau so puristisch, wie man es braucht. Ich hätte allerdings noch eine Anmerkung. Kann man es denn erreichen, dass beim Anklicken eines Thumbnails automatisch ein I-Frame geöffnet würde? Das wäre klasse...

liebe Grüsse
Thomas

@Thomas
Dienstag, den 06. Juli 2010 um 21:22 Uhr
A. Berger

Hallo Thomas!

Nein, denn mir ist keine Möglichkeit bekannt, ohne JavaScript über einen Link der Seite einen Iframe hinzuzufügen oder den Inhalt eines bestehenden zu manipulieren.

Gruß
Andreas

Not working?
104 Freitag, den 25. Juni 2010 um 08:30 Uhr
Angela

First of all: thank you for the download.

Everything went fine, till I got to the code. I've inserted the code, but I don't see my gallery at the site, only the code. What went wrong?
I don't have the folders 'Image' and ' Thumbnails' either.
http://www.gothsternokke.nl/angela/index.php?option=com_content&view=article&id=18&Itemid=18

Thanks for answering in advance.

@Angela
Montag, den 28. Juni 2010 um 20:00 Uhr
A. Berger

Hi Angela!

The Errors on your page indicate that the plugin has not the necessary rights to create directories on your server - i.e. there is a problem with the directory permissions.
To solve this problem, first check the current directory permissions: Joomla! backend > Help > System Info > Directory permissions. Everything should be green (writable) there. If it isn't - please change the permission (e.g. using an ftp-client).
If everything looks fine and the error persists, check the settings you used to configure the Joomla! FTP layer: Joomla! backend > Site > Global Configuration > Server > FTP. Maybe the easiest way is to just deactivate it. If this doesn't help or leads to other problems, maybe you want to have a look at this Howto at forum.joomla.org in the article of the user Degira:


http://forum.joomla.org/viewtopic.php?f=431&t=314112&p=1382452#p1382452

Best regards
Andreas

Modules and articles
103 Montag, den 21. Juni 2010 um 20:22 Uhr
A.Glass

Hello Andreas

I'm having some trouble here. I have successfully integrated the slide show in my article:
http://www.cooltourschile.com/index.php?option=com_content&view=article&id=153%3Ahuilo-huilo-4-days-3-nights-&catid=99%3Ahuilo-huiolo-4-days--3-nights&Itemid=222〈=en#g_153_0

However, I would like the module leading to the article to pic and show one image from the slide
http://www.cooltourschile.com/index.php?option=com_content&view=article&id=216%3Ahuilo-huilo&catid=127%3Ahuilo-huilo&Itemid=221〈=en
Is this possible?


Best regards
A.Glass


 

thanks
Mittwoch, den 30. Juni 2010 um 02:11 Uhr
aglass

that does the thing!

@A.Glass
Mittwoch, den 23. Juni 2010 um 20:32 Uhr
A. Berger

Hi A.Glass!

It is not possible as a feature of the plugin but it is possible by using an article intro, you don't show within the article itself. Have a look at the article: "Joomla's hidden feature - hiding intro text"

http://www.theartofjoomla.com/home/5-commentary/81-joomlas-hidden-feature-hiding-intro-text.html

Just write an intro with one static image and hide this intro in your article.

Best regards
Andreas

more than one gallery
102 Sonntag, den 13. Juni 2010 um 11:23 Uhr
fatih

how can i use more than one gallery?

@fatih
Montag, den 14. Juni 2010 um 20:08 Uhr
A. Berger

Hi fatih!

1 gallery: {*becssg}folder{/becssg}

2 galleries: {*becssg}folder{/becssg}{*becssg}folder{/becssg}

3 galleries: {*becssg}folder1{/becssg} arbitrary text {*becssg}foldera{/becssg} {*becssg}folder1{/becssg}

... and so on.

Use as many galleries as you want in one article and use as many galleries as you want in as many articles as you want - with as many galleries as you want in every single article :)

Please note: Use the code without the asterisks, I insert them here to prevent the code from getting executed.

Best regards
Andreas

Strange Pixel/Dot
101 Freitag, den 11. Juni 2010 um 21:01 Uhr
db

Why does this strange pixel/dot appear on the top left-hand corner of my website whenever I enter in the code for the CSS Gallery to appear? When I remove the code, the pixel/dot disappears. This has never happened on my other sites. How do I get rid of this? I'd really like to continue to use CSS Gallery.

See the page with the strange pixel/dot on the top left-hand corner here: http://realtimesupport.com/dvd-authoring

Thanks.

@db
Dienstag, den 15. Juni 2010 um 20:28 Uhr
A. Berger

Hi Roy!

The plugin uses a little trick to preload the images. It places them in a 1x1 pixel div, and moves this div out of sight using an absolute position of -100/-100. In your case, the configuration of the template tells the plugin that the zero-point is not the real one at the top left of the page but the top left of the content area. This moves the preloads into sight.

I just uploaded an update that moves these images from -100/-100 to -1000/-1000. This should solve the problem. Update, clear your cache and give it a try.

Best regards
Andreas

css
100 Sonntag, den 06. Juni 2010 um 06:13 Uhr
Martin

Hi,
the gallery works like a charm, but I need to modify the way how the captions are shown. I need to change the height, color, margins and size of the titles/captions. I did a 'preview' with Firebug, so the changes work well for me. The problem is - I cannot find particular css file in order to modify it. Where it is hidden...?
And the second issue: every thumbnail in my gallery has a link embed (link to my homepage) even if I set the value in plugin control page to "no use links".  How and where I can change it?


Thanks for any help!

@Martin
Sonntag, den 06. Juni 2010 um 14:10 Uhr
A. Berger

Hi Martin!

The CSS Gallery makes heavy use of absolute positioning and creates most of the CSS settings on the fly. Therefore it comes without an external stylesheet. Anyway, if you want to use one, save it as /plugins/content/plugin_becssg/becssg.css and enable it by removing the comments that disable this function in the file /plugins/content/becssg.php. Replace "/*" with "//" in line 176 and remove "*/" in line 180.

About the links, the thumbnails always link to something. They are links and the whole gallery is based on the fact that links allow to work with pseudo CSS classes (hover) crossbrowser. Anyway, if you disable the feature "Links" or just don't set links, the thumbnails link to an anchor at the top of the main image. If they link to your homepage instead, something is going wrong. If you provide a link to the page, I will have a look at it.

In addition: If you depend on modifying the plugin, maybe you would want to have a look at my other gallery plugin, the "Very Simple Image Gallery" (menu at the left), it is more flexible and - in most cases - easier to modify.

Best regards
Andreas

Caption Problem ... solved!
99 Dienstag, den 25. Mai 2010 um 01:53 Uhr
Bulldog

Hi Andreas,

Thanks for the feedback.
My Caption problem is solved.  As you suggested, I simplified the image names and I also noticed that my image folder was in 'stories' but outside the cssgallery folder.
Maybe that caused a problem?

Either way. it works!!

@Bulldog
Dienstag, den 25. Mai 2010 um 20:42 Uhr
A. Berger

Hi Bulldog!

Glad to hear it works!
About your second suggestion: No, you don't have to place the images in anfolder "cssgallery", that's just the folder I used in my sample. If you change the image root folder (/plugins/content/becssg.php -> line 33), you may place them even outside /images/stories as long as you stay within the Joomla! root directory.

Best regards
Andreas

Captions Problem
98 Montag, den 24. Mai 2010 um 06:15 Uhr
Bulldog

I love the plugin, perfect for what I want.


The problem I am having is that I cannot get the Titles and captions to appear at all!


I am new to Joomla and am using a testing site to experiment with.


I only have one gallery, and although the pictures appear, the Title and Text do not.  What am I doing wrong.


This is what I have added to my article page in the back end


{*becssg}annasets{/becssg}
{*becssg_c}0|annas_photos_013.jpg|English|Pretty{/becssg_c}
{*becssg_c}0|annas_photos_029.jpg|Herbs|girlie{/becssg_c}
{*becssg_c}0|fairy_tea_set.jpg|Pretty Pink|Pretty girlie tea set with flowery motifs{/becssg_c}
{*becssg_c}0|partea_time_2_022.jpg|Lovely lovely|Pretty girlie tea set with flowery motifs{/becssg_c}


{*becssg_c}0|partea_time_2_032.jpg|Purple Haze|Pretty girlie tea set with flowery motifs{/becssg_c}
{*becssg_c}0|partea_time_2_033.jpg|Nice Set|Pretty girlie tea set with flowery motifs{/becssg_c}
{*becssg_c}0|partea_time_2_037.jpg|Patea|Pretty girlie tea set with flowery motifs{/becssg_c}
{*becssg_c}0|partea_time_2_043.jpg|Love|Pretty girlie tea set with flowery motifs{/becssg_c}


The link to the test page is:


http://stonehenge.cloudaccess.net/joomla-overview/what-is-new-in-1-5.html#g_22_0


Anyone help?


 

@Bulldog
Montag, den 24. Mai 2010 um 06:45 Uhr
A. Berger

Hi Bulldog!

Yes, help yourself and omit over-complicated image file names. :)
Have a look at your code and compare it to the image file names. Check the usage of underlines and blanks.

Best regards
Andreas

PS.: I added the asterisks in your post to prevent the code from getting executed here.

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