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)
Captions not working
23 Sunday, 04 December 2011 02:43
Jessica

Hi, Great Plugin!

Installed this on 1.7, and everything is working great, but I am having issues with the Captions, they won't show up.
Location on Website: promontory.cloudaccess.net/home-builder/homes.html

Show Captions: Yes
{*vsig_c}0|IMG_0379|Downes Road., Abbotsford|dfgdfh{/vsig_c*}
{*vsig_c}0|IMGP0707|Carnarvon Street.,Abbotsford|{/vsig_c*}

What is wrong ?

@Jessica
Monday, 05 December 2011 21:30
A. Berger

Hi Jessica!

The second parameter is the image file name WITH the suffix:

{*vsig_c}0|IMG_0379.jpg|Downes Road., Abbotsford|dfgdfh{/vsig_c*}
{*vsig_c}0|IMGP0707.jpg|Carnarvon Street.,Abbotsford|{/vsig_c*} ... without the asterisks

Best regards
Andreas

Links auch für Thumbsnail?
22 Tuesday, 29 November 2011 13:03
Dagmar

Hallo Andreas,

Gratulation für die Galerie - sie ist wunderbar einsetzbar und ganz toll. Ich hätte nur eine Frage:

Ich möchte die Bilder verlinken, was mit Deiner Angabe ja eigentlich auch kein Problem darstellt. Allerdings möchte ich, dass der Link nicht nur vom großen Bild funktioniert, sondern bereits schon von den Thumbsnails weg. Ist das möglich und habe ich da nur eine falsche Einstellung getroffen oder bietet die Galerie diese Möglichkeit noch nicht?

Vielen Dank für Deine Hilfe.

Liebe Grüße
Dagmar

Danke
Wednesday, 30 November 2011 09:18
Dagmar

Danke für die schnelle Antwort - werd mich gleich in der CSS Galerie umsehen! Super

LG
Dagmar

@Dagmar
Tuesday, 29 November 2011 22:16
A. Berger

Hallo Dagmar!

Nein, das ist nicht möglich. Mit dem Aktivieren der Option "Switch on hover thumb" ist es zwar bei aktiviertem JavaScript nicht mehr nötig, das Thumbnail anzuklicken um das Hauptbild zu wechseln, trotzdem bleibt das die primäre Nutzung des Links am Thumbnail. Für eine externe Verlinkung steht er nicht zur Verfügung.
Wenn Du das unbedingt brauchst, dann könntest Du Dir die "CSS Gallery" ansehen (Link im Menü links), die ohne JavaScript nur mit CSS funktioniert und wo das nicht nur möglich sondern die vorgesehene Einstellung ist. Dafür hat dieses Plugin aber andere Einschränkungen.

Gruß
Andreas

Strange Autolink
21 Friday, 18 November 2011 18:32
Ayprille

Hello!  What a wonderful plugin.  I am very happy with it.  Today, though, I am seeing some strange behavior with the autolink function.  Autolink is turned on, but only some of the images in my gallery have links to their original image.

Article is here: www.vividmotion.org/press-releases/105-nb11-press (only the two right-hand photos in the thumbnail set have links that point to their source photos)
My Joomla configuration is set to Cache = OFF
Autolinking is working normally on other articles on my website: www.vividmotion.org/show-gallery/86-ss10
I have not set any override parameters in the {vsig} code on the article.
Any insight you can offer into why this is happening would be very useful.

Thank you,
~Ayprille

Thank you!
Monday, 21 November 2011 15:52
Ayprille

Hi Andreas,

There were no specific links for the photos in the article, but there *were* capital letters in the filenames.  Changing those to lower case fxed my issue.  Thank you very much.  I really, really like your plugin.

Regards,
~Ayprille

@Ayprille
Sunday, 20 November 2011 21:50
A. Berger

Hi Ayprille!

Please check if:
There is a specific link set for these images in the article. If so, remove it.
The image files have an uppercase suffix (JPG, PNG, GIF). If so, change it to lowercase (jpg, png, gif). A bug to fix in the next version.

