Home Joomla Very Simple Image Gallery - Howto Plugin Code
Main Menu
Most Read
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

If you like the products on these pages, your support is highly appreciated. Thank you very much!

Amount: 

Latest Items
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
Very Simple Image Gallery Plugin Usage - Code
Written by Andreas Berger   
Sunday, 21 June 2009 06:35

A survey of the possibilities to call, extend and modify galleries with the code in the content item.

The "Very Simple Image Gallery" Plugin is called from within the content item. The code used offers - beside of setting the folder with the images - additional possibilities to enhance and arrange the gallery.

 

A.) Gallery

The code consists of the call {*vsig}{/vsig*} (without the asterisks) and contains the name of the folder with your images. The configured path to this folder (image root, by default "/images/stories" in Joomla!1.5 or "/images/" in Joomla!1.6/1.7) is added by the plugin automatically and must not be inserted.

The complete call in our sample would look such as:

{*vsig}verysimple{/vsig*} - without the asterisks

To use a folder within a folder, the path below the set root folder is used, e. g. to use the folder /images/stories/folder/subfolder" the call in Joomla!1.5 would look such as:

{*vsig}folder/subfolder{/vsig*} - without the asterisks

In general that´s it and the gallery is ready to go.


 


B.) Parameter Overrides

Starting with version 1.3.0 the "Very Simple Image Gallery" offers the possibility to change almost every default setting from the backend whilst calling the plugin within the content item. With this feature it is possible to use different settings for every single gallery. One may change the position of the thumbnails, the width of the gallery, if to show captions and/or links and so on.

To achieve this, the call of the plugin gets extended by the needed parameters. They are separated from the folder name and from each other by vertical bars (|). The have the syntax PARAMETER=VALUE:

List of possible parameters:

width - width of the whole gallery in pixel (integer) e.g.: 600

height - maximum height of the images set in pixel; possible values: empty (use full width), (integer) e.g.: 300

imquality - quality of images in percent (integer from 1-100) e.g.: 90

align - align the gallery within the content item; possible values: 0 (right), 1 (center), 2 (left), 3 (float left), 4 (float right)

twidth
- width of thumbnails in pixel (integer) e.g.: 80

theight - height of thumbnails in pixel (integer) e.g.: 60

crop - scale thumbnails keeping proportions or cropped; possible values: keep (proportional), crop (crop)

quality - quality of thumbnails in percent (integer from 1-100) e.g.: 80

space - space between thumbnails in pixel (integer) e.g.: 3

right - position of thumbnails; possible values: 0 (below), 1 (right), 2 (below and justified)

area - no longer used (version 1.6.5)

cols - thumbnail columns left/right of main image (integer) e.g.: 2

sort - images sort order; possible values: 0 (A-Z - DEFAULT), 1 (Z-A), 2 (old-new), 3 (new-old), 4 (random)

sets - number of thumbnails to show per set; possible values "empty" (all images), any integer

setstxt - label for sets (refer to Plugin Howto)

cfwd - value for control-element "next"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto)

cbwd - value for control-element "prev"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto)

caps - show captions; possible values: 0 (no), 1 (yes)

inout - position of captions; possible values: 0 (below the main image), 1 (blended over the main image)

links - show links; possible values: 0 (no), 1 (yes)

autolink - link the main image to the original image file; possible values: 0 (no), 1 (yes)

script - use JavaScript? possible values: 0 (no), 1 (yes)

hover - switch the main image onhover thumb; possible values: 0 (no), 1 (yes)

preload - preload images and thumbnails; possible values: 0 (no), 1 (yes)

tooltip - use the image file name for ALT/TITLE; possible values: 0 (no), 1 (yes)

folderid - use folder name as identity of the top div-container; possible values: 0 (no), 1 (yes)



Samples:

{*vsig}verysimple|width=600|right=2{/vsig*} - without the asterisks
Regardless of the settings in the backend, this gallery is shown with a width of 600 pixel (width=600). The thumbnails are below the main image and get justified to the right border of the main image (right=2)

{*vsig}verysimple|width=600|right=1|cols=2{/vsig*} - without the asterisks
Width 600 pixel (width=600), thumbnails right (right=1), in two columns (cols=2)

{*vsig}verysimple|twidth=80|theight=60|space=3|quality=80{/vsig*} - without the asterisks
Thumbnails are 80 pixel of width (twidth=80), 60 pixel of height (theight=60), there is 3 pixel space between them (space=3) and they are generated with 80% of the possible quality (quality=80)

Notice:

