DEV Community

Cover image for VistaView - A Modern Lightweight Image Lightbox for the Web
Tri Rahmat Gunadi
Tri Rahmat Gunadi

Posted on

VistaView - A Modern Lightweight Image Lightbox for the Web

#javascript #webdev #opensource #lightbox

VistaView is a zero-dependency, framework-agnostic image lightbox library that brings a smooth, modern viewing experience to your web projects. Whether you're building with React, Vue, Svelte, or vanilla JavaScript, VistaView has you covered.

Docs: https://vistaview.jujiplay.com/

Why VistaView?

  • 🪶 Lightweight: Zero dependencies, minimal footprint (~10KB gzipped)
  • 🎨 Beautiful: 17+ pre-built themes with smooth animations
  • 🔌 Extensible: Support for YouTube, Vimeo, Dailymotion, Wistia, Vidyard, Streamable, and more
  • 🎯 Framework Agnostic: Works with React, Vue, Svelte, Solid, or vanilla JS
  • 📱 Responsive: Touch-friendly and mobile-optimized
  • ♿ Accessible: Keyboard navigation and ARIA support
  • 🗺️ Maps Integration: Google Maps, Mapbox, and OpenStreetMap support

Quick Start

Installation 

npm install vistaview
Enter fullscreen mode Exit fullscreen mode

Basic Usage 

import { vistaView } from 'vistaview';
import 'vistaview/style.css';

vistaView({
  elements: 'a.gallery',
});
Enter fullscreen mode Exit fullscreen mode 
<a href="image-large.jpg" class="gallery">
  <img src="image-thumb.jpg" alt="Beautiful landscape" />
</a>
Enter fullscreen mode Exit fullscreen mode

That's it! Your images now open in a beautiful lightbox with smooth transitions.

Themes

VistaView comes with 17 carefully crafted themes. Simply import the theme CSS:

import 'vistaview/dist/styles/midnight-ocean.css';
import 'vistaview/dist/styles/neon-nights.css';
import 'vistaview/dist/styles/cotton-candy.css';
// ... and 14 more!
Enter fullscreen mode Exit fullscreen mode

Available themes include:

  • Dark Rounded, Midnight Ocean, Midnight Gold
  • Neon Nights, Retro Arcade, Ember Glow
  • Cotton Candy, Strawberry, Lavender Fields
  • Paper Light, Soft Neutral, Stark Minimal
  • And more!

Framework Integration

React 

import { useVistaView } from 'vistaview/react';
import 'vistaview/style.css';

