Hoe de Accordion-slider toe te passen

Een Accordion-slider is een mooie techniek voor het presenteren van foto’s. Een tijdje terug kocht ik voor twee tientjes de Accordion Slider plugin van BQworks, hieronder wat bevindingen. Deze website gebruikt het Hueman-theme waarin ook standaard sliders aanwezig zijn. Maar die zijn beperkt. De hier geteste Accordion-slider gaat een stuk verder.

Image panels

Hieronder een Accordion-slider met “Image” panels (willekeurige foto’s uit de media bibliotheek). Bij het selecteren welken foto’s te gebruiken speelt de omvang van de foto een rol. Als je voor “Thumbnails” kiest is de kwaliteit van de foto in de slider matig. Beter is om “groot” te kiezen. De eerste twee foto’s op pagina één hebben een link die het betreffende bericht opent waarin de foto voorkomt (werkt in Chrome niet goed, in andere browsers wél). Deze slider heeft meerdere pagina’s (instelbaar in de parameters) die met een bolletje (link) onder de slider worden aangegeven. Je kunt ook met de muis ook eenvoudig door alle pagina’s heen “swipen”. Het linken van een pagina aan een foto werkt alleen als de Lightbox optie niet tegelijkertijd wordt geactiveerd (aangevinkt). Het is óf de Lightbox gebruiken óf URL’s linken.

Malaga

Malaga

Malaga

Malaga

Malaga

Gallery panels

Daarnaast kan er ook een Accordion-slider worden gemaakt met “gallery” panels. Dan worden de foto’s gebruikt die in het betreffende bericht zijn gebruikt (= de “gallery”). Dat betekent dus dat een accordeon altijd samenhangt met een bericht en de foto’s die in dat bericht gebruikt zijn. Je kunt deze accordeon dus NIET ook in een ander bericht plakken. De accordeon naam speelt een rol bij het toekennen van de foto’s. Achteraf de naam van de accordeon wijzigen betekent dat de accordeon de in het bericht gebruikte foto’s niet meer “ziet”. Dus achteraf de naam wijzigen is niet slim. Een andere dingetje: de plugin leest de foto’s altijd uit de cache. Dus als je een nieuwe slider heb gemaakt en deze wilt bekijken in de browser, dan zie je niets. Omdat de foto’s in de nieuw gemaakte gallery nog niet in de cache zitten. Dat los je op door in de “Admin –> Accordion Slider –> Plugin settings” optie de cache leeg te maken (er is een button). Als daarna de nieuwe slider (elke slider) wordt gestart wordt eerst de cache gevuld. Dan laat je slider wél de foto’s zien.

Het verschil tussen Image- en Gallery sliders is dat je met de eerste willekeurige foto’s in de mediabibliotheek kunt kiezen, dus ook foto’s die niet in het bericht voorkomen. Deze foto’s worden meteen binnen de slider zelf geplaatst (maak de slider en kies dan de foto’s die erin moeten). Daarna kan je elke foto (panel) een eigen presentatie (layers e.d.) en afhandeling geven. De tweede (Gallery) werkt alleen op foto’s die in het bericht zijn geplaatst waarna je één presentatie kunt definiëren die in één keer op alle foto’s in het bericht wordt toegepast.  Het is hierbij beter om de Lightbox-optie aan te vinken. Hiermee kan je als gebruiker een foto binnen de slider kiezen die dan binnen een Lightbox op groot formaat gepresenteerd wordt.

Werkwijze

Als volgt: Maak een nieuwe slider en typeer hem als “Gallery”. Het is hier belangrijk om aan de rechterkant de “Visible panels” goed in te stellen. Vervang de default-waarde door “5”. Hiermee worden 5 foto’s als schuivende panelen getoond. Een hoger getal mag ook. Daaronder stel je 1 in als startpanel en 1 als startpage. Dan klik je de “Create” button. In het overzicht “All accordions” vindt je de shortcode terug die je met copy/paste in het betreffende bericht plakt. Binnen het bericht zelf voeg je Media toe waarbinnen je kiest voor “Galerij aanmaken”. In deze gallerij zet je de foto’s die de slider moet gaan gebruiken. Daarna klik je “Gallerij invoegen” waarmee de gallerij in je bericht geplakt wordt. Tenslotte ga je in het bericht naar Tekst-weergave. Zoek de toegevoegde gallerij en type achter [Gallery hide=”true”. Dit zorgt ervoor dat in het bericht de afzonderlijke foto’s (thumbnails) niet getoond worden, alleen de slider zelf. Save het bericht.

Post panels

“Post panels” is een slider die de uitgelichte wp-content/uploads van andere berichten gebruikt en daar naartoe linkt. Dit is dus een slider die als index naar andere berichten kan fungeren. Als je een foto klikt wordt het betreffende bericht geactiveerd. Welke berichten moeten worden gebruikt in de slider kan o.a. worden bepaald via te kiezen categorieën of tags. Zo’n slider kan wél in diverse berichten worden geplakt omdat de definitie welke foto’s (berichten) gebruikt moeten worden in de slider zelf zit, in tegenstelling tot de Gallery panels slider. Er is een functie waarin je kunt aangeven welke bericht-categorieën gelezen moeten worden.

Voorbereiding – Route des Grandes Alpes

Dag 1 – Route des Grandes Alpes – Saarburg

Dag 2 – Route des Grandes Alpes – Ribeauvillé

Dag 3 – Route des Grandes Alpes – Besancon

Dag 4 – Route des Grandes Alpes – Cordon

Dag 5 – Route des Grandes Alpes – Valloire

Dag 6 – Route des Grandes Alpes – Vars Saint Marie

Dag 7 – Route des Grandes Alpes – Alpe d’Huez

Dag 8 – Route des Grandes Alpes – Nantua

Dag 9 – Route des Grandes Alpes – Vianden