Sigplus howto

Deze how-to laat zien hoe je de sigplus extensie voor Joomla! kan gebruiken voor het tonen van foto's. 

In de voorbeelden wordt gebruik gemaakt van 12 foto's die zijn opgeslagen in de map genaamd 'landscape'. De foto's hebben een formaat van 900 bij 600 pixels (verhouding is dus 3:2). 

Er wordt gebruik gemaakt van Joomla versie 3.4 en sigplus versie 1.4.2.19. Er wordt gebruik gemaakt van de standaard instellingen van sigplus.


Standaard galerij

Onderstaande galerij is gemaakt met de Joomla! uitbreiding genaamd 'sigplus'. Door onderstaande code in te voegen in een artikel worden de afbeeldingen uit de map genaamd 'landscape' zichtbaar als 'gallery':

{*gallery}landscape{/*gallery} (zonder de *-tekens)

 

Formaat aanpassen van de thumbnails

Standaard zijn de thumbnails in de galerij 200 pixels hoog of 200 pixels breed. Als we de volle breedte van een webpagina willen gebruiken dan kunnen we de breedte en/of hoogte van de thumbnails als volgt aanpassen: 

{*gallery width=305 height=500}landscape{/*gallery} (zonder de *-tekens)

De beschikbare breedte is 938 pixels. In principe zouden er dus 3 afbeeldingen van 312 pixels kunnen passen. We moeten echter rekeningen houden met kaders. Proefondervindelijk is vastgesteld dat een breedte van 305 pixels hier een mooi resultaat geeft.

En de hoogte? Sigplus houdt de verhouding van de afbeelding vast en bepaald het formaat aan de hand van de meest beperkende eigenschap. De gebruikte afbeeldingen hebben een verhouding van 3:2. Als we de hoogte op de standaard waarde van 200 pixels hadden laten staan dan zou de afbeelding niet breder kunnen worden dan 300 pixels. Door de hoogte groter te maken wordt de breedte van 305 pixels de beperkende factor.
 
 

Meer thumbnails

Je kan er ook voor keizen om meer thumbnaisl te laten zien dan de drie die er standaard getoond worden. Dit doe je door het aantal kolommen en rijen aan te passen:

{*gallery cols=5 rows=2}landscape{/*gallery} (zonder de *-tekens)

Houdt er rekening mee dat de thumnails op de pagina passen. Vijf kolommen van elk standaard 200 pixels breedt past niet op een pagina met een breedte van 938 pixels. Je moet de breedte dus ook aanpassen:

{*gallery width=180 cols=5 rows=2}landscape{/*gallery} (zonder de *-tekens)

 


Schuifbalk aanpassen

De schuifbalk bevat veel informatie die afleid van de afbeeldingen. Je kan de links (eerste, vorige, volgende en laatste) en de pagina teller als volgt verwijderen:

{*gallery links=0 counter=0}landscape{/*gallery} (zonder de *-tekens)

Misschien is het je opgevallen dat als je op volgende klikt alle afbeeldingen verdwijnen en plaats maken voor nieuwe. In plaats van alle afbeeldingen tegelijk te schuiven kan je ook schuiven met één afbeelding per keer:

{*gallery slider:step=single}landscape{/*gallery} (zonder de *-tekens)

Hieronder zie je het resultaat van de volgende code:

{*gallery width=305 height=500 links=0 counter=0 slider:step=single}landscape{/*gallery} (zonder de *-tekens)


Navigeren met overlay knoppen

Je kan ook navigatie binnen de afbeeldingen plaatsen door de 'overlay' optie aan te zetten. Deze knoppen zie je alleen als je met de muis naar de rand van de eerste of laatste thumbnail beweegt.

{*gallery width=305 height=500 links=0 counter=0 overlay=1 slider:step=single}landscape{/*gallery} (zonder de *-tekens)


Pop-up window uitzetten

Als je op een afbeelding klikt verschiijnt een zogenaamd 'lightbox' pop-up window. Je kan deze mogelijkheid uitzetten:

{*gallery lightbox=none}landscape{/gallery} (zonder de *-tekens)

Hieronder het resultaat van onderstaande code met twee grote afbeeldingen zonder popups en een verschuiving van één afbeelding per keer:

{*gallery cols=2 width=460 height=500 links=0 counter=0 slider:step=single lightbox=none}landscape{/*gallery} (zonder de *-tekens)


Carousel schuifbalk

Sigplus kent naast de standaard schuifbalk ook de 'Carousel Slider'. De afbeeldingen binnen de carousel roteren oneindig door. Als de laatste afbeelding getoond wordt komt de eerste daar weer achteraan. De carousel laat afbeeldingen zien binnen een vastgesteld window (standaard is de windowsize 100%). Je geeft dus niet het aantal afbeeldingen op middels 'cols' maar wel de windowsize. Dit betekent wel dat sommige afbeeldingen gedeeltelijk getoodn kunnen worden.

{*gallery slider=boxplus.carousel}landscape{/*gallery} (zonder de *-tekens)

 


Nog meer info over sigplus 

Uitgebreide documentatie over sigplus kan je vinden op de website van de auteur. http://hunyadi.info.hu/en/projects/sigplus