function Gallery() {
  const galleryRef = useVistaView({
    controls: {
      topRight: ['zoomIn', 'zoomOut', 'close'],
    },
  });

  return (
    <div ref={galleryRef}>
      <a href="large-1.jpg">
        <img src="thumb-1.jpg" alt="Image 1" />
      </a>
      <a href="large-2.jpg">
        <img src="thumb-2.jpg" alt="Image 2" />
      </a>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Vue 

<script setup>
import { useVistaView } from 'vistaview/vue';
import 'vistaview/style.css';

const galleryRef = useVistaView({
  controls: {
    topRight: ['zoomIn', 'zoomOut', 'close'],
  },
});
</script>

<template>
  <div ref="galleryRef">
    <a href="large-1.jpg">
      <img src="thumb-1.jpg" alt="Image 1" />
    </a>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Svelte 

<script>
  import { useVistaView } from 'vistaview/svelte';
  import 'vistaview/style.css';

  const galleryRef = useVistaView({
    controls: {
      topRight: ['zoomIn', 'zoomOut', 'close'],
    },
  });
</script>

<div use:galleryRef>
  <a href="large-1.jpg">
    <img src="thumb-1.jpg" alt="Image 1" />
  </a>
</div>
Enter fullscreen mode Exit fullscreen mode

Extensions

VistaView's extension system lets you add powerful features:

Video Platform Support 

import { vistaView } from 'vistaview';
import { youtubeVideo } from 'vistaview/extensions/youtube-video';
import { vimeoVideo } from 'vistaview/extensions/vimeo-video';

vistaView({
  elements: '.gallery a',
  extensions: [
    youtubeVideo(),
    vimeoVideo(),
  ],
});
Enter fullscreen mode Exit fullscreen mode

Now your gallery can display YouTube and Vimeo videos directly:

<a href="https://www.youtube.com/watch?v=VIDEO_ID">
  <img src="thumbnail.jpg" alt="Video thumbnail" />
</a>
Enter fullscreen mode Exit fullscreen mode

Supported video platforms:

  • YouTube
  • Vimeo
  • Dailymotion
  • Wistia
  • Vidyard
  • Streamable

Image Story

Add descriptions and stories to your images:

import { imageStory } from 'vistaview/extensions/image-story';
import 'vistaview/dist/styles/extensions/image-story.css';

vistaView({
  elements: '.gallery a',
  extensions: [
    imageStory({
      getStory: async (index) => ({
        content: `<p>Description for image ${index + 1}</p>`,
      }),
    }),
  ],
  controls: {
    bottomCenter: ['imageStory'],
  },
});
Enter fullscreen mode Exit fullscreen mode

Download

Let users download images:

import { download } from 'vistaview/extensions/download';

vistaView({
  elements: '.gallery a',
  extensions: [download()],
  controls: {
    topRight: ['download', 'close'],
  },
});
Enter fullscreen mode Exit fullscreen mode

Maps Integration

Display interactive maps in your lightbox:

import { googleMaps } from 'vistaview/extensions/google-maps';
import { openStreetMap } from 'vistaview/extensions/openstreetmap';

vistaView({
  elements: '.gallery a',
  extensions: [
    googleMaps({ apiKey: 'YOUR_API_KEY' }),
    openStreetMap(),
  ],
});
Enter fullscreen mode Exit fullscreen mode 
<a href="https://www.google.com/maps/@40.7128,-74.0060,15z">
  <img src="map-thumbnail.jpg" alt="New York City" />
</a>
Enter fullscreen mode Exit fullscreen mode

Advanced Configuration

Custom Controls

Position controls exactly where you want them:

vistaView({
  elements: '.gallery a',
  controls: {
    topLeft: ['counter'],
    topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
    bottomCenter: ['imageStory'],
  },
});
Enter fullscreen mode Exit fullscreen mode

Responsive Images

Support multiple image resolutions:

<a href="large.jpg" 
   data-vistaview-srcset="medium.jpg 800w, large.jpg 1600w, xlarge.jpg 2400w">
  <img src="thumb.jpg" alt="Responsive image" />
</a>
Enter fullscreen mode Exit fullscreen mode

Real-World Example

Here's a complete example with multiple extensions:

import { vistaView } from 'vistaview';
import { youtubeVideo } from 'vistaview/extensions/youtube-video';
import { vimeoVideo } from 'vistaview/extensions/vimeo-video';
import { download } from 'vistaview/extensions/download';
import { imageStory } from 'vistaview/extensions/image-story';
import 'vistaview/style.css';
import 'vistaview/dist/styles/midnight-ocean.css';
import 'vistaview/dist/styles/extensions/image-story.css';

vistaView({
  elements: '.my-gallery a',
  controls: {
    topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
    bottomCenter: ['imageStory'],
  },
  extensions: [
    youtubeVideo(),
    vimeoVideo(),
    download(),
    imageStory({
      getStory: async (index) => ({
        content: `
          <h3>Image ${index + 1}</h3>
          <p>This is a beautiful photo taken in 2024.</p>
        `,
      }),
    }),
  ],
});
Enter fullscreen mode Exit fullscreen mode

Performance

VistaView is designed for performance:

  • Lazy loading: Images load only when needed
  • Smooth animations: Hardware-accelerated CSS transforms
  • Small bundle: ~10KB gzipped for core, extensions loaded on-demand
  • Zero dependencies: No bloat from third-party libraries

Browser Support

VistaView works on all modern browsers:

  • Chrome/Edge 90+
  • Firefox 88+
  • Safari 14+
  • Mobile browsers (iOS Safari, Chrome Android)

Try It Out

Check out the interactive demo to see VistaView in action with all themes and extensions.

Links

Conclusion

VistaView makes it easy to add a beautiful, performant lightbox to any web project. With zero dependencies, extensive framework support, and powerful extensions, it's the modern solution for image viewing on the web.

Give it a try and let me know what you think! ⭐

Built with ❤️ by juji

Top comments (0)