Very Simple Image Gallery Plugin Beispiel03
Geschrieben von: Andreas Berger   
Montag, den 23. November 2009 um 19:12 Uhr
Titel Bild01
Titel Bild01Text Bild01
bwd  Set 1/2  fwd
Titel Bild01
Titel Bild02

 

In diesem Beispiel sind die Bilder der Galerie in Sets von jeweils 4 Bildern aufgeteilt. (Hat das letzte Set weniger Bilder ist auch das kein Problem, die Anzahl der Bilder muss nicht unbedingt ein Vielfaches der Sets sein.) Die angezeigten Buttons sind die automatisch installierten Standardbuttons. Hat man eigene Buttons hochgeladen, dann kann man im Konfigurationspanel den Ordner definieren und diese verwenden.
Zusätzlich verwendet die Galerie Links und Captions.

Einstellungen im Konfigurationspanel des Plugins

Um die Galerien auf der Webseite so zu konfigurieren, werden im Konfigurationspanel des Plugins die folgenden Werte gesetzt:

  • Gallery width: 430
  • max. Image height:
  • Image quality: 90
  • Align the gallery: Mitte
  • Thumbnail width: 90
  • Thumbnail height: 60
  • Crop thumbnails: keep proportions
  • Image thumbnail quality: 80
  • Space between thumbs: 5
  • Thumbnails are shown: Justified - below the image
  • Thumbnail Columns: 2
  • Sort order: A-Z
  • Use sets of size: 4
  • Label sets: Set
  • Link/button forward:
  • Link/button backward:
  • Show captions? Ja
  • Position of captions? Inside
  • Use links? Ja
  • Link original image: Nein
  • Image root: /images/stories/
  • Buttonfolder: /images/stories/vsig_buttons/
  • Use JavaScript? Ja
  • Switch on hover thumb? Nein
  • Preload images? Nein
  • File names as tooltips? Nein
  • Foldername as ID? Nein

Code im Artikel

Um die Bilder im Ordner /images/stories/verysimple anzuzeigen, wird im Artikel an der gewünschten Stelle der folgende Code eingegeben:

{*vsig}verysimple{/vsig*} - (ohne die Sterne)
{*vsig_c}0||Default-Titel|Default-Text{/vsig_c*} - (ohne die Sterne)
{*vsig_c}0|bild01.jpg|Titel Bild01|Text Bild01{/vsig_c*} - (ohne die Sterne)
{*vsig_c}0|bild02.jpg|Titel Bild02|{/vsig_c*} - (ohne die Sterne)
{*vsig_c}0|bild03.jpg||Text Bild03{/vsig_c*} - (ohne die Sterne)
{*vsig_c}0|bild04.jpg||{/vsig_c*} - (ohne die Sterne)
{*vsig_c}0|bild08.jpg|Titel Bild08|Text Bild08{/vsig_c*} - (ohne die Sterne)
{*vsig_l}0||http://extensions.joomla.org/extensions/photos-&-images/photo-gallery/6301/details|Default Link|_blank{/vsig_l*} - (ohne die Sterne)

Overrides

Hat man im Konfigurationspanel andere Einstellungen als die oben angezeigten getroffen und möchte nur diese eine Galerie wie gezeigt konfigurieren, dann kann man den Code um Parameter Overrides (siehe Plugin Howto Code) erweitern. Die Einstellungen für die oben angezeigte Galerie sind:

  • width=430
  • height=
  • imquality=90
  • align=1
  • twidth=90
  • theight=60
  • crop=
  • quality=80
  • space=5
  • right=2
  • cols=
  • sort=0
  • sets=4
  • setstxt=Set
  • cfwd=
  • cbwd=
  • caps=1
  • inout=1
  • links=1
  • autolink=0
  • script=1
  • hover=0
  • preload=0
  • tooltip=0
  • folderid=0


Im Code auf der Seite werden nur die Parameter überschrieben, bei denen die gewünschte Einstellung von der im Konfigurationspanel abweicht. Zum Beispiel:

{*vsig}verysimple|width=430|align=1|sets=4|setstxt=Set|caps=1|inout=1{/vsig*} - (ohne die Sterne)

Die Aufrufe für Links und Captions bleiben unverändert.


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 Sonntag, den 20. März 2011 um 13:34 Uhr
 
Kommentare (12)
Image 1/10
12 Montag, den 31. Oktober 2011 um 14:18 Uhr
Amorino

Hallo Michaela!

please could you tell me how to put image 1/10 (for example) instead of Set 1/4 (in the Sample 03) ?

Best regards

@Amorino
Mittwoch, den 02. November 2011 um 21:18 Uhr
A. Berger

Hi Amorino!

It's only me, but to achieve what you want, you could check Sample05.

Best regards
Andreas

