Very Simple Image Gallery Plugin Beispiel06

Geschrieben von: Andreas Berger

Sonntag, den 14. März 2010 um 14:52 Uhr

Die angezeigte Galerie entspricht exakt den Beispiel 01, nur enthält der angezeigte Ordner Bilder verschiedenen Formats. Das Resultat: Die Galerie "springt" weil jedes der Bilder die volle zur Verfügung stehende Breite ausnutzt. Ganz anders die nächste Galerie:

Den Unterschied macht der - ab Version 1.6.0 zur Verfügung stehende Parameter "max Image Height". Damit wird die maximale Höhe eines Bildes limitiert - und das Problem behoben. Bleibt der Parameter leer, dann wird weiterhin die Breite ganz ausgenützt.

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

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:33 Uhr

Kommentare (1)

On Click event

1 Dienstag, den 08. März 2011 um 18:02 Uhr

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

Mittwoch, den 09. März 2011 um 21:39 Uhr

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