Titel Bild01Text Bild01
 Set 1/3 
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. |
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
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
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
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
Hello
Great plug in and easy to work out
However, I can see how to adjust the spacing (horizontal) between thumbnails, but how do you adjust the horizontal spacing between thumbnails (and the main image)?
Thanks
Hi Julian!
I assume (referring to your comment-title) that you mean the vertical space between the thumbnails and the main image. I'm sorry but there is no setting for this margin. It's a fixed value because it is needed as margin between the main image and the thumbs or the main image and the controls or the main image and the comments. You need to patch the plugin to change it.
Best regards
Andreas
Hi! Thanks again.
I like to link every main picture to diferent ones than the thumnails in a diferent folder, so I can use the thumnails as a first stage navigation and the links as a second.It's that posible?
Thanks a lot
Hi marina!
The thumbnails are always used to switch the main image but you can use the feature "Links" (check the section "Links" at the page "Howto Plugin Code", menu at the left) to link the main images to an arbitrary target.
About your first question - no, the thumbnails are intentionally near the main images and you would have to patch the plugin to change this.
Taking these two facts together you may want to take a look at extensions.joomla.org and search for a menu that uses graphical buttons. This is probably easier than modifying an image gallery to behave like a menu.
Best regards
Andreas
Thanks for the gallery.
Is there any way to separate the thumnails column from the main picture?
Thanks
Respected Sir,
please send very simple image gallery sample04 code send me
my mail id cyril.prabhu5gmail.com
Hi Cyril!
There is nothing to send. You may download the plugin at the page "Very Simple Image Gallery", insrtall it and use the settings explained on this page.
Best regards
Andreas