Very Simple Image Gallery Plugin Sample06

Written by Andreas Berger

Sunday, 14 March 2010 14:52

The first gallery shown corresponds exactly with the gallery in sample 01 but this time the folder contains images of different proportions. The result: the gallery "jumps" because every image uses 100% of the available width. Different the second gallery:

The different behavior of the second gallery is caused by the usage of the - available since version 1.6.0 - parameter "max Image Height". It allows to limit the height of the images. Left empty images still make use of 100% of the available width.

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: 287
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
Thumbnail Columns: 2
Sort order: A-Z
Use sets of size:
Label sets: Set
Link/button forward:
Link/button backward:
Show captions? Yes
Position of captions? Inside
Use links? Yes
Link original image: No
Image root: /images/stories/
Buttonfolder: /images/stories/vsig_buttons/
Use JavaScript? Yes
Switch on hover thumb? No
Preload images? No
File names as tooltips? No
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)

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=287
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

You don't have to use all parameters in your code but only the ones that differ from the settings in the plugins configuration panel. For example:

{*vsig}verysimple|width=430|align=1{/vsig*} - (without the asterisks)

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 Sunday, 20 March 2011 13:33

Comments (1)

On Click event

1 Tuesday, 08 March 2011 18:02

Mike Coderre

I have your plugin installed on my site http://www.polarspas.ca/products.html?page=shop.product_details&flypage=flypage-ask.tpl&product_id=38&category_id=2

I am using this for a number of different products on my site, but for some reason when I click on any of the thumbnails I am redirected to the top product listing page. I would like to disable the click function all together or have it function the same as the rollover function that changes the main image.

Can you please assist me with this issue?

Thanks for your time,
Mike

@Mike Coderre

Wednesday, 09 March 2011 21:39

A. Berger

Hi Mike!

The plugin you are using is not this one (Very Simple Image Gallery) but the CSS Gallery, another gallery plugin of mine. With this plugin, it is not possible to "disable" the onClick-event, because this would be possible using JavaScript only and the plugin works without JavaScript, using pure CSS.

The problem you ran into starts with the fact, that you are using the plugin on a page without SEF-Urls, this means that the individual page has no individual URL (/shop/category/product.html), but is defined by the request-parameters attached to the main URL (shop.html?category=thisone&product=thatone).

To allow the CSS Gallery to work completely without JavaScript, it uses the CSS onhover pseudo classes of links. Because a link has a href, they are all linked to an anchor at the top of the gallery.
This means, if the feature "Links", that uses the thumbnails to link to external targets, is deactivated and somebody clicks on a thumbnail, he is directed to the current page and the top of the gallery.

The problem: an anchor is by definition relative to the "current page" and the browser uses the current URL to determine this page as long as there is no base-href set in the head of the page. If the "base"-href is set, the browser attaches the anchor (#g__0) to the set base-href.
Unfortunately (in this case), Joomla! sets this base-href and it sets it to the URL of the page without the request-parameters which causes the browser to ab-use the anchor as an "external" link.

The solution: there isn't a quick fix for this. Maybe you want to consider using SEF-Urls on your site (which would be a good idea anyway - in my opinion) or you want to have a look at the plugin, the page you put your question belongs to, the "Very Simple Image Gallery". As long as you do not use the feature "links" with empty settings, it comes without this flaw and the next version (1.6.5 - available within the next two weeks), offers the possibility to switch images onhover too.

Best regards
Andreas