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)
errormessage on website in article using simpel image galler
5 Mittwoch, den 01. Juni 2011 um 21:07 Uhr
robert

The simple image gallery installed in joomla 1.6 and it works. I see the images in the article but....
I get al large row of errors (or how do you call that). A whole screen full of these messages (20 for 20 pics i think)
What goes wrong?

thanks for your help. Robert NL

See an example of the messages below
Strict Standards: Only variables should be assigned by reference in C:\Users\admin\Desktop\joomla\Nieuwe map\xampp\htdocs\joomlawebsite\plugins\content\verysimpleimagegallery\verysimpleimagegallery.php on line 79
Strict Standards: Non-static method plgContentVerysimpleimagegalleryHelper::beSortImages() should not be called statically, assuming $this from incompatible context in C:\Users\admin\Desktop\joomla\Nieuwe map\xampp\htdocs\joomlawebsite\plugins\content\verysimpleimagegallery\verysimpleimagegallery.php on line 253

@robert
Donnerstag, den 02. Juni 2011 um 20:38 Uhr
A. Berger

Hi Robert!

What you see are "notices", not "errors" and they are caused by the fact that the Error Reporting Level on your XAMPP is set to "_ALL^E_STRICT".
With this notices PHP tells you (in fact it tells me), that it thinks my code could be improved. The reason why you see these notices, is that the Error Reporting Level in your Joomla! Installation is - probably - set to "Maximum". To change this (on a live site errors should be turned off anyway), log into your Joomla! backend, go to "Site" > "Global Configuration" > "Server" and under "Server Settings" change the setting for "Error Reporting" to "Simple" or just "None".
Having saved the changes, the notices should be gone.


Best regards
Andreas

SobiPro integration with VSIG
4 Donnerstag, den 12. Mai 2011 um 21:26 Uhr
Dale Fischer

Has anyone tried to use VSIG as a way to display an image gallery in SobiPro details view pages?

@Dale Fischer
Freitag, den 13. Mai 2011 um 20:54 Uhr
A. Berger

Hi Dale!

I just started checking the possibilities to make the plugin available with SobiPro.

Best regards
Andreas

Great! And with a few wishes!
3 Freitag, den 22. April 2011 um 16:20 Uhr
ubald

Works absolutely fine!

For us, it would be great if a few things could be adjusted:
> The thumbnails can be placed left, center, right. But it would be great for the design possibilities if you could also choose botom and top of page!
> Excellent that you can upload your photos to the site and that it downsizes the pics to the two needed sizes. Saves a lot of work. It would be even greater, if you could superimpose a watermark as a standard overlay on top of each photo that is displayed.
> It would ne nice (again for design purposes) if you could set the position of the main picture. The user enetrs the total width and the max height of the main picture. For vertically oriented pictures this result in a placement near the center of the area. It would be nice if you could force the main pictures to be right-adjusted, center, or left-adjusted.

All in all great work and very user-friendly. Good documentation too (under demo)! Thumbs up!

@ubald
Montag, den 25. April 2011 um 14:13 Uhr
A. Berger

Hi ubald!

I will think about it.

Best regards
Andreas

Thumbnails
2 Samstag, den 09. April 2011 um 11:34 Uhr
Chris

Love this, it's really easy to use and is the only plugin I've ever seen that has decent instructions on how to use it.  This literally took me 5 minutes.

I do have a problem, the 1st row of thumbnails are staggered vertically, e.g. thumbnail 2 is shifted down from 1 and 3 is shifted down from 2 and 4 is shifted down from 3.  Thumnails 5 onwards are all aligned.

Would love to hear some thoughts on this.
Thianks.

@Kamil
Mittwoch, den 13. April 2011 um 21:41 Uhr
A. Berger

Hi Kamil!

As I said: If you provide a link to the page with the gallery, I will have a look at it.

Best regards
Andreas

Same problem here
Mittwoch, den 13. April 2011 um 11:02 Uhr
Kamil

I've changed my template but it's all the same. any help?

@Chris
Montag, den 11. April 2011 um 20:19 Uhr
A. Berger

Hi Chris!

With utmost probability a CSS setting from one of the stylesheets of your template overrides the stylesheet of the plugin and adds a margin or padding to the thumbnails. You can verify this by temporarily switching the template.

If you provide a link to the page with the gallery, I will have a look at it.

Best regards
Andreas

Missing "Prev" and "Next" between PHOTOS (not between sets)
1 Mittwoch, den 06. April 2011 um 13:25 Uhr
Marok
Hi, I think your plugin is great!
The only problem is that "prev" and "next" button between photos (not "sets") are missing.
I can create very small sets and then put "prev" and "next" button between them, but of course it's not the same thing... because I lose the thumbnails.
Do you think that this option will be available in the future?
Thanks a lot!
@Marok
Mittwoch, den 06. April 2011 um 20:56 Uhr
A. Berger
Hi Marok!

Maybe not already with the next update, but yes, I will integrate this feature.

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