The parameters listed here correspond with the parameters in the plugins configuration panel. Find a details description at: Howto Plugin .
The first parameter of the initial call always has to be the folder name (path). The sorting of the other parameters is arbitrarily.




C.) Captions

Captions and text have there own call. It´s:

{*vsig_c}gallery-number|imagefile|caption|text{/vsig_c*} - without the asterisks

Gallery-number:
The galleries within one content item are numbered automatically by the plugin according their appearance in the article starting with 0.
This setting is obligatory.

Imagefile:
The exact name of the file "myimage.jpg".
Left empty, the call is used as default for the whole gallery. This means, if there is no setting for an image, this one is used.

Caption:
The Caption. If left empty . . . no caption is shown.

Text:
The additional text below the caption. If left empty . . . no text is shown.

Samples:

{*vsig_c}0||myTitel|myText{/vsig_c*} - without the asterisks
This call sets "myTitel" and "myText" as the default values for the first gallery within the current content item by leaving the imagefile-value empty.
Notice: You don´t have to set a Default. If you don´t and there is no setting for an image, just nothing is shown.

{*vsig_c}1|pic01.png||myText{/vsig_c*} - without the asterisks
pic01.png of the second gallery in the content item has no caption but the text "myText"

{*vsig_c}0|pic02.png||{/vsig_c*} -without the asterisks
pic02.png in the first gallery shows no caption and no text although there is a default. The explicit setting overrides it.

{*vsig_c}0|pic05.jpg|myTitelA|myTextA{/vsig_c*} - without the asterisks
{*vsig_c}0|pic06.jpg|myTitelB|myTextB{/vsig_c*} - without the asterisks
{*vsig_c}0|pic07.jpg|myTitelC|myTextC{/vsig_c*} - without the asterisks
{*vsig_c}0|pic08.jpg|myTitelD|myTextD{/vsig_c*} - without the asterisks . . . and so on

Notice:
If you don't want to show captions, you may use them to set the attributes "alt" and "title" of your images. If the plugin finds a set caption for an image, it uses the title-line for ALT/TITLE of the image even when captions are not activated.

It is of no importance where within your content item and in which order your setting are.
The number of parameters has always to be 4. This means, a call always must contain 3 vertical bars, even if a setting is empty (e.g. the image file).
These vertical bars are protected characters within the calls and may not be used within your values.




D.) Links

If we want to link the images of our gallery, there is a third call to do so:

{*vsig_l}gallery-number|imagefile|URL|titel|target{/vsig_l*} - without the asterisks

Gallery-number:
The galleries within one content item are numbered automatically by the plugin according their appearance in the article starting with 0.
This setting is obligatory.

Imagefile:
The exact name of the file "myimage.jpg".
Left empty, the call is used as default for the whole gallery. This means, if there is no setting for an image, this one is used.

URL:
The URL you want to link the image with. e.g.: http://www.bretteleben.de

Titel:
The titel, shown when the mouse is over the image. e.g.: bretteleben.de

target:
The window, you want to open the linked URL. e.g.: _blank (new window), _self (same window)

Samples:

{*vsig_l}0||http://www.bretteleben.de|bretteleben.de|_blank{/vsig_l*} - without the asterisks
This call sets a default link for the first gallery within the current content item by leaving the value for the image file empty. The link opens in a new window.

{*vsig_l}1|pic01.png|http://www.disney.com|Disney|_self{/vsig_l*} - without the asterisks
pic01.png in the second gallery within the content item is linked to www.disney.com. The link opens in the current window.

{*vsig_l}0|pic02.png|||{/vsig_l*} -without the asterisks
We don´t want pic02.png in the first gallery within the content item to be linked. A special case, because as soon as we have links within a gallery, every image gets linked. Setting this empty call the image is linked to the current page, without any further setting.

{*vsig_l}0|pica.jpg|http://www.my.domain.com/myGreatProduct1|greatProduct1|_self{/vsig_l*} - without the asterisks
{*vsig_l}0|picb.jpg|http://www.my.domain.com/myGreatProduct2|greatProduct2|_self{/vsig_l*} - without the asterisks
{*vsig_l}0|picc.jpg|http://www.my.domain.com/myGreatProduct3|greatProduct3|_self{/vsig_l*} - without the asterisks
{*vsig_l}0|picd.jpg|http://www.my.domain.com/myGreatProduct4|greatProduct4|_self{/vsig_l*} - without the asterisks ... and so on

Notice:
It is of no importance where within your content item and in which order your setting are.
The number of parameters has always to be 5. This means, a call always must contain 4 vertical bars, even if a setting is empty (e.g. the imagefile).
These vertical bars are protected characters within the calls and may not be used within your values.


