Et fleksibelt jQuery image gallery plugin med thumbnails, lightbox, carousel og grid view. VNS.Gallery gør det nemt at skabe professionelle billedgallerier med fuld responsivitet, touch/drag navigation, keyboard navigation og en interaktiv demo builder til at teste alle funktioner.
Download filerne fra GitHub og inkluder dem i dit HTML:
<link rel="stylesheet" href="dist/vns-gallery.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="dist/vns-gallery.js"></script>
HTML struktur:
<div class="gallery">
<img src="img/thumbs/photo-01.jpg" data-fullsize="img/full/photo-01.jpg" alt="Photo 1">
<img src="img/thumbs/photo-02.jpg" data-fullsize="img/full/photo-02.jpg" alt="Photo 2">
<img src="img/thumbs/photo-03.jpg" data-fullsize="img/full/photo-03.jpg" alt="Photo 3">
</div>
Initialize plugin:
$('.gallery').vnsGallery({
columns: 4,
loop: true,
showAllButton: true,
modalColumns: 6
});
Tilpasset alle skærmstørrelser med customizable breakpoints for perfekt visning på alle enheder.
Vælg mellem carousel navigation eller statisk grid layout afhængigt af dit design.
Indbygget lightbox med grid og single image views for optimal billedvisning.
Træk carousel med musen eller swipe med fingeren på touch-enheder for intuitiv navigation.
Fuld support for keyboard navigation med arrow keys, escape og enter.
Thumbnail og fullsize billeder for optimal loading - små thumbs i grid, store i lightbox.
Omfattende options og public methods til at tilpasse galleriet til dine behov.
Optional loop mode der gør det muligt at navigere fra sidste til første billede.
Inkluderet interaktiv demo builder til at teste alle features og generere kode.
Se galleriet i action med vores interaktive demo og test alle funktioner selv.
Vital New Software ApS
Martin H. Schläger
Download VNS.Gallery og opret professionelle billedgallerier i dag.
Vi hjælper dig med at implementere VNS.Gallery i dit projekt eller custom tilpasse det til dine behov.