Very Simple Image Gallery Plugin Beispiel04
Geschrieben von: Andreas Berger   
Montag, den 23. November 2009 um 19:13 Uhr
Titel Bild01
Titel Bild01Text Bild01
Titel Bild01
Titel Bild02
Default-Titel
Default-Titel
Default-Titel
Titel Bild08

 

bwd  Set 1/3  fwd

Dieses Beispiel zeigt die Verwendung mehrerer Galerien in einem Beitrag. Die Annahme ist, dass die Einstellung für die erste Galerie im Backend getroffen und die zweite Galerie mittels Parameter Overrides konfiguriert wird. Die erste Galerie verwendet zudem Captions, der zweiten Galerie ist ein Default-Link zugewiesen. Natürlich könnten auch beide Galerien mittels Parameter Overrides konfiguriert werden.

Einstellungen im Konfigurationspanel des Plugins

Die Einstellung für die erste Galerie im Backend:

  • 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:
  • 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)

Overrides

Mittels Parameter Overrides konfigurieren wir nun die zweite Galerie. Die erforderlichen Parameter (eine komplette Liste siehe Beispiele 1-3 und "Anleitung Plugin Code") sind:

  • twidth=94
  • theight=63
  • space=4
  • right=3
  • cols=1
  • sets=3
  • setstxt=Set


Und so sieht der Code aus. Die erste Zeile ruft die Galerie auf. Natürlich muss es nicht zweimal der selbe Ordner sein - das ist hier nur meiner Bequemlichkeit geschuldet. Die zweite Zeile definiert den Default-Link. Wichtig dabei der erste Parameter "1" für die zweite (0,1,2,3,...) Galerie im Artikel:

{*vsig}verysimple|sets=3|right=3|cols=1|twidth=94|theight=63|space=4|setstxt=Set{/vsig*} - (ohne die Sterne)
{*vsig_l}1||http://extensions.joomla.org/extensions/photos-&-images/photo-gallery/6301/details|Default Link|_blank{/vsig_l*} - (ohne die Sterne)


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 (2)
Desperate for help on Captions and Hover on mouse
2 Donnerstag, den 27. Oktober 2011 um 00:37 Uhr
Ed Cox

Hi All,

Have installed VSIG and I love it - except I am unable to get my gallery working almost exactly as the First Example of Sample04 page. Which allows for Image change on mouse over, and individual captions for each image. Here's my plug-in code:

{*vsig}Rendered_Facades/Single_Storey/Large_Display{/vsig*}
{*vsig_c}0|Modern_Federation.jpg|Modern Federation|{/vsig_c*}
{*vsig_c}0|Resort.jpg|Resort|Resort{/vsig_c*}
{*vsig_c}0|Tempo.jpg|Tempo|Tempo{/vsig_c*}
{*vsig_c}0|Tropic.jpg|Tropic|Tropic{/vsig_c*}
{*vsig_c}0|Ultra_Contemporary.jpg|Ultra Contemporary|Ultra Contemporary{/vsig_c*}
{*vsig_c}0|Ultra_Modern.jpg|Ultra Modern|Ultra Modern{/vsig_c*}
{*vsig_c}0|urban-new.jpg|Urban New|Urban New{/vsig_c*}

And here is the page which should be working (Joomla! 1.7.2) : http://everydayhomes.iconvm.com.au/home-designs/single-story?id=41
I'm pretty confident that the parameters are all set correctly - and almost echo those on the example page.
Can anyone please shed some light??

Thank you,
ed AT iconvisual DOT com DOT au

@Ed Cox
Donnerstag, den 27. Oktober 2011 um 18:35 Uhr
A. Berger

Hi Ed!

In the configuration Panel of the plugin:
- set the parameter "Show Captions" to "Yes"
- set the parameter "Switch on hover thumbs" to "Yes"
- set the parameter "Show Captions" to "Yes"
- set the parameter "Preload images" to "Yes"
... and if you want the thumbs to display below the main image as in the first sample here
- set the parameter "Thumbnails are shown" to "Justified - below the main image"

Best regards
Andreas

captions
1 Freitag, den 06. Mai 2011 um 20:46 Uhr
ADAMA pottery

First thanks for the so nice and easy to use & install this plug in

May i ask your help with the strip under the captions: can i cancel it? can i align it? (and how?)
I will thank you if you have a moment and look here:
http://adama-studio.adama-pottery.com/joomla16/index.php/2011-03-25-19-47-00/our-specials/101-2011-04-15-04-44-19

Thanks again
Dov

@ADAMA pottery
Montag, den 09. Mai 2011 um 21:10 Uhr
A. Berger

Hi Dov!

The "strip" assures that the text of a caption stays readable even if over a dark part of an image. Anyway, if you want to get rid of it you could add the following to a stylesheet of your site (e.g. main.css):

.mylink:hover span {background:transparent !important;filter:alpha(opacity=100) !important;opacity:1.00 !important;}
#becssg_cap_101_0 {background:transparent !important;filter:alpha(opacity=100) !important;opacity:1.00 !important;}


The first line addresses the captions attached to the thumbnails, the second line addresses the caption, attached to the start image. The second line is the downside of this patch because if you are using multiple galleries on your site, you have to address every single gallery:

#becssg_cap_101_0, #becssg_cap_102_0, #becssg_cap_103_0, #becssg_cap_104_0 {background:transparent !important;filter:alpha(opacity=100) !important;opacity:1.00 !important;}
The first (increment) number is the identity of the article that holds the gallery, the second number is the number of the gallery within this article (starts counting at 0).

An alternative would be to switch to the "Very Simple Image Gallery" (find the link in the menu at the left), it would allow to modify the captions by modifying the stylesheet of the plugin.

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