Startseite Joomla Very Simple Image Gallery - Anleitung Plugin Code
Very Simple Image Gallery Plugin Verwendung - Code
Geschrieben von: Andreas Berger   
Sonntag, den 21. Juni 2009 um 06:35 Uhr

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

Das "Very Simple Image 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 im einfachsten Fall aus dem Aufruf selbst {*vsig}{/vsig*} (ohne die Sterne) und enthält den Namen des Ordners, in dem wir gerade die Bilder abgelegt haben. Der im Backend festgelegte Pfad zum Ordner, also per Default "/images/stories/" in Joomla!1.5 bzw. "/images/" in Joomla!1.6/1.7 wird vom Plugin automatisch ergänzt und ist nicht mit anzugeben.

Ein Aufruf sieht also zum Beispiel so aus

{*vsig}verysimple{/vsig*} - ohne die Sterne


Um einen Ordner in einem Unterordner zu verwenden, wird sinngemäß der Pfad unterhalb des im Backend festgelegten Pfades angegeben, also zum Beispiel für den Ordner "/images/stories/ordner/unterordner" in Joomla!1.5:

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

An sich war es das und die Galerie ist einsatzfertig.




B.) Parameter Overrides

Beginnend mit Version 1.3 bietet die "Very Simple Image Gallery" die Möglichkeit, nahezu alle im Konfigurationspanel des Plugins gesetzten Werte direkt im Aufruf zu überschreiben. Damit können verschiedenst gestaltete Galerien erstellt werden. Hat man zum Beispiel voreingestellt, dass die Thumbnails unten angezeigt werden soll, dann kann man sie im Aufruf auch nach rechts verschieben. Man kann verschieden breite und hohe Galerien erstellen, mit verschieden breiten und hohen Thumbnails, etc. etc.

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 - Breite der gesamten Galerie in Pixel (ganze Zahl) z.B.: 600

height - maximale Höhe der Bilder in Pixel; mögliche Werte: leer (gesamte Breite ausnützen), (ganze Zahl) z.B.: 600

imquality - Qualität der Bilder in Prozent (ganze Zahl von 1-100) z.B.: 90

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

twidth - Breite der Thumbnails in Pixel (ganze Zahl) z.B.: 80

theight - Höhe der Thumbnails in Pixel (ganze Zahl) z.B.: 60

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

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

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

right - Lage der Thumbnails; mögliche Werte: 0 (unten), 1 (rechts), 2 (unten und am rechten Bildrand ausgerichtet), 3 (links)

area - ab Version 1.6.5 nicht mehr in Verwendung!

cols - Anzahl Spalten Thumbnails rechts/links vom Hauptbild (ganze Zahl) z.B.: 2

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

sets - Zahl der Thumbnails je Set

setstxt - Bezeichnung der Sets

cfwd - Wert für das Kontrollelement "Vor"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons (siehe Plugin Howto)

cbwd - Wert für das Kontrollelement "Zurück"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons (siehe Plugin Howto)

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

inout - Position der Captions; mögliche Werte: 0 (unter dem Hauptbild), 1 (überblendet über das Hauptbild)

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

autolink - automatisch Links zum Originalbild erzeugen; mögliche Werte: 0 (nein), 1 (ja)

script - soll JavaScript verwendet werden; mögliche Werte: 0 (nein), 1 (ja)

hover - Bildwechsel onhover; mögliche Werte: 0 (nein), 1 (ja)

preload - sollen Bilder und Thumbnails vorgeladen werden; mögliche Werte: 0 (nein), 1 (ja)

tooltip - soll der Dateiname für ALT/TITLE verwendet werden; mögliche Werte: 0 (nein), 1 (ja)

folderid - Name des Ordner als Identity des obersten DIV-containers; mögliche Werte: 0 (nein), 1 (ja)


Beispiele:

{*vsig}verysimple|width=600|right=2{/vsig*} - ohne die Sterne
Ungeachtet der Voreinstellungen wird diese Galerie mit einer Breite von 600 Pixel (width=600) angezeigt. Die Thumbnails sind unter dem Hauptbild und werden mit diesem rechtsbündig ausgerichtet (right=2)

