Getting Started with Svelte

VistaView provides a useVistaView hook for Svelte applications.

Installation

npm

npm install vistaview

yarn

yarn add vistaview

pnpm

pnpm add vistaview

bun

bun add vistaview

Basic Usage

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

const id = 'gallery-' + Math.random().toString(36).slice(2);
const vista = useVistaView({
  elements: `#${id} a`,
});
</script>

<div id={id}>
  <a href="/images/photo1-full.jpg">
    <img src="/images/photo1-thumb.jpg" alt="Photo 1" />
  </a>
  <a href="/images/photo2-full.jpg">
    <img src="/images/photo2-thumb.jpg" alt="Photo 2" />
  </a>
</div>

With Control Buttons

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

const id = 'gallery-' + Math.random().toString(36).slice(2);
const vista = useVistaView({
  elements: `#${id} a`,
});
</script>

<div id={id}>
  <a href="/images/full.jpg">
    <img src="/images/thumb.jpg" alt="Photo" />
  </a>
</div>

<button on:click={() => vista.open(0)}>Open Gallery</button>
<button on:click={() => vista.next()}>Next</button>
<button on:click={() => vista.prev()}>Previous</button>

With Options

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

// Define options outside to prevent recreation on every render
const options: VistaOpt = {
  maxZoomLevel: 3,
  preloads: 2,
  animationDurationBase: 400,
  onOpen: (vistaView) => console.log('Gallery opened'),
  onClose: (vistaView) => console.log('Gallery closed'),
};

const id = 'gallery-' + Math.random().toString(36).slice(2);
const vista = useVistaView({
  elements: `#${id} a`,
  ...options,
});
</script>

<div id={id}>
  <a href="/images/photo1-full.jpg">
    <img src="/images/photo1-thumb.jpg" alt="Photo 1" />
  </a>
  <a href="/images/photo2-full.jpg">
    <img src="/images/photo2-thumb.jpg" alt="Photo 2" />
  </a>
</div>

With Extensions

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

const id = 'gallery-' + Math.random().toString(36).slice(2);
const vista = useVistaView({
  elements: `#${id} a`,
  controls: {
    topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
  },
  extensions: [download()],
});
</script>

<div id={id}>
  <a href="/images/photo1.jpg">
    <img src="/images/photo1-thumb.jpg" alt="Photo 1" />
  </a>
</div>

Direct Usage

For more control, you can use the core vistaView function directly:

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

let instance;

onMount(() => {
  instance = vistaView({
    elements: '#my-gallery a',
  });

  return () => {
    instance?.destroy();
  };
});

function openGallery() {
  instance?.open(0);
}
</script>

<div id="my-gallery">
  <a href="/images/full.jpg">
    <img src="/images/thumb.jpg" alt="Photo" />
  </a>
</div>

<button on:click={openGallery}>Open Gallery</button>

SvelteKit

VistaView works seamlessly with SvelteKit. Initialize it inside onMount to ensure it only runs client-side:

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

let vista;

onMount(() => {
  vista = useVistaView({
    elements: '#gallery a',
  });
});
</script>

Next Steps

• Explore configuration options
• Learn about extensions
• Customize the styling