Best regards
Andreas

captions not functioning in vsig
20 Friday, 11 November 2011 17:49
Edze de Boer

Hi guys,

Very nice plugin, thank you!

However, I can't manage to activate the caption/text for the images.

location on the website: http://www.040uit.nl/index.php?option=com_content&view=article&catid=3:cafes&id=449:cafe-wilhelmina&Itemid=41
Joomla 1.5.23
image root: images/website/
folder for images for this article: images/website/vsig_wilhelmina_01/

Show Captions: Yes
Position of Captions: Inside

in article:
{*vsig}vsig_wilhelmina_01{/vsig*}
{*vsig_c}0|vsig_wilhelmina_01/benjamin_hermans_800.jpg|Benjamin Hermans{/vsig_c*}
{*vsig_c}0|vsig_wilhelmina_01/connie_lush_800.jpg|Connie Lush{/vsig_c*}

the gallery is working fine, but the captions/texts don't show.
What is wrong here?

Kind regards,
Edze de Boer

@Edze de Boer
Sunday, 13 November 2011 21:41
A. Berger

Hi Edze!

The second parameter is just the image file name, no path (this is already set within the initial call).
Give this a try:

{*vsig}vsig_wilhelmina_01{/vsig*}
{*vsig_c}0|benjamin_hermans_800.jpg|Benjamin Hermans|{/vsig_c*}
{*vsig_c}0|connie_lush_800.jpg|Connie Lush|{/vsig_c*} ... without the asterisks

An additional note: Even if you are using the title line only, please always add the third vertical bar.

Best regards
Andreas

Ist ein Bildwechsel on hover ohne JavaScript möglich?
19 Tuesday, 08 November 2011 11:25
Holley

Hallo,

danke für das super plugin!

In Deiner Anleitung beschreibst Du nicht, dass der Bildwechsel durch Überfahren eines thumbnails mit der Maus JavaScript erfordert. Bei mir funktioniert es aber nur, wenn ich unter "other settings" "Use JavaScript" YES aktiviere. Ich finde Dein plugin gerade so toll, weil es doch eigentlich auch nur per CSS funktionieren soll, oder nicht? In der CSS Gallery ist es ja so...
Ausserdem würde ich gerne wissen, ob Dir eine Erwähnung/Link im Impressum entgegenkommt oder lieber nicht.

Danke für Dein Bemühen und lieben Gruß

@Holley
Tuesday, 08 November 2011 22:13
A. Berger

Hallo Holley!

Danke, dass Du mich auf dieses mögliche Missverständnis aufmerksam machst. Ich habe auf der Seite "Anleitung Plugin" - auf die hier im Zusammenhang mit dem Feature "Parameter Overrides" für eine ausführliche Erklärung der einzelnen Parameter verwiesen wird unter "Anleitung" > "Punkt 30" den Hinweis: "Voraussetzung dafür ist, dass JavaScript aktiviert ist." in "Voraussetzung dafür ist, dass der Parameter "Use JavaScript?" aktiviert ist." geändert. Ich hoffe, das ist unmissverständlicher.

Betreffend des Funktionierens ausschließlich per CSS: Ja, das ist bei der "CSS Gallery" so, deshalb auch der Name. Was die "Very Simple Image Gallery" angeht, das Plugin ist auch bei deaktiviertem JavaScript (gleich ob im Backend oder einfach beim Benutzer) funktionstüchtig, auf nette Features wie Bildwechsel ohne Seitenreload und Bildwechsel per Hover muss man allerdings verzichten.

Über Erwähnung/Link im Impressum freue ich mich natürlich. Danke

Gruß
Andreas

Link as pop-up
18 Friday, 28 October 2011 11:42
Conny Roukens

Hello Andreas,

Thanks for a beautiful plugin. My questions is: is it possible to use the links, so that the original photo is shown, but not in a new window but in a pop-up?
I'm working with Joomla 1.7.2 .

Regards,
Conny Roukens

