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
Very Simple Image Gallery Plugin Installation und Verwendung
Geschrieben von: Andreas Berger   
Montag, den 29. Dezember 2008 um 08:04 Uhr

Eine Schritt für Schritt Anleitung für Installation und Verwendung des Very Simple Image Gallery Plugins.

Installation

1.) In die Administrationsoberfläche einloggen


2.) Den Menüpunkt "Erweiterungen" > "Installieren/Deinstallieren" auswählen


3.) Die Paketdatei mit dem Very Simple Image Gallery Plugin auswählen


4.) Auf "Hochladen und Installieren" klicken


5.) Wenn alles geklappt hat, erhält man die Meldung "Plugin erfolgreich installiert"


6.) Den Menüpunkt "Erweiterungen" > "Plugins" auswählen


7.) Das "Very Simple Image Gallery Plugin" suchen und anklicken


8.) "Gallery width" ist die Gesamtbreite. Werden die Thumbnails unterhalb des Hauptbildes angezeigt, dann entspricht das der Breite des Hauptbildes, werden die Thumbnails rechts vom Hauptbild angezeigt, dann entspricht das der Gesamtbreite der Galerie (Hauptbild + Thumbnails).


9.) "max. Image height" legt fest ob die Hauptbilder die gesamte verfügbare Breite ausnützen (leer), oder ob Sie entsprechend einer festgelegten Maximalhöhe skaliert werden (ganze Zahl, z.B. 300). Das Festlegen einer Maximalhöhe macht dann Sinn, wenn innerhalb einer Galerie Bilder verschiedener Proportionen verwendet werden.


10.) Der nächste Parameter ist die Qualität der erzeugten Hauptbilder in Prozent. Hier empfehlen sich Werte zwischen 85 und 90. Je höher die Qualität, desto größer die Bilddatei!


11.) Der nächste Parameter legt die Positionierung der Galerie relativ zum verfügbaren Platz fest. Zur Auswahl stehen Links, Zentriert, Rechts, float left und float right. Die beiden letzten Optionen ermöglichen es, die Galerie mit Text umfliessen zu lassen. Sie machen die Galerie gleichzeitig aber auch wesentlich abhängiger vom verwendeten Template und werden wohl nicht immer den gewünschten Effekt haben.


12.) Der nächste Parameter ist die maximale Breite der Thumbnails in Pixel.


13.) Als nächstes kommt die maximale Höhe der Thumbnails, ebenfalls in Pixel.


14.) Der nächste Parameter legt fest, ob die Thumbnails proportional skaliert oder entsprechend der festgelegten Maximalwerte beschnitten werden sollen.


15.) Der nächste Parameter ist die Qualität der Thumbnails in Prozent. Hier empfehlen sich Werte zwischen 60 und 70, vielleicht noch 80 Prozent. Je höher die Qualität, desto größer die Bilddatei!


16.) Als nächstes kann der Abstand der Thumbnails zueinander in Pixel festgelegt werden. Welcher Wert hier passend ist, muss im Einzelfall entschieden werden. Fixe Regeln gibt es keine.


17.) Die Thumbnails können wahlweise neben oder unter dem Hauptbild angezeigt werden. Welche Option die passendere ist, hängt vom verwendeten Template ab.



Beginnend mit Version 1.2.0 gibt es bei der Positionierung der Thumbnails auch die Option "Below Justified". Wählt man diese aus, dann versucht das Plugin, ausgehend von den getroffenen Einstellungen, die Größe der Plugins und des Hauptbildes soweit zu ändern, dass der rechte Rand des Hauptbildes exakt mit dem rechten Rand der Thumbnails abschließt.


18.) Lässt man die Thumbnails rechts/links vom Hauptbild anzeigen, dann wird hier festgelegt, wieviele Spalten von Thumbnails angezeigt werden sollen. Das Hauptbild wird entsprechend skaliert.
Führt der eingegebene Wert dazu, dass für das Hauptbild überhaupt kein Platz mehr bleibt, dann zeigt das Plugin automatisch nur eine Spalte Thumbnails an. Von Bedeutung ist dieser Parameter nur dann, wenn man die Thumbnails links/rechts vom Hauptbild anzeigt.