Mehrere Gallerien Problem mit der Titelanzeige
11 Mittwoch, den 15. Juni 2011 um 21:11 Uhr
Michaela

Hallo,

zunächst vielen Dank für die schöne Gallery, ich nutze Joomla 1.5.
Ich habe folgendes Problem:
ich habe mehrere Gallerien in einem Beitrag, sie werden alle richtig angezeigt, nur die Bildtitel werden nur in der ersten Gallery angezeigt. Hier der Link zu der betroffenen Seite: http://birkebo-rasmus.de/index.php?option=com_content&view=article&id=56&Itemid=64

Vielen Dank im Voraus für die Unterstützung.
Gruß Michaela

@Michaela
Mittwoch, den 15. Juni 2011 um 21:25 Uhr
A. Berger

Hallo Michaela!

Der erste Parameter im Code für die Captions ist die Nummer der Galerie im jeweiligen Artikel. Das Plugin beginnt dabei mit "0" zu zählen und nummeriert die Galerien entsprechend Ihres Vorkommens im Artikel.
In Deinem Fall sind 3 Galerien im Artikel. Bitte überprüfe ob der Code im Artikel die Captions der richtigen Galerie zuordnet:

{*vsig_c}0| ... Caption in der ersten Galerie
{*vsig_c}1| ... Caption in der zweiten Galerie
{*vsig_c}2| ... Caption in der dritten Galerie

... ist das nicht die Ursache des Problems, dann poste doch bitte den kompletten Code, den Du im Artikel verwendest.

Gruß
Andreas

PS.: Da Du doch eine Menge Bilder auf der Seite hast, würde ich testhalber mal den Parameter "Preload images" aktivieren. Das verkürzt (sobald die Bilder geladen sind) für den Besucher der - anders als Du - die Bilder noch nicht im Browsercache hat die Wartezeit beim Bildwechsel.

Previous and Next Buttons/Text
10 Mittwoch, den 09. März 2011 um 17:51 Uhr
Curtis

I have been looking at the code trying to figure out how to get the Previous/Counter/Next division centered under the main image. Or, what I would like better is for the counter to be between the main image and thumbnails, and the previous button to be to the left of the thumbs, and the next button to be to the right of the thumbs. Is any of this possible?

Previous an Next Buttons
Freitag, den 11. März 2011 um 16:53 Uhr
Curtis

Thanks Andreas! That worked great. Thanks for the quick response!

@Curtis
Donnerstag, den 10. März 2011 um 21:10 Uhr
A. Berger

Hi Curtis!

To show the controls centered, open the stylesheet /plugins/content/plugin_vsig/vsig.css, find the selector .vsig_ctrl_right {} in line 26 and add "text-align:center;width:100%;" to it.

Further modifications will need heavier modifications of the stylesheet (compare the selectors with the source code of the page with the gallery to see which selector sets the parameters for the parts of the gallery) and if this does not work out, patching the plugin (vsig.php).

Best regards
Andreas

Captions stretching beyond the picture
9 Montag, den 07. Februar 2011 um 16:43 Uhr
Dawid

Hi there,

I'm having a small problem configuring the captions. I want my gallery look just like in sample 03 by instead it looks lie this: www.canteen-online.tk/index.php?option=com_content&view=article&id=190&Itemid=87&lang=en. Any idea what I do wrong?

Thanks in advance
Dawid

@Dawid
Montag, den 07. Februar 2011 um 20:50 Uhr
A. Berger

Hi Dawid!

Captions are always using the full width, set for the main image.
In sample 3 both, the image and the captions fill the complete width.
Your gallery - on the other hand - is set to a width of 655 pixel whilst your images are (at the least I think so) limited to a height of 244 pixel. This results in main images using only a small part of the available width whilst the captions still are using all of it.
Either increase the maximum height or decrease the gallery width to correct this.

Best regards
Andreas

Question about fonts
8 Donnerstag, den 20. Mai 2010 um 18:08 Uhr
Sebastián

Hello there, i am using ur pluggins and they great, the very simple images and the slideshow; the thing is that i am using the gallery in a very dark background and the owner of the page wants the captions below the images, as the captions are black, how do i change the font color?


Thank you so much for ur help and attention.

@Sebastián
Donnerstag, den 20. Mai 2010 um 21:04 Uhr
A. Berger

Hi Sebastian!

You can change the appearance of the captions in the stylesheet of the plugin: /plugin/content/plugin_vsig/vsig.css

The selector .vsig_top div.outside {} deals with the captions, placed below the main image and the following selectors handle the two parts of the captions, the title-line and the text-line:

