Very Simple Image Gallery Plugin Beispiel01
Geschrieben von: Andreas Berger   
Montag, den 23. November 2009 um 19:10 Uhr

 

Die angezeigte Galerie entspricht im wesentlichen den Default-Einstellungen nach Installation des Plugins. Angepasst sind lediglich die Breite der Galerie, die Abmessungen der Thumbnails und der Platz zwischen den Thumbnails.

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

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=0
  • 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{/vsig*} - (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:31 Uhr
 
Kommentare (26)
Watermark
26 Samstag, den 07. Januar 2012 um 12:02 Uhr
Jana

Just installed your gallery on my site and it's just awesome. Very easy to use and customise. I was also wondering, is there any way to add a simple watermark to protect my pictures?

Thanks a bunch

@Jana
Mittwoch, den 11. Januar 2012 um 16:00 Uhr
A. Berger

Hi Jana!

No, this feature is not part of the plugin and the fact, that the option "Link original image?" allows to link the original, would render it pretty useless. Of course it is possible to add the watermark before uploading the images.

Best regards
Andreas

Slider
25 Dienstag, den 06. Dezember 2011 um 11:28 Uhr
Johan

Dear,

This is a great plugin, i have one question. On active thumbs i want to punt a red border.
With a:active is won't work. Can you help me?

Thanks!

@Johan
Dienstag, den 06. Dezember 2011 um 22:20 Uhr
A. Berger

Hi Johan!

You find the stylesheet of the plugin at /plugins/content/plugin_vsig/vsig.css (Joomla!1.5). The selectors that set the characteristics of the thumbnails are .vsig_thumb {} and .vsig_thumb img {}.

Best regards
Andreas

Sets
24 Samstag, den 19. November 2011 um 09:42 Uhr
Jeanette

Hallöchen,

gibt es eine Möglichkeit die Sets unterhalb der Thumbnails anzuordnen und diese als Aufzählung darzustellen? Anbei ein Link, wie ich es gerne hätte www.axelheimken.de/index.php?id=24. Dabei habe ich die Thumbs auf der rechten Seite angeordnet. Leider habe ich keine Ahnung von css oder Ähnlichem. Ich hoffe, mir kann man helfen. Vielen Dank und Grüße

Danke
Dienstag, den 29. November 2011 um 07:48 Uhr
Jeanette

Danke für die Antwort. Grüße

@Jeanette
Sonntag, den 20. November 2011 um 21:39 Uhr
A. Berger

Hallo Jeanette!

Nein, das ist mit diesem Plugin nicht möglich.

Gruß
Andreas

Border colour/background colour
23 Montag, den 31. Oktober 2011 um 14:58 Uhr
Rob

I see some references to being able to change the background color so that the border does not show up, but I am stuck as to how to do that. Please could you advise how I make the border disappear by changing the background color. Many thanks!

@Rob
Mittwoch, den 02. November 2011 um 21:23 Uhr
A. Berger

Hi Rob!

Open the stylesheet of the plugin (/plugins/content/plugin_vsig/vsig.css - Joomla!1.5) with a text editor. The selector .vsig_top img {} sets the color of the border (border:1px solid #ccc !important;) and the background (background:#fff !important;) of the main image. Change the colors to the value of your page-background and they will "disappear". The selector .vsig_thumb img {} contains the same settings for the thumbnails.

Best regards
Andreas

Great
22 Mittwoch, den 30. März 2011 um 10:16 Uhr
Rappe Rinus

First of all, this is a great plugin. Easy but superb! I have only one problem with the quality of the images. This quality is not very high when they are published in de Very Simple Image Gallery. The quality without using the Very Simple Image Gallery is good. I have set the quality by Very Simple Image Gallery already at 100. Any suggestions? I use Photoshop.

Best regards,
Rappe Rinus

@Rappe Rinus
Mittwoch, den 30. März 2011 um 20:24 Uhr
A. Berger

Hi Rinus!

There is always a loss of quality when imges get scaled by the GD library. In general: The better the original, the better the scaled image. Therefore I would try to scale the images offline to a size near the size they get displayed online and improve the quality as much as possible (with Photoshop you have almost all possibilities to do so) before uploading them. If this does not deliver the results you are expecting, you could give another image file format a try (switch from JPG to PNG or vice versa).
About the image quality setting in the backend of the plugin, I would set the quality of the main images to 95% percent (100% does not deliver much better results but - my experience - much larger files).

Best regards
Andreas

Thumbnails
21 Dienstag, den 08. Februar 2011 um 15:43 Uhr
Chris

When showing a gallery, how do I omit the thumbnail of the image being shown?

@Chris
Dienstag, den 08. Februar 2011 um 21:16 Uhr
A. Berger

Hi Chris!

A clean and continuous solution would require a heavy patch of the plugin (vsig.php and vsig.js). Anyway, a very limited quick&dirty patch would be to modify line 395 of /plugins/content/vsig.php.

original:
if(!$_sets_use_||($a>=($_sets_use_*$_sets_current_-$_sets_use_)&&$a=2)){

patch:
if(($images[$a]['filename']!=$images[$aktimg]['filename'])&&(!$_sets_use_||($a>=($_sets_use_*$_sets_current_-$_sets_use_)&&$a=2))){

This prevent the thumb that belongs to the main image on page load from getting displayed. Anyway, there are limitation: no sets; no alignment "below-justified"; ... maybe others I haven't thought of. :)

Best regards
Andreas

Thumbnails
20 Mittwoch, den 19. Januar 2011 um 05:52 Uhr
Fancy404

Hello, thanks for the plugin its great.  Although I'm having one problem.  My thumbs are lining up vertically under the big main pic instead of from left to right horizontal.
How do I fix this?

Thx

@Fancy404
Mittwoch, den 19. Januar 2011 um 21:50 Uhr
A. Berger

Hi Fancy404!

This happens if you have set the thumbnails to show right of the main image without setting anappropriate amount of space (percent) for them to show up (if so, change the thumbs to show "below" or "below - justified" the main image) or if your template does not allow the plugin to link the stylesheet "/plugins/content/plugins_vsig/vsig.css" (J!1.5) from the HEAD of the page (if so, find the code in your template that prevents the stylesheet from getting linked and modify it.

If you could post a link to the page, I will have a look at it.

Best regards
Andreas

Next
19 Dienstag, den 30. November 2010 um 18:00 Uhr
Anna

Hi there,

It is a really simple plugin, hardly anything needs to be done, and I am very happy I have used this plugin. One of the question I may have is ...is there way I can add "next" tab on the right side of the image, which become an easier way for the user to navigator other than click the pic below as an option?

Thank you very much,
~anna

@Anna
Dienstag, den 30. November 2010 um 21:14 Uhr
A. Berger

Hi Anna!

Up till now there is only a set2set navigation. You may (ab)use it by setting the number of images in a set to 1 in which case there are no thumbnails shown and the arrows switch image by image. An explicit image2image navigation is - up till now - not available.

Best regards
Andreas

Не працює Very Simple Image Gallery Plugin
18 Dienstag, den 16. November 2010 um 22:32 Uhr
Сергій

Привіт, я новачок, і маю проблему, дана галерея в мене не працює. В описі ніби все чітко вказано, ніби й все так і прописав, але не працює(((

Вибиває:

Зверху вибиває сторінки
* JFolder::create: Could not create directory
* JFolder::create: Could not create directory
* JFolder::create: Could not create directory
* JFolder::create: Could not create directory

А там де сам компонент: Failed creating thumbnail directory /home/kuhonika/public_html/images/stories/fotokuhni/vsig_thumbs/Failed creating image directory /home/kuhonika/public_html/images/stories/fotokuhni/vsig_images/

Що робити, як мені все вірно налаштувати???


Буду вдячний, якщо відпишете на мейл: serghuk AT gmail DOT com
Я пробував ставити на свій сайт:
www.kuhonika.com.ua

@Сергій
Mittwoch, den 17. November 2010 um 20:56 Uhr
A. Berger

Hi Сергій!

The Errors on your page indicate that the plugin has not the necessary rights to create directories on your server - i.e. there is a problem with the directory permissions.
To solve this problem, first check the current directory permissions: Joomla! backend > Help > System Info > Directory permissons. Everything should be green (writable) there. If it isn't - please change the permission (e.g. using an ftp-client).
If everything looks fine and the error persists, check the settings you used to configure the Joomla! FTP layer: Joomla! backend > Site > Global Configuration > Server > FTP. Maybe the easiest way is to just deactivate it. If this doesn't help or leads to other problems, maybe you want to have a look at this Howto at forum.joomla.org in the article of the user Degira:


http://forum.joomla.org/viewtopic.php?f=431&t=314112&p=1382452#p1382452

Best regards
Andreas

Main image without a border
17 Dienstag, den 02. November 2010 um 01:04 Uhr
Demonike

Hi, thank you for your wonderful work!

In my configuration, I'm using the VSIG main image without the border and padding. My problem is, though the Gallery width is set exactly to 513, the images generated are all 501px wide. I cannot find the place to adjust the algorithm so that it takes into account the missing padding and border (ie, does not generate lsightly narrower main images).
I got all the CSS sorted out already and looked around in plugins > content > plugin_vsig, could spot the place where this is determined.

Thanks again.

@Demonike
Dienstag, den 16. November 2010 um 22:24 Uhr
A. Berger

Hi Demonike!

The file to patch is /plugins/content/vsig.php (Joomla! 1.5.x). Calculations (image size, paddings, etc.) are done starting about line 190, the CSS is generated from line 220 to 234.

Best regards
Andreas

Size matters
Dienstag, den 16. November 2010 um 17:58 Uhr
Demonike

I would like to physically remove the border (not change the border color), because the big image to fill the whole width of the content area (currently there would be 6px from both sides inset, since the border + padding). That is why my peculiar dimensions 513px wide exactly (I have all other images in content areas this width - I would like them to be uniform).

I have no problem with patcing, if you would tell me in which file :)

Thank you for your time!

@Demonike
Dienstag, den 02. November 2010 um 22:08 Uhr
A. Berger

Hi Demonike!

First, check if you have set the thumbs to show "below" the main image or "below-justified". If it is the latter, the plugin may reduce the size of the main images to compensate missing pixels from the calulation of the thumb-size and the space between the thumbs (there are only integer pixels :)).

Second, the hard way would be to patch the plugin to deliver always the exact image size you have set in the backend - taking into account your CSS.
The pragmatic way would be to configure the gallery the way you want it to be - and reupload your image with exactly the needed size. ( Why patch the plugin to remove border/padding if it's a lot easier to set the to the background color?)

Best regards
Andreas

Deutsch
Panoramic Image Viewer
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 45 Gäste online