19.) "Sort Order" regelt die Reihenfolge, in der die Bilder angezeigt werden. Zur Auswahl stehen die Optionen alphabetisch aufsteigen, alphabetisch absteigend, von alt zu neu und von neu zu alt (jeweils Änderungsdatum und nicht Erstellungsdatum!) und zufällig.


20.) Beginnend mit Version 1.5.0 bietet der Parameter "Sets" die Möglichkeit, einzelne Galerien in mehrere Sets zu unterteilen (siehe Beispiele). Wird hier nichts eingegeben oder ist der eingegebene Wert größer als die Anzahl der gefundenen Bilder, dann zeigt das Plugin alle Thumbnails auf einer Seite an.



Jeder andere Wert (3, 4, ...) erzeugt einzelne Sets, zwischen denen mit automatisch angezeigten Buttons/Links navigiert werden kann. Zusätzlich wird ein Counter erzeugt, der die Anzahl der verfügbaren Sets angibt.


21.) "Label Sets" legt fest, wie der Counter die einzelnen Sets bezeichen soll. Ob "Set", "Desk", "Page" ... wie es gefällt.


22.) Die Parameter "Link/Button forward" und "Link/Button backward" legen den Button/Text für die Links fest, mit denen zwischen den einzelnen Sets navigiert wird:

Lässt man die Felder leer, dann werden die automatisch installierten Buttons verwendet.

Gibt man Text ein, dann wird der Text verwendet.

Alternativ zu Standardbuttons und Textlinks können auch eigene grafische Buttons verwendet werden. Findet das Plugin die Endungen .jpg, .png oder .gif, dann sucht es im eingestellten Ordner (Parameter weiter unten, per default: /images/stories/vsig_buttons) nach Bildern dieses Namens. Sind sie vorhanden, dann werden sie angezeigt.


23.) Aktiviert man die Option "Show Captions", dann hat man die Möglichkeit, im Beitrag die Bilder einer Galerie mit Titel und Text zu versehen.


24.) "Position of Captions" legt fest, ob Titel und Text halbtransparent über das Bild eingeblendet oder unter dem Hauptbild angezeigt werden sollen.


25.) Mit der Aktivierung von "Use links?" hat man zusätzlich die Möglichkeit, die Bilder der Galerie zu verlinken. Link, Titel und Ziel (Attribut target) werden im Artikel angegeben.


26.) Mit der Aktivierung von "Link Original Image?" erzeugt das Plugin automatisch für jedes Bild einen Link zur originalen Bilddatei, die dann in einem neuen Fenster geöffnet wird.


27.) Image root legt den Stammordner fest, in dem (direkt oder in Unterordnern) alle Bilder liegen. Standardmässig ist hier in Joomla!1.5 der Ordner /images/stories/ und in Joomla!1.6/1.7 der Ordner /images/ eingestellt (und dieser Ordner wird auch verwendet, wenn das Feld leer ist). In den meisten Fällen ist hier keine Änderung erforderlich, nur wer seine Bilder in einer Ordnerstruktur außerhalb dieses Stammordners organisiert hat, der kann hier den entsprechenden Pfad angeben.
Der hier festgelegte Pfad wird vom Plugin bei jedem Aufruf einer Galerie automatisch ergänzt und darf im Code im Artikel nicht mehr wiederholt werden!


28.) Buttonfolder
Wer für die Verwendung von Sets eigene Buttons erstellt hat, kann diese hier festlegen, in welchem Ordner das Plugin diese suchen soll. Per default ist in Joomla!1.5 der Ordner /images/stories/vsig_buttons/ und in Joomla!1.6/1.7 der Ordner /images/vsig_buttons/ (wird nicht automatisch erstellt) eingestellt. In diesem sucht das Plugin auch, wenn dieses Feld leer ist.


29.) "Use JavaScript?" legt fest, ob beim Anklicken der Thumbnails ein Bildwechsel auf der selben Seite erfolgen soll, oder ob jeder Klick die Seite - mit dem gewählten Hauptbild - neu lädt. Komfortabler ist natürlich Option 1, aber wer extrem auf Seitenaufrufe angewiesen ist, der kann auch ohne Script arbeiten. Besucher mit deaktiviertem JavaScript werden automatisch mit Option 2 bedient.