If you have questions or suggestions, please use the comment-function. Please include the installed Joomla! version and if you have problems - if any possible - the affected page in your comment.

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).

If you use this extensions, please post a rating and a review at extensions.joomla.org.

Last Updated on Thursday, 20 October 2011 21:20
 
Comments (33)
Caption Help
13 Thursday, 16 June 2011 00:07
Conor

Hi, excellent plug-in, very user friendly and your guide to installing/managing the plug-in is fantastic.

The problem i have is the caption is only showing on the first image, and not the rest. The code i have is:
{vsig*}testimonial_images{/vsig*}
{vsig_c*}0|aylaedited.jpg|Ayla, Winchmore Hill{/vsig_c*}
{vsig_c*}1|fathumedited.jpg|Fathum, Enfield{/vsig_c*}
{vsig_c*}2|lizelleedited.jpg|Lizelle, Tottenham{/vsig_c*}
{vsig_c*}3|natashaedited.jpg|Natasha, Barnet{/vsig_c*}
{vsig_c*}4|rehanaedited.jpg|Rehana, Edmonton{/vsig_c*}
{vsig_c*}5|theoedited.jpg|Theo, Edmonton{/vsig_c*}
{vsig_c*}6|zaimedited.jpg|Zaim, Edmonton{/vsig_c*}

All without the asterisk.
The images are all named and numbered correctly and they are also under the same file name in the gallery folder ("testimonial_images") which is wrapped between my {vsig*}{/vsig*} codes.

So, any help?

@Conor
Thursday, 16 June 2011 21:07
A. Berger

Hi Conor!

The first parameter of the code for captions is not the number of the image within the gallery but the number of the gallery within the article. The respective image gets determined by the file name. Change your code to:

{vsig*}testimonial_images{/vsig*}
{vsig_c*}0|aylaedited.jpg|Ayla, Winchmore Hill|{/vsig_c*}
{vsig_c*}0|fathumedited.jpg|Fathum, Enfield|{/vsig_c*}
{vsig_c*}0|lizelleedited.jpg|Lizelle, Tottenham|{/vsig_c*}
{vsig_c*}0|natashaedited.jpg|Natasha, Barnet|{/vsig_c*}
{vsig_c*}0|rehanaedited.jpg|Rehana, Edmonton|{/vsig_c*}
{vsig_c*}0|theoedited.jpg|Theo, Edmonton|{/vsig_c*}
{vsig_c*}0|zaimedited.jpg|Zaim, Edmonton|{/vsig_c*} ... again without the asterisks

... and the captions will work fine. In addition, add the third vertical bar even when omitting the text line.

Best regards
Andreas

Gallery Caption & Title - Multiple Photos
12 Sunday, 12 June 2011 17:30
De

Hello. In setting up the first gallery on the page, I've done the following, but it only shows Caption and Text for the first image.  Did I miss something?  (I have omitted the *'s)

{*vsig}PhotoGallery/FUNdraiserJune2011{/vsig*}
{*vsig_c}0|doggies938.jpg|Dixie|Dixie yawning outside on a sunny day.{/vsig_c*}
{*vsig_c}0|img00237-20101219-2128_120_90_80.jpg|Bella|Bella in my basket.{/vsig_c*}

Thanks!

http://www.foccas-sc.org/index.php?option=com_content&view=article&id=57%3Aphoto-gallery&catid=36&Itemid=59

@De
Tuesday, 14 June 2011 21:47
A. Berger

Hi De!

1.) You posted the following code and told me that the captions are not showing:
{*vsig}PhotoGallery/FUNdraiserJune2011{/vsig*}
{*vsig_c}0|doggies938.jpg|Dixie|Dixie yawning outside on a sunny day.{/vsig_c*}
{*vsig_c}0|img00237-20101219-2128_120_90_80.jpg|Bella|Bella in my basket.{/vsig_c*}

2.) You posted the following link which - at least I assume this from the context - shows the respective gallery:
http://www.foccas-sc.org/index.php?option=com_content&view=article&id=57%3Aphoto-gallery&catid=36&Itemid=59

3.) I read the code, visited the page, checked to page source and can tell you - this time a little more in detail - the following:

The source of the page shows that the plugin finds 5 images in the folder "/images/stories/PhotoGallery/FUNdraiserJune2011/":
100_0444.jpg, 100_0445.jpg, 100_0446.jpg, 100_0448.jpg and 100_0449.jpg.

