Demo 1: Basic Usage
Den simpleste opsætning - tilføj billeder i en div og initialiser plugin'et:
<div class="gallery-basic">
<img src="thumb1.jpg" data-fullsize="full1.jpg" alt="Image 1">
<img src="thumb2.jpg" data-fullsize="full2.jpg" alt="Image 2">
...
</div>
<script>
$('.gallery-basic').vnsGallery();
</script>
Demo 2: Med Loop & Touch/Drag Navigation
Aktiver loop for at navigere i cirkel gennem både thumbnails og lightbox. Touch/drag support er aktiveret som standard - prøv at trække carousel med musen eller swipe med fingeren!
$('.gallery-loop').vnsGallery({
loop: true,
step: 2, // Step 2 billeder ad gangen
enableDrag: true, // Aktivér drag/swipe (default: true)
dragThreshold: 50 // Minimum drag distance i pixels (default: 50)
});
Demo 3: Static Grid (Uden Carousel)
Vis billeder i et statisk grid uden carousel navigation:
$('.gallery-static').vnsGallery({
useCarousel: false,
columns: 4,
maxImages: 6,
showMoreIndicator: true
});
Demo 4: Uden Drag/Swipe Navigation
Hvis du foretrækker kun at bruge navigationsknapperne, kan du deaktivere drag/swipe funktionalitet:
$('.gallery-no-drag').vnsGallery({
enableDrag: false // Deaktivér drag/swipe navigation
});
Demo 5: Interaktiv Demo Builder 🎨
Tilpas alle options og se resultatet i real-time. Generer kode til din egen gallery:
Preview
Generated Code
$('.gallery').vnsGallery();