30.) Aktiviert man den Parameter "Switch on hover thumb?" dann wechselt das Hauptbild nicht erst beim Anklicken eines Thumbnails sondern sobald sich der Mauszeiger über dem Thumbnail befindet. Voraussetzung dafür ist, dass der Parameter "Use JavaScript?" aktiviert ist.


31.) Der Parameter "Preload images" bietet die Möglichkeit, alle - beim Laden der Seite nicht sofort sichtbaren - Bilder der Galerie per JavaScript vorzuladen. Das macht eigentlich immer Sinn, ist aber besonders wichtig, wenn man den Parameter "Switch on hover Thumb?" aktiviert hat, da für den Besucher die ansonsten entstehenden Wartezeiten für das Laden des Bildes besonders störend sind.


32.) Der Parameter "Filenames as tooltips?" regelt, ob die Dateinames der Bilder (ohne Suffix) für ALT- und TITLE-Attribut des Bildes verwendet werden sollen, wenn weder Captions noch Links gesetzt sind.


33.) Der Parameter "Foldername as ID" bietet die Möglichkeit, den einzelnen Galerien den Namen des Ordners, aus dem die Bilder stammen als Identity des umschließenden DIV-Containers zuzuweisen (id="ordnername").



Das Plugin beinhaltet im Ordner (Joomla-Installation)/plugins/content/plugin_vsig (Joomla!1.5) bzw. (Joomla-Installation)/plugins/content/verysimpleimagegallery/files (Joomla!1.6/1.7) das Stylesheet vsig.css. Dieses wird nach den Styleangaben geladen, die das Plugin in den Head-Bereich der Seite schreibt, und ermöglicht es, jede Angabe manuell zu überschreiben. Das ist immer möglich, eine hier getroffene Angabe bezieht sich auf alle Very Simple Image Galerien eines Internetauftritts.
Mit der Zuweisung einer eindeutigen Identity hat man nun aber zusätzlich die Möglichkeit, jede einzelne Galerie individuell zu gestalten, indem man die Identity als übergeordneten CSS-Selektor verwendet.


34.) Abschliessend finden wir hier die Ergebnisses des GD-Checks, den das Plugin durchführt. Die GD Library ist eine der gängigsten Erweiterungen zur Bildbearbeitung für PHP und wird vom Plugin verwendet, um die Thumbnails zu erzeugen. Überprüft wird, ob die Erweiterung überhaupt vorhanden ist und ob die vom Plugin unterstützen Dateiformate (jpg, png, gif) verfügbar sind.



Sind ein oder zwei Dateiformate nicht verfügbar, dann wird die Galerie mit dem/den verbleibenden immer noch funktionieren.



Ist die GD-Lib gänzlich deaktiviert, dann kann die Galerie nicht verwendet werden. In diesem Fall empfiehlt es sich, bei seinem Hoster nachzufragen, ob sie aktiviert werden kann.


35.) Das Plugin aktivieren


36.) Auf Speichern klicken - und fertig


 

Verwendung


Damit man mit dem Plugin etwas anfangen kann, brauchen wir als Nächstes die entsprechenden Bilder. Diese legen wir in Joomla!1.5 in einem Ordner unter (Joomla-Installation)/images/stories, in Joomla!1.6/1.7 in einem Ordner unter (Joomla-Installation)/images/ ab. Die Anleitung bezieht sich auf Joomla!1.5, abgesehen vom Ordner ändert sich aber für Joomla!1.6/1.7 nichts.

1.) Den Menüpunkt "Site" > "Medien" auswählen


2.) Hier in den Ordner "Media" > "stories" wechseln


3.) Einen neuen Unterordner für die Bilder anlegen. Im Beispiel wähle ich dafür den Namen "verysimple"


4.) In den neu angelegten Ordner wechseln.


5.) Und hier die Bilder hochladen. Das Plugin akzeptiert die Dateitypen ".jpg", ".gif" und ".png".