@Conny Roukens
Friday, 28 October 2011 17:31
A. Berger

Hi Conny!

No. Please check the category Photos & Images at extensions.joomla.org. You will find hundreds of extensions using modal windows of any kind you can imagine. This one does intentionally not.

Best regards
Andreas

klick auf bilder.
17 Saturday, 15 October 2011 11:40
marion

hallo und vielen dank für deine galerie! ich habe eben versucht die galerie zu installieren, auch mit erfolg, nun meine frage wie kann ich es schaffen, dass bei klick auf mein großes bild automatisch das nächste kommt? ist das überhaupt möglich? ich würde gerne vermeiden immer auf die kleinen  bilder klicken zu müssen. vielen dank für deine hilfe!

gruß marion

@marion
Wednesday, 26 October 2011 17:17
A. Berger

Hallo Marion!

Nein, der Klick auf das Hauptbild wird bei diesem Plugin vom Feature "Links" genutzt, um auf externe Ziele oder das Originalbild zu verlinken und steht damit für die Navigation nicht zur Verfügung.

Gruß
Andreas

clickable images
16 Wednesday, 29 June 2011 03:13
Terry

Hi ,

I am trying to make my images clickable. I have read your good notes but no joy yet.
I trying to create a gallery of clickable images.

Here is the code in an article..
{*vsig_l}1|graduates2011/ben.jpg|http://benattafe.com/mexican/|Ben|_self{/vsig_l*}

Here is the result ..
webinterface.mobi/graduates/

The images are dsplayed in the first article using ...
{*vsig}graduates2011{/vsig*}
but the second article  simply shows the code ..{*vsig_l}1|graduates2011/ben.jpg|http://benattafe.com/mexican/|Ben|_self{/vsig_l*}.
I would be very helpful if you can assist.

Regards,
Terry
tmcjannett AT gmail DOT com

@Terry
Wednesday, 29 June 2011 21:02
A. Berger

Hi Terry!

The code for links (and captions) is used in addition, not instead of the code for the gallery itself.
To set a link for the image "ben.jpg" in the first gallery in an article, displaying the images within the folder "graduates2011" you would use the code:

{*vsig}graduates2011{/vsig*}
{*vsig_l}0|ben.jpg|http://benattafe.com/mexican/|Ben|_self{/vsig_l*} ... without the asterisks

Best regards
Andreas

Problem mit Link Original Image
15 Tuesday, 28 June 2011 19:06
Markus

Hallo,

ähnlich wie Marco, bekomme auch ich den "Link Original Image" nicht zum Laufen. Obwohl von Anfang an enabled verweist das Hauptbild immer z.B. auf g_vsig81_0.
Den Cache habe ich inzwischen auch schon geleert. Was könnte das sein?
(Joomla 1.6.3, VSGallery 1.6.5)
Bin für alle Tipps dankbar!

Gruß,
Markus

@Markus
Tuesday, 28 June 2011 21:29
A. Berger

Hallo Markus!

Könntest Du einen Link zur Seite mit der Galerie, den Code im Artikel und eine Übersicht über die Einstellungen im Backend des Plugins posten?

Gruß
Andreas

Caption - extra line & formatting
14 Tuesday, 21 June 2011 14:45
Anne Chinoy

Hello,

Thanks again for the great plugin.
I am just wondering if it is possible to have 3 lines of text under the image? I tried inserting a line break and it didn't seem to work. This is what I am trying to achieve:

Herring smile
Waxed cotton with black & brown horsehair
150 cm x 105 cm

Many thanks in advance,
Anne

@Anne Chinoy
Sunday, 26 June 2011 16:27
A. Berger

Hi Anne!

First - sorry for the late response!
About your question:
I would realize this by omitting the caption title-line and using the text-line only. You can format text within this section of the parameters using your WYSIWYG-editor as long as you use linebreaks (BR) instead of paragraphs (P). In addition, make sure to format the content of the parameter only and not to fragment the surrounding code with HTML-tags.

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 47 guests online