{*vsig}verysimple|width=600|right=1|cols=2{/vsig*} - ohne die Sterne
Breite 600 Pixel (width=600), Thumbnails rechts (right=1) in zwei Spalten (cols=2)

{*vsig}verysimple|twidth=80|theight=60|space=3|quality=80{/vsig*} - ohne die Sterne
Die Thumbnails sind 80 Pixel breit (twidth=80), 60 Pixel hoch (theight=60), zwischen den Thumbnails sind jeweils 3 Pixel (space=3) und sie werden mit 80% der möglichen Qualität erzeugt (quality=80)

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:

{*vsig_c}Galerienummer|Bilddatei|Titel|Text{/vsig_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:

{*vsig_c}0||meinTitel|meinText{/vsig_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 Bild keine Angabe, dann wird eben nichts angezeigt.

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

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

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

Hinweise:
Wer keine Captions anzeigen möchte, der kann Sie nutzen, um über die Titelzeile der Captions die Attribute "alt" und "title" der Bilder zu setzen. Findet das Plugin für ein Bild einen Caption-Call, dann wird die Titelzeile auch dann als ALT/TITLE verwendet, wenn Captions nicht aktiviert sind.

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 selektiv verlinken, dann kommt zusätzlich noch eine dritte Form des Aufrufs zum Einsatz:

{*vsig_l}Galerienummer|Bilddatei|Verweisziel|Titel|target{/vsig_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:

{*vsig_l}0||http://www.bretteleben.de|bretteleben.de|_blank{/vsig_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.

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

{*vsig_l}0|bild02.png|||{/vsig_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.

{*vsig_l}0|bilda.jpg|http://www.meine.domain.com/meinTollesProdukt1|tollesProdukt1|_self{/vsig_l*} - ohne die Sterne
{*vsig_l}0|bildb.jpg|http://www.meine.domain.com/meinTollesProdukt2|tollesProdukt2|_self{/vsig_l*} - ohne die Sterne
{*vsig_l}0|bildc.jpg|http://www.meine.domain.com/meinTollesProdukt3|tollesProdukt3|_self{/vsig_l*} - ohne die Sterne
{*vsig_l}0|bildd.jpg|http://www.meine.domain.com/meinTollesProdukt4|tollesProdukt4|_self{/vsig_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 Donnerstag, den 20. Oktober 2011 um 21:20 Uhr
 
Kommentare (33)
re: removing image borders
33 Mittwoch, den 09. Mai 2012 um 16:43 Uhr
Damian

never mind, I found the answer on another webpage and it worked (btw, always clear joomla backend cache).  Thx allot, it's an awesome plugin!

How to use caption
32 Freitag, den 04. Mai 2012 um 17:30 Uhr
Aldy

Hi,

I'm still confuse with this:

C.) Captions
Captions and text have there own call. It´s:
{*vsig_c}gallery-number|imagefile|caption|text{/vsig_c*} - without the asterisks
Gallery-number:
The galleries within one content item are numbered automatically by the plugin according their appearance in the article starting with 0.
This setting is obligatory.


Can you explain the above message? in this tag there is no tag for location of the images, how I should put all the images?

Thanks and look forward to hearing from you soon.

Best,
Aldy

@Aldy
Freitag, den 04. Mai 2012 um 22:21 Uhr
A. Berger

Hi Aldy!

A sample:

A)
Let's assume your first folder with images is (in Joomla!2.5) /images/mypics and it contains the following files:
"IMG_PC 201205032013.jpg", "IMG_PC 201205032014.jpg", "IMG_PC 201205032015.jpg", "IMG_PC 201205032016.jpg", "IMG_PC 201205032017.jpg", "IMG_PC 201205032018.jpg".

First, please rename the images to 01.jpg, 02.jpg, 03.jpg, 04.jpg, 05.jpg and 06.jpg. (In a perfect world you will do this before uploading them and whilst scaling them down to a reasonable size :))

Why renaming? Because it creates a nicer source code on your pages, it is a good opportunity to sort them and - last but most important - short file names without any special signs make your life a lot easier on a web server. Just believe me. :)

B)
Let's further assume the second folder with images /images/myotherpics contains the files a.jpg, b.jpg. c.jpg