6.) Jetzt im Menüpunkt "Inhalt" > "Beiträge" den gewünschten Beitrag öffnen.


7.) An der gewünschten Stelle den Code zum Aufruf des Plugins eingeben.

 

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.

Will man zusätzlich zu den Bildern auch Text anzeigen, die Bilder verlinken oder für die aktuelle Galerie die im Backend eingestellten Werte überschreiben, dann geht es im zweiten Teil der Anleitung (Link am Ende der Seite) weiter.


8.) Speichern - Fertig!


 

Wartung

Das Plugin legt beim Aufruf im Ordner mit den Bildern jeweils einen Unterordner für die skalierten Hauptbilder und die skalierten Thumbnails an. Dort speichert es die neu erstellten Dateien mit der Namenskovention:

"Bildname" Unterstrich "Breite" Unterstrich "Höhe" Unterstrich "Qualität" Punkt "Dateityp".

Also zum Beispiel: "bild01_80_60_70.jpg"

Das Plugin erstellt zwar die Dateien, löscht aber keine. Hat man verschiedene Einstellungen ausprobiert, kann es sinnvoll sein, die nicht mehr benötigten Thumbnails zu löschen.

1.) Dazu wechseln wir - nachdem die Galerie im Frontend zumindest einmal aufgerufen wurde - wieder in den Menüpunkt "Site" > "Medien"


2.) Im Ordner der Galerie (im Beispiel "verysimple") finden wir jetzt die Unterordner. "vsig_images" und "vsig_thumbs". In diesen sind die neu erstellten Bilder und Thumbnails abgelegt.


3.) Nicht mehr benötigte Bilder/Thumbnails kann man bedenkenlos löschen. Löscht man versehentlich ein aktuelles Bild/Thumbnail - kein Problem, beim nächsten Aufruf der Galerie wird es neu erstellt.



Hinweis:
Das Plugin überprüft Bilder anhand von Name und Größe. Ersetzt man ein Original durch ein anderes selber Größe und mit selbem Namen, dann wird das nicht automatisch erkannt, sondern muss man die skalierte Version des ersetzten Bildes im Ordner "vsig_images" und "vsig_thumbs" manuell löschen. Beim nächsten Aufruf greift das Plugin dann auf das neue Original zu und erstellt ein aktuelles Bild/Thumbnail.


Übersicht über die Möglichkeiten des Aufrufs direkt aus dem Artikel (Paramater Overrides, Links, Captions): Anleitung Plugin Code


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 Dienstag, den 08. November 2011 um 22:11 Uhr
 
Kommentare (35)
folder not found
15 Mittwoch, den 26. Oktober 2011 um 19:36 Uhr
pelister

Installed VSIG on Joomla 1.7 and used in an article but says folder could not be found.

But the folder path the plugin displays is correct path.

Pls help

@pelister
Donnerstag, den 27. Oktober 2011 um 18:19 Uhr
A. Berger

Hi pelister!

Please check the directory permissions of the folder (folder - 755, files - 644) and - in a second step - check if the path to the folder is fragmented by HTML tags in your article (switch to HTML view and check for BR, SPAN, P, etc.) If there are any, remove them.

If neither the first nor the second step solves the problem, please provide a link to the page, I will have a look at it.

Best regards
Andreas

Controlling position
14 Mittwoch, den 26. Oktober 2011 um 04:49 Uhr
dave

Hi, I have the plugin installed and working proper.y. Can it be configured to be placed in the left margin, instead of along with all the other articles?

I don't understand the usefulness of this plugin if it's only shown as an article?
After three or four articles, it's shifted to the end of the page, then off the main page. I also have about 100 images I'd like to display, so the thumbnails are very long down the page.
Perhaps this isn't the right plugin for me? If it's not possible to configure this as an image gallery that is always visible on the page, maybe you have a suggestion for a more suitable plugin?

Thanks so much.

Best,
Dave

@dave
Mittwoch, den 26. Oktober 2011 um 13:15 Uhr
A. Berger

Hi dave!

What you are looking for is rather a module than a plugin. The purpose of a module is to display it's content at a fixed module-position. The purpose of a content-plugin (like this one) is to modify content (e.g. replace code in an article with a gallery).

