Codrops Fullscreen gallery with thumbnail flip

Deze Codrops code heb ik herwerkt voor Drupal 8 en ik heb ook enkele 'verbeteringen'  aangebracht.

De thumbnail toont nu de volgende afbeelding en niet van dezelfde. (logischer toch) Ook is de titel een link geworden, anders geraak je niet van deze pagina's weg. Er werd ook CSS toegevoegd om het beter op kleine schermen voor te stellen.

De integratie van de Codrops code was niet simpel aangezien de code conflicten gaf met de meeste Drupal thema's. Vandaar dat de module 'Clever Theme Switcher' gebruikt wordt. Bij het inhoudstype wordt er overgeschakeld naar 'Stark'. (Dit thema heeft geen storende CSS of scripting.) Daarom ga je dus ook als admin geen 'preview' kunnen bekijken als je ingelogd bent. Bekijk de pagina in een andere browser of als je uitgelogd bent.

Werkwijze:

De module maakt een nieuw inhoudstype aan:

Voeg afbeeldingen toe en vul de titel en alt in. Ze komen voor in de presentatie.  De title is zelfs een link naar een node of view met dezelfde URL. Maak dus dat je per afbeelding ook zo'n bruikbare URL hebt. Als je dus als titel 'Drupal Training' kiest, dan moet je dus ook een node of view hebben met URL: /Drupal Training

Desktop presentatie. Je kunt navigeren door te scrollen, met de pijltjestoetsen van het toetsenbord en met de pijltjes links van de thumb.

Smartphone presentatie. Hier kan je enkel met de navigatie (zie pijltjes links) navigeren.


De presentatie heeft een mooi flip effect bij scrollen.



 

Installatie

1) kijk of het Stark thema actief staat (niet standaard, maar wel geïnstalleerd = actief dus)

2) Installeer de third party in de map libraries.  (/libraries/FullscreenGalleryThumbnailFlip) Hoofdlettergevoelig!

3) Installeer de afhankelijkheden van de module.

4) Installeer de module