This means:
Because there is no image file called "doggies938.jpg" (refer to the code you posted) in the folder "/images/stories/PhotoGallery/FUNdraiserJune2011/", the plugin is not able to show the caption you set for the image "doggies938.jpg" in this gallery.

This means further:
Because there is no image file called "img00237-20101219-2128_120_90_80.jpg" (refer to the code you posted) in the folder "/images/stories/PhotoGallery/FUNdraiserJune2011/", the plugin is not able to show the caption you set for the image "img00237-20101219-2128_120_90_80.jpg" in this gallery.

In general:
The plugin shows a caption only if the image you specify in the code for the caption (e.g. doggies938.jpg) is found in the folder the respective gallery shows.

Your sample:
In the current gallery that shows the images in the folder "/images/stories/PhotoGallery/FUNdraiserJune2011/", you are able to set captions for the images "100_0444.jpg, 100_0445.jpg, 100_0446.jpg, 100_0448.jpg and 100_0449.jpg" because they EXIST in this folder. :)

Best regards
Andreas

Lost
Tuesday, 14 June 2011 12:17
De

Thanks for the quick reply!  But I'm still lost? What do you mean they are not in a gallery?  They are in their own directory and I've used "0" to call it since it's the first?  Sorry, just confused.

Yes, I agree. Numbering the pics will simplify things.  This was just a test so I didn't bother with it!

Thanks.

@De
Monday, 13 June 2011 20:47
A. Berger

Hi De!

What you are missing is the fact that neither the first nor the second image is part of the gallery.
Btw.: Have you ever thought about the possibility to rename your images to 01.jpg, 02.jpg, 03.jpg ... and so on? Makes live a lot easier, believe me. :)

Best regards
Andreas

auto-link(link original image) function doesn't open new window
11 Monday, 30 May 2011 21:41
Marco

In trying to get the auto-link function to work but I ran into a problem.
When I enable the function, the big image is clickable but it is sending the page up placing the image in top of the window. It doesn't open a new window.
It places this code behind the URL in the address bar: "#g_vsig24_0"
Do you have any idea what goed wrong?
Is it possible to open lightbox bij clicking the large image?

@Marco
Monday, 30 May 2011 22:02
A. Berger

Hi Marco!

If the images link to the anchor at the top of the main image, the option "autolink" is not enabled. If you enabled it in the backend, please make sure you (completely) cleared the Joomla! cache.

About a lightbox: Of course you can patch the plugin to include such a feature, it is GPL licensed which means that you have the right to modify it to fit your needs. An integrated modal window is not part of this plugin and will not become part of this this plugin. I don't like modal windows and according to the fact that about 95% of the extensions listed in the category "Photos & Images" at extensions.joomla.org come with some kind of lightbox, greybox, fatbox, thinbox I am confident that my decision will not cause a shortage in available whatever-boxes :)

Best regards
Andreas

Überschriten und Text an rechte Postion?
10 Monday, 23 May 2011 21:06
silvana

Hallo Andreas,

erstmal danke für die Galerie, sie funktioniert :-)
Meine Frage? Ist es Möglich den Text auch rechts in eine andere Zeile zu positionieren?

Viele Grüße
Silvana

@Silvana
Tuesday, 24 May 2011 21:23
A. Berger

Hallo Silvana!

ad1: Ja, ich weiß, ich hab' sie ausprobiert. ;)
ad2: Könntest Du ein wenig genauer beschreiben wie weit rechts "rechts" ist (in Relation zu den Elementen der Galerie) und wo die "andere Zeile" ist?

Gruß
Andreas

error message
9 Monday, 23 May 2011 18:50
diltex a la medida

I am getting an error message that reads:

Warning: imagecolorsforindex() [function.imagecolorsforindex]: Color index 255 out of range in /home3/diltexal/public_html/plugins/content/plugin_vsig/vsighelper.php on line 178

What does this mean?
Thank you

@diltex a la medida
Monday, 23 May 2011 20:11
A. Berrger

Hi diltex a la medida!

It's the first time this error gets reported but a quick search with Google came up with hints that this can happen when the transparent color of an image has the index 255. Could you trim down the problem to a certain image and send me this image by email or post a link to the page plus a list of the images in the folder?

Best regards
Andreas

source images from www???
8 Monday, 16 May 2011 09:51
Marcel

Hi, thank you for very nice plugin, i have only one question. Is that any possibility how can i use external images to view in VSIG? i mean list of pictures from webcams in original and thumbnail size. May be a wrong question, but thank you for every response. Marcel