Best regards
Andreas

Captions wie einfügen?
13 Freitag, den 21. Oktober 2011 um 21:51 Uhr
Lars

Hallo, würde in der Galerie gerne den Bildern einen Titel und zwei Zeilen Text hinzufügen. Wo muss man das bei Joomla 1.6 machen?

Grüße

@Lars
Mittwoch, den 26. Oktober 2011 um 12:47 Uhr
A. Berger

Hallo Lars!

Captions werden über zusätzliche Codezeilen im Artikel selbst definiert. Die Seite "Howto Plugin Code" (Link im Menü links) erklärt das Feature.

Gruß
Andreas

target of linked image
12 Donnerstag, den 13. Oktober 2011 um 22:43 Uhr
Laurens

First of all: a real brilliant plugin!

One question: I enabled the use of "Link original image", but I would like to change the target in a way that the new window shows without the browser bar. I think it can be changed in the Javascript...could you please help me out and tell me how and where to modify the script?

Thanks a lot!
Laurens

@Laurens
Mittwoch, den 26. Oktober 2011 um 17:27 Uhr
A. Berger

Hi Laurens!

To achieve this, you will have to patch not only the JavaScript but the whole plugin because at the moment, the link to the original image is a pure X-HTML link. What you need for your link is JavaScript. This is not within the scope of the plugin up till now.

Best regards
Andreas

thanks your art
11 Dienstag, den 27. September 2011 um 09:27 Uhr
dangvantrung

thanks so much!

merci
10 Donnerstag, den 08. September 2011 um 06:42 Uhr
runbrun

Un grand merci de La Réunion, petite île très au sud de l'Europe !


Il manque juste la traduction française sinon c'est un plugin parfait !

thanks
9 Samstag, den 13. August 2011 um 14:13 Uhr
mert

outstanding work. thank you.

Thanks very much
8 Mittwoch, den 15. Juni 2011 um 14:54 Uhr
Dorine

Hi Andreas,

Just wanted to thank you for your excellent work.
Your plugin works great for me!!

Dorine

very simple image
7 Sonntag, den 05. Juni 2011 um 19:15 Uhr
gina

installationsanleitung ist total easy beschrieben, hab auch gedacht, dass ich das doch prima kann, aber leider funktionierts nicht - fehlermeldung "404 - beitrag nicht gefunden" erscheint...
wieso denn das?

liebe grüsse
gina

@gina
Montag, den 06. Juni 2011 um 20:16 Uhr
A. Berger

Hallo Gina!

Deaktiviere im Backend das Plugin und ruf den Artikel erneut auf. Aller Voraussicht nach wirst Du die selbe Fehlermeldung erhalten, was dann eindeutig zeigt, dass sie nichts mit dem Plugin zu tun hat.
Überprüfe den Menüpunkt, den Du für den fraglichen Artikel angelegt hast. Er ist vermutlich nicht korrekt.

Sollte das Deaktivieren des Plugins doch den Fehlr 404 beseitigen - dann poste bitte einen Link zur Seite, ich schau mir das gerne an.

Gruß
Andreas

linking to large images
6 Donnerstag, den 02. Juni 2011 um 01:53 Uhr
Vicky

Hi, this extension works great. Thank you so much for it. Is it possible to link each main (large) image to its own article? In other words, I'd like people to hover over the thumbs then see the large image, then place a link onto that large image to its own page so they can print it. Is there an easy way to do this? Thanks. (oh also I want to do what you said and make custom thumbnails, in case that affects what I'm saying--I don't think it would). I'm on 1.6 using JCE.

@Vicky
Donnerstag, den 02. Juni 2011 um 20:54 Uhr
A. Berger

Hi Vicky!

To link the main image to a specific target you can use the feature "Links", check the page "Howto Plugin Code" (find the link in the menu at the left), it explains the feature.
To link the main image to the original image file - just enable the parameter "Link original image?".

About custom thumbnails - it is of course possible to replace the thumbnails the plugin creates with your own but be aware that the plugin will create new thumbs as soon as you adjust settings that change the thumbnail dimension or quality.

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 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 49 Gäste online