Viewer - Eenvoudige zoominvoegtoepassing voor Vanilla JS en jQuery

Je kunt snel zoeken en tientallen bibliotheken vinden voor beeldverlichtingsposten, diavoorstellingen, galerijen, noem maar op.

Een van de nieuwste bibliotheken die mijn aandacht trok, is Viewer. Momenteel in versie 0.6 is het nog steeds een project in ontwikkeling, maar deze afbeelding plugin's ontwerp en functies zijn beide fenomenaal.

Vanaf de startpagina vindt u een live demo met verschillende afbeeldingsstijlen. U kunt kiezen om stel je eigen galerij in op verschillende functies zoals direct zoomen met een enkele afbeelding, of een lange diashow met veel afbeeldingen.

Dit komt ook met een “inline modus” die de afbeeldingsviewer aan een element op de pagina koppelt. Dus toen de gebruiker klikt op een miniatuur en zoomt in op de foto in dat element in plaats van bovenop de hele pagina.

U vindt knoppen voor vrijwel alles: rotaties, extra bijschriften en volledig 1: 1 zoomen om een ​​duidelijk beeld te krijgen van foto's met hoge resolutie.

Met een paar JS-opties Jij beslist hoe het Viewer-script zou moeten werken. Wilt u bezoekers niet laten inzoomen op afbeeldingen? Geen probleem.

U kunt de diavoorstellingsfunctie ook uitschakelen of gewoon de volgende / vorige knoppen in de gebruikersinterface uitschakelen. Hetzelfde geldt voor de miniatuurfoto's die verschijnen wanneer de diashow volledig zichtbaar is.

Merk ook op dat dit script een niet-jQuery-versie heeft als u vanilla JS verkiest. Beide plug-ins werken op dezelfde manier en ze zijn beiden in actieve ontwikkeling. Alles wat u nodig hebt om deze interface aan te passen, vindt u op de hoofdpagina van GitHub.

Als je groot bent in het coderen van je eigen gebruikersinterfaces, dan is Viewer een erg gave plug-in. Het biedt zo veel controle over het gedrag van elke diavoorstelling dat je dit kunt omvormen tot vrijwel alles wat je maar wilt.

Webontwikkelaars zullen een velddag hebben met alle opties in dit gratis image-script.