C)
Now to your article. It may look like:
+++++++++++++++++++++++++++++
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {*vsig}mypics{/vsig*}sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.{*vsig}myotherpics{/vsig*}
+++++++++++++++++++++++++++++
(code without asterisks)

You see, we have 2 galleries. Now we want to add captions to both of them. Please note: It is of absolutely no importance where in your article you place the following code, it is of absolutely no importance how it is sorted and if it is coherent or scattered over the article.

We start with a default caption for the first gallery. "First" means, the first gallery appearing in your article. This is - take a quick look - the gallery showing the images of the folder "mypics". Because it is the first gallery, the first parameter is "0".

{*vsig_c}0||default title|default text{/vsig_c*} (code without asterisks)

This caption (no image specified) gets applied to every image in the first gallery, that has no specific caption set. And this is what we will do now. We will set specific captions for two of the images in the first gallery:

{*vsig_c}0|01.jpg|title for image 01|text for image 01{/vsig_c*}
{*vsig_c}0|04.jpg|title for image 04|text for image 04{/vsig_c*} (code without asterisks)

You see, the first parameter points to the first gallery in the current article, the second parameter points to the image file.

Next, we will set specific captions for the images in the second gallery appearing in your article, the gallery showing the images from the folder "myotherpics". The difference to the code for the first gallery is the first parameter. It now is "1" (0,1,2,3,4,5... and so on).

{*vsig_c}1|a.jpg|title only for image a|{/vsig_c*}
{*vsig_c}1|b.jpg||text only for image b{/vsig_c*}
{*vsig_c}1|c.jpg|title for image c|text for image c{/vsig_c*} (code without asterisks)

Now, let us collect our caption-code:
{*vsig_c}0|01.jpg|title for image 01|text for image 01{/vsig_c*}
{*vsig_c}0|04.jpg|title for image 04|text for image 04{/vsig_c*}
{*vsig_c}1|a.jpg|title only for image a|{/vsig_c*}
{*vsig_c}1|b.jpg||text only for image b{/vsig_c*}
{*vsig_c}1|c.jpg|title for image c|text for image c{/vsig_c*} (code without asterisks)

We now have set captions for two different galleries in one article. And to repeat myself - it is of absolutely no importance where in your article you put this code. Maybe you prefer to put it to the end to have it all together or maybe you want to add the code of captions and links to the respective gallery ... it works!

And the best of all: If you are using Joom!Fish (as soon as it gets released for J!2.5) or FaLang, you can translate your captions with your article.

Best regards
Andreas

2 big images
31 Dienstag, den 01. Mai 2012 um 22:14 Uhr
Anne

Hi,

is it possible to show two big images side by side? (i.e. a house before and after renovation)

Ideas appreciated. thanks Anne

@Anne
Mittwoch, den 02. Mai 2012 um 20:32 Uhr
A. Berger

Hi Anne!

No, such a layout is out of the scope of this plugin, but I would check extensions.joomla.org because if I remember right, I once have seen such a "before-after" extension there.

Best regards
Andreas

Is't possible to add label or caption on the thumbnails?
30 Freitag, den 27. April 2012 um 11:17 Uhr
Adrian

This plugin  is great and very helpful.
May I ask if is't possible to add label or caption on the thumbnail aside from the large image?
Thanks.

@Adrian
Dienstag, den 01. Mai 2012 um 15:48 Uhr
A. Berger

Hi Adrian!

Depends on what you want to achieve. Captions blended over the thumbnail or shown below the thumbnail (like the main image) are not part of the plugin, but it uses the title lines of captions (or the title line of links), set for the main images for alt and title-tag. This means that they show up on mouse over.
In addition, if you are not going to use the feature "captions" for the main images, you can specify the captions - and turn off the feature in the backend. In this case, the title line will although get used for alt/title.

Best regards
Andreas

Standalone Gallery
29 Sonntag, den 22. April 2012 um 03:47 Uhr
Rudolfo

Great plugin i found.. thx to the builder.

How to show this gallery as stand alone  gallery ?
i mean when we click some menu like "galerry". this Gallery will shows full like other Gallery Component ?

any body can help me pls ?

@Rudolfo
Sonntag, den 22. April 2012 um 09:53 Uhr
A. Berger

Hi Rudolfo!