@Marcel
Tuesday, 17 May 2011 19:36
A. Berger

Hi Marcel!

No, the Very Simple Image Gallery works with images within your Joomla! root only. Maybe you want to have a look at the category Photos & Images at extensions.joomla.org, I am sure there are extensions that allow to show external images too.

Best regards
Andreas

Sort Order - Simple Picture Slideshow Version: 1.5.3
7 Wednesday, 04 May 2011 17:13
Leo Park

Hi,

fantastic plug in. I have one question / suggestion for future development: -
Is it possible to have a random start, but then ordered images. Our slide show works best when in a set order, but that means everybody sees image 1 first every time. It would be great if we could have an ordered slide show but start at a random point?

All the best,
Leo Park


 

Sort Order - Simple Picture Slideshow Version: 1.5.3
Friday, 06 May 2011 12:57
Leo Park

Hi Andreas,

thank you for your quick reply! For now we are using random as we have quite a lot of images in the show and we would like our website visitors to see different images on each visit (rather than the first few of a large set). We just discussed that our slideshow would play out just that little bit better when ordered more as a cycling "story". I will keep having a quick look back here from time to time, just in case you decide to add this as a feature, and also to be nosey and see what else you have been working on!

Anyway, thanks again for a really great plug in.
Leo

@Leo Park
Wednesday, 04 May 2011 20:56
A. Berger

Hi Leo!

At the moment it is possible to display the images sorted (alphabetically up/down, change date up/down) OR random. There is no combination of these settings and I confess that up till now I haven't planned such a feature. Anyway, I will think about it.

Best regards
Andreas

text link to gallery
6 Tuesday, 26 April 2011 00:00
peter

its possible to make a view photos link without thumbnails? only show a text with a link to a gallery

@peter
Tuesday, 26 April 2011 20:20
A. Berger

Hi peter!

No, not within the same article because the plugin comes without a modal window. Of course it is possible to create a text-link to another article that holds the gallery. :)

Best regards
Andreas

Links not working
5 Friday, 22 April 2011 14:27
Glyn

Hi Andreas

Just installed your plug in and very impressed, particularly with its design flexibility and ability to override the CSS styling. The only problem I have is links. I am using the hover option to switch the top image and would like the user to be able to click a thumbnail to go to a different page.

I have inserted this code into my Joomla article :
{*vsig}vsiggallery|width=690|height=420{/vsig*}
{*vsig_c}0|_DSC1294.jpg||A splendid April view of St Giles local parish church{/vsig_c*}
{*vsig_c}0|_DSC1296.jpg||Another splendid April, photo by Glyn Thomas{/vsig_c*}
{*vsig_c}0|_DSC1298.jpg||The nearby barn{/vsig_c*}
{*vsig_c}0|_DSC1299.jpg||The Old Rectory, now a private dwelling house{/vsig_c*}
{*vsig_l}0|_DSC1294.jpg|http://www.google.co.uk|Google|_self{/vsig_l*}

The captions work and gallery work fine. The link displays the title 'Google' over the correct thumbnail but clicking it does nothing.
If I view the underlying source code of the page, it is generating : [code]

My apologies if I am overlooking something obvious (only got VSIG this morning)!
Joomla is v 1.5.21 and I have tried it in both Firefox and Safari with the same result.

Thanks for your help.
Glyn Thomas

@Glyn
Monday, 25 April 2011 14:20
A. Berger

Hi Glyn!

You are not overlooking something, the plugin just doesn't work this way. It is always linking the main image, not the thumbnail. If you want the links attached to the thumbnails, you may want to have a look at the CSS Gallery (link in the menu at the left), it works this way: The links are attached to the thumbnails.

Best regards
Andreas

Removal of borders
4 Wednesday, 20 April 2011 15:24
Andrew Hulbert

Hi There,

Would it be possible to remove the borders that the gallery creates? is there an override for this?

many thanks,
Andy

P.S Really nice plugin :)

@Andrew Hulbert
Wednesday, 20 April 2011 21:06
A. Berger

Hi Andy!

Instead of removing them (which could puzzle the internal calculations of the plugin) I would set them to the background color of the page. You can achieve this by modifying the stylesheet of the plugin.

Open the stylesheet /plugins/content/plugin_vsig/vsig.css. In line 11 you find the selector .vsig_top img {}, here you can set the color of the - by default gray – border around, and the – by default white – background of the main image. In line 14 you find the selector .vsig_thumb img {}, here you can make the same modifications for the thumbnails.

Best regards
Andreas

Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135
English
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Who's Online
We have 54 guests online