2010-08-01
Very Simple Image Gallery Plugin Sample03
Written by Andreas Berger   
Monday, 23 November 2009 19:12

This sample splits the images of the gallery into sets of 4 thumbnails each (The number does not necessarily have to be a multiple of one set) The shown buttons are the automatically installed default buttons. If you want to use text or custom buttons, this can be configured in the configuration backend too.

In addition the gallery uses Links and Captions.

Settings in the plugin configuration panel

To configure the galleries on your site as shown above, the settings in the plugins configuration panel are:

  • Gallery width: 430
  • max. Image height:
  • Image quality: 90
  • Align the gallery: Center
  • 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
  • Place for thumbnails in percent of gallery width: 30
  • Sort order: A-Z
  • Use sets of size: 4
  • Label sets: Set
  • Link/button forward:
  • Link/button backward:
  • Show captions? Yes
  • Position of captions? Inside
  • Use links? Yes
  • Image root: /images/stories/
  • Buttonfolder: /images/stories/vsig_buttons/
  • Use JavaScript? Yes
  • Foldername as ID? No

Code in article

To show the images in the folder /images/stories/verysimple, type the following code in your article at the place you want the gallery to be shown:

{*vsig}verysimple{/vsig*} - (without the asterisks)
{*vsig_c}0||Default-Title|Default-Text{/vsig_c*} - (without the asterisks)
{*vsig_c}0|bild01.jpg|Title pic01|Text pic01{/vsig_c*} - (without the asterisks)
{*vsig_c}0|bild02.jpg|Title pic02|{/vsig_c*} - (without the asterisks)
{*vsig_c}0|bild03.jpg||Text pic03{/vsig_c*} - (without the asterisks)
{*vsig_c}0|bild04.jpg||{/vsig_c*} - (without the asterisks)
{*vsig_c}0|bild08.jpg|Title pic08|Text pic08{/vsig_c*} - (without the asterisks)
{*vsig_l}0||http://extensions.joomla.org/extensions/photos-&-images/photo-gallery/6301/details|Default Link|_blank{/vsig_l*} - (without the asterisks)

Overrides

If you are using other settings than the shown above in the plugins configuration panel and want to configure just the current gallery, it is possible to extend the code in your article with Parameter Overrides (refer Plugin Howto Code). The settings for the gallery shown above are:

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


In your article you overwrite only the parameters that differ from the settings in your backend. For example:

{*vsig}verysimple|width=430|align=1|sets=4|setstxt=Set|caps=1|inout=1{/vsig*} - (without the asterisks)

The code for Links and Captions stays unchanged.


If you have questions or suggestions, please use the comment-function.

If you use this extensions, please post a rating and a review at extensions.joomla.org. Furthermore I appreciate everyone, supporting me with a link back to www.bretteleben.de on his/her website. The extension itself does not produce any hidden links, eastereggs or whatever.

If you need additional features or customizations for your project that exceed the scope of support offered through the comments, you are invited to submit your requirements specification and the planned budget by email (menu item "Contact" in the menu at the top).

Last Updated on Sunday, 06 June 2010 13:04
 
Comments (12)
Question about fonts
12 Thursday, 20 May 2010 18:08
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
Thursday, 20 May 2010 21:04
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
11 Wednesday, 03 February 2010 19:25
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
10 Wednesday, 03 February 2010 17:07
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
9 Thursday, 28 January 2010 14:52
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
8 Wednesday, 27 January 2010 21:24
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
7 Wednesday, 27 January 2010 12:22
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
@Marco
6 Sunday, 10 January 2010 14:12
A. Berger
Hallo Marco!

Nein, für die GET Parameter in den URLs gibt es kein Lösung, sie sind aber auch kein Problem. In der Regel wird man die Galerie mit der Option "JavaScript verwenden -> JA" einsetzen. Ich empfehle das auch hier zu tun. (Für Besucher mit deaktiviertem JavaScript funktioniert die Galerie trotzdem.)
Ein Besucher mit aktiviertem JavaScript wird kaum jemals eine URL mit GET-Parameter zu Gesicht bekommen, da der Bildwechsel scriptgestützt transparent abläuft.

Was Suchmaschinen angeht, maßgeblich ist in Wirklichkeit ohnehin nur Google, und das hält sich recht brav an den Metatag "robots" und wenn Du Dir den Quelltext ansiehst - sobald Du Dich auf einer "Unter"-Seite, also einer Seite mit GET-Parameter befindest, wird der Metatag "robots" automatisch auf "noindex, nofollow" gesetzt.
Damit verhindert man, dass Google diese Seite indiziert. Indiziert wird nur die Seite ohne GET-Parameter.

Die URLs sind also nicht Dein Problem, aktiviere JavaScript und die Sache hat sich. Dein Problem ist das Stylesheet des Templates, der Selektor #left UL LI A:hover {} des Stylesheets layout.css bringt den InternetExplorer 7 nämlich dazu, alle Bilder der Galerie beim Überfahren des Hauptmenüs in der linken Spalte einfach auszublenden.

Gruß
Andreas
Very Simple Image Gallery Vers. 1.5.3
5 Sunday, 10 January 2010 13:00
Marco
Hallo Andreas,

hat sich für das Problem bei Desmond schon eine Lösung gefunden bezüglich der Joomla SEF -> Links? Wenn ich auf die Bilder in der Gallerie klicke habe ich leider keine Suchmaschinenoptimierten Links. Siehe auf http://www.heilpraktiker-rach.de/praxisraeume und dann einfach mal auf die Bilder klicken. Desmond schilderte Anfang Dezember das gleiche Problem. Zitat: "The Second problem is all the gallery URL doesn't work with the joomla default SEF/SEO. Photo url come with .html?&vsig5_0=0"
@Desmond
4 Saturday, 05 December 2009 14:07
A. Berger
Hi Desmond!

Could you please provide a link to the page? I will have a look at it.

Best regards
Andreas
Got problem with joomla SEF and javascript setting
3 Friday, 04 December 2009 12:11
Desmond
using plugin_vsig_1.5.1 but facing two problem,
First problem, it doesn't goto next set for multiple sets. I manage to get it to work if I set "NO" at Other settings -> Use JavaScript?

The Second problem is all the gallery URL doesn't work with the joomla default SEF/SEO. Photo url come with .html?&vsig5_0=0
English
Panoramic Image Viewer
AddThis Social Bookmark Button
Who's Online
We have 37 guests online
Latest Items