Joomla! knows three types of extensions: Component, Module and Plugin.
A component creates the main content of a page.
A module creates the content of a special place inside a page (aka "module position").
A plugin modifies the content of a page.

The "Very Simple Image Gallery" is a plugin. To be precise, it is a content plugin.
This means, it is developed to modify the main content by replacing a line of code with an image gallery.
There is no functionality to create menu-items.

This further means, what you are looking for is - as you write yourself - not a gallery plugin but a gallery component.

Maybe you want to check extensions.joomla.org for an alternative. In this directory components are marked with "C" (green button), modules with "M" (red button) and plugins with "P" (purple button). In your case, green is the color to go for. :)

Best regards
Andreas

Adding Captions
28 Sonntag, den 15. April 2012 um 20:53 Uhr
Penn

hi there, great plug-in, been using it for quite a few years now

However, this is the first time I have decided to try and put captions on the photos themselves.  Unfortunately I'm having a few problems, the instructions don't state where the extra code needs to go.  As you know, the code for adding a gallery on the page, in my case {*vsig}natural{/vsig*}. I want to add a caption on each photo.  Let's say I want to put Natural Pond under the first photo, what code would I use, and whereabouts would I place it, on the article page underneath the existing code?

Here is the website in question
www.aquaticanswers.co.uk/natural-ponds

@Penn
Montag, den 16. April 2012 um 20:11 Uhr
A. Berger

Hi Penn!

The code for captions and/or links is used in the article like the code for the gallery. Sample:

{*vsig}natural{/vsig*}
{*vsig_c}0|natural_pond_1.jpg|1th title|1th text|{/vsig_c*}
{*vsig_c}0|natural_pond_2.jpg|2nd title|2nd text|{/vsig_c*}
{*vsig_c}0|natural_pond_3.jpg|3rd title|3rd text|{/vsig_c*} ... without the asterisks


The first parameter (0) targets the 1th gallery in the current article. This means, the captions for a second gallery in the same article would start with {*vsig_c}1|...
It does not matter if the captions are placed before or after the code for the gallery, they are collected by the plugin separately and attached to the gallery according the 1th parameter. If using more galleries in 1 article, you may even mix the lines, the plugin will sort them for you.

Best regards
Andreas

Thanks
27 Dienstag, den 17. Januar 2012 um 16:42 Uhr
Thomas B.

Thanks for your development. I was still weeks looking for such a good plugin.


 

customization
26 Mittwoch, den 14. Dezember 2011 um 17:45 Uhr
Cesar Labadia

Hi, congratulations for all your plugins.

It's possible the thumbnails appear darker when mouse is out and lighter when mouse is over the thumbnail ?

Thanks

@Cesar Labadia
Mittwoch, den 14. Dezember 2011 um 19:53 Uhr
A. Berger

Hi Cesar!

I haven't tried to modify the CSS this way myself up till now but if you want to give it a try, the stylesheet of the plugin is /plugins/content/plugin_vsig/vsig.css (Joomla!1.5).

Best regards
Andreas

capptions and links
25 Mittwoch, den 07. Dezember 2011 um 20:37 Uhr
Branko

Hi there,

very nice extension. Please let me know if this would be possible to set:
I am using plugin code for captions and for links. I would like on mouse over a thumb to see caption as tooltip. When mouse over a large image I would to have text I set in link code as a tooltip. Is this doable?

thanks

@Branko
Donnerstag, den 08. Dezember 2011 um 08:39 Uhr
A. Berger

Hi Branko!

No, the tooltips for thumbnails and images are always set to the same values.

Best regards
Andreas

filtering
24 Dienstag, den 06. Dezember 2011 um 23:00 Uhr
ray

Great Plugin

I use an application that allows user to upload there pictures. It creates thumbnails. Is there a way i can filter my images. I have 40 images with thumbnails and I only want to display the images not the thumbnails using {*vsig}foldername{/vsig*} format.

cheers
ray

@ray
Donnerstag, den 08. Dezember 2011 um 08:22 Uhr
A. Berger

Hi Ray!

It is not possible out of the box but it should be not too complicated to patch the plugin to select the images to show e.g. following a naming convention.

Best regards
Andreas

Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 116 Gäste online