.vsig span a, .vsig span a:link, .vsig span a:visited, .vsig span a:focus, .vsig span a:hover, .vsig span a:active {} ... appearance of the title line if feature links is activated
.vsig span + span a, .vsig span + span a:link, .vsig span + span a:visited, .vsig span + span a:focus, .vsig span + span a:hover, .vsig span + span a:active {} ... appearance of the text line if feature links is activated
.vsig_top div span {}... appearance of the title line
.vsig_top div span + span {}... appearance of the title

Best regards
Andreas

@Marco
7 Mittwoch, den 03. Februar 2010 um 19:25 Uhr
A. Berger
Hallo Marco!

Fein dass jetzt alles funktioniert und danke für die Hinweise. Ich werde mir das nochmals in Ruhe ansehen, aber da es mir in einem ersten Test nicht gelungen ist, das Problem nicht nachvollziehen konnte (Beez, Internet Explorer) werde ich mit der Aufnahme in die FAQ vorerst noch warten.

Gruß
Andreas
Very Simple Image Gallerie 1.5.4 - IE7
6 Mittwoch, den 03. Februar 2010 um 17:07 Uhr
Marco
Hallo Andreas,
habe mir nochmal Hilfe zur Seite geholt um das Problem zu lösen (Gallerie verschwindet wenn man mit der Maus drüber geht). Und zwar lag das Problem in folgenden Zeilen der vsig.css:

alt: .vsig_top {position:relative;padding:0px;padding-right:5px;margin-bottom:10px}
neu: .vsig_top {padding:0px;padding-right:5px;margin-bottom:10px}

alt: .vsig_thumb img {display:block;position:relative;background:#FFF;border:1px solid #ccc;margin:-5px 5px 5px -5px;padding:4px;}
neu: .vsig_thumb img {display:block;background:#FFF;border:1px solid #ccc;margin:-5px 5px 5px -5px;padding:4px;}

alt: .vsig_top div.outside {z-index:2;position:relative;display:block;margin:0px 5px 0px 5px;}
neu: .vsig_top div.outside {z-index:2;display:block;margin:0px 5px 0px 5px;}

Vielleicht möchtest du dies in deine FAQ´s hinzufügen. In Verwendung habe ich das Standardtemplate Beez.

Grüße aus Rostock
Marco
Very Simple Image Gallery Vers. 1.5.3
5 Donnerstag, den 28. Januar 2010 um 14:52 Uhr
Marco
Hallo Andreas,

vielen Dank für die Antwort. Da muss ich dir natürlich rechtgeben das der User im Vordergrund steht. Ein genervter User kommt wahrscheinlich nicht wieder.
Werde mal lokal ausprobieren ob ich mit deiner CSS Gallerie das IE7-Problem umgehen kann.
Melde mich dann einfach nochmal zu Wort ob es funktioniert hat :)

Bis dahin
Marco
@Marco
4 Mittwoch, den 27. Januar 2010 um 21:24 Uhr
A. Berger
Hallo Marco!

Das Darstellungsproblem im Internet Explorer hat nichts mit JavaScript zu tun, da geht es rein um CSS. Und es ist auch nicht behoben, im Internet Explorer blendet die angesprochene CSS Einstellung immer noch die Galerie aus. Ich gebe gerne zu - ich weiß nicht warum.

Was JavaScript angeht, indem Du es aktivierst siehst Du die Parameter nicht mehr, da sind sie trotzdem. Schau in den Quelltext oder mach über einem Thumbnail einen Rechtsklick -> in neuem Fenster öffnen. Aber das ist ja nichts Böses (wiederum: siehe meine vorige Antwort). Also wenn Du Seitenaufrufe brauchst (wobei das eher witzlos ist, weil es Dir ja um den Kopmfort der Besucher und nicht um Seitenimpressionen gehen sollte bei dieser Art der Internetpräsenz) - dann deaktiviere halt JavaScript. Bedenka dabei aber - nur weil Du mehr Seitenimpressionen siehst waren nicht mehr Leute da.
Auf das Verhalten der Galerie gegenübr dem Spider einer Suchmaschine hat das jedenfalls keinen Einfluss, denn die meisten sind ohne JavaScript unterwegs.

Gruß
Andreas
Very Simple Image Gallery Vers. 1.5.3
3 Mittwoch, den 27. Januar 2010 um 12:22 Uhr
Marco
Vielen Dank erstmal für die Info vom 10.01.2010.

Habe Javascript jetzt aktiviert und die gallerie ist wieder in Ordnung.
Hast du eventuell eine Idee wie ich die Gallerie im IE7 ohne Javascript noch für ne Weile betreiben kann (bin nicht fit in Sachen Programmierung? Möchte damit bewirken das die Seite noch nen paar Klicks mehr bekommt da sie noch relativ jung ist.

Grüße aus Rostock
Marco
Deutsch
Panoramic Image Viewer
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 44 Gäste online