VistaView

https://vistaview.jujiplay.com
Admin
VistaView is a lightweight, modern image lightbox library for the web, offering zero dependencies,...
Tokens:82,031
Snippets:754
Trust Score:5.3
Update:9 months ago
Show doc for...
Tokens:
Raw
### Custom Image Setup with VistaView

Source: https://vistaview.jujiplay.com/api-reference/lifecycle

Shows how to implement a custom image setup function in VistaView. This example first calls the default `imageSetup` function and then adds custom logic, like logging the index of the image being set up.

```javascript
import { vistaView, imageSetup } from 'vistaview';


vistaView({
  elements: '#gallery a',
  imageSetupFunction: (data, vistaView) => {
    // Call default setup
    imageSetup(data, vistaView);


    // Custom setup logic
    console.log('Setting up image:', data.index.to);
  },
});
```

--------------------------------

### VistaView Gallery with Extensions in SolidJS

Source: https://vistaview.jujiplay.com/integrations/solid

Demonstrates how to incorporate VistaView extensions, like the 'download' extension, into a SolidJS gallery. This allows adding custom functionalities, such as a download button, to the gallery controls.

```typescript
import { useVistaView } from 'vistaview/solid';
import { download } from 'vistaview/extensions/download';
import 'vistaview/style.css';


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


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

```

--------------------------------

### Basic VistaView Gallery in Svelte

Source: https://vistaview.jujiplay.com/integrations/svelte

Demonstrates a simple image gallery using the `useVistaView` hook in Svelte. It requires importing the hook and CSS, then initializing VistaView with a selector for gallery links.

```svelte
<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>

```

--------------------------------

### Client-Side Rendering for VistaView in SolidStart

Source: https://vistaview.jujiplay.com/integrations/solid

Provides guidance on using VistaView within a SolidStart application, emphasizing the need for client-side rendering. It demonstrates lazy loading the Gallery component and wrapping it with `ClientOnly` to ensure proper initialization.

```typescript
import { lazy } from 'solid-js';


const Gallery = lazy(() => import('./Gallery'));


function Page() {
  return (
    <ClientOnly>
      <Gallery />
    </ClientOnly>
  );
}

```

--------------------------------

### Reactive Image Updates with VistaView in SolidJS

Source: https://vistaview.jujiplay.com/integrations/solid

Shows how VistaView seamlessly integrates with SolidJS's reactive system to update the gallery dynamically. This example uses `createSignal` to manage an array of images, allowing the gallery to re-render when the image data changes.

```typescript
import { createSignal } from 'solid-js';
import { useVistaView } from 'vistaview/solid';
import 'vistaview/style.css';


function Gallery() {
  const [images, setImages] = createSignal([
    { src: '/images/photo1.jpg', alt: 'Photo 1' },
    { src: '/images/photo2.jpg', alt: 'Photo 2' },
  ]);


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


  return (
    <div id={id}>
      {images().map((img) => (
        <a href={img.src}>
          <img src={img.src} alt={img.alt} />
        </a>
      ))}
    </div>
  );
}

```

--------------------------------

### Direct VistaView Initialization in Svelte

Source: https://vistaview.jujiplay.com/integrations/svelte

Shows how to use the core `vistaView` function directly in Svelte for more granular control. It's recommended to initialize and destroy the instance within `onMount` and its cleanup function.

```svelte
<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>

```

--------------------------------

### VistaView Integration with SvelteKit

Source: https://vistaview.jujiplay.com/integrations/svelte

Demonstrates initializing VistaView within SvelteKit projects using the `onMount` lifecycle function. This ensures that VistaView is only initialized on the client-side, preventing server-side rendering issues.

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


let vista;


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

```

--------------------------------

### Install VistaView with npm, yarn, pnpm, or bun

Source: https://vistaview.jujiplay.com/integrations/vue

Install the VistaView library using your preferred package manager. This is the initial step before integrating VistaView into your Vue project.

```bash
npm install vistaview
```

```bash
yarn add vistaview
```

```bash
pnpm add vistaview
```

```bash
bun add vistaview
```

--------------------------------

### Vue Options API: `vistaView` Instance Setup

Source: https://vistaview.jujiplay.com/integrations/vue

Initialize VistaView using the Options API for projects not using Composition API. This involves creating a `vistaView` instance in the `mounted` hook and destroying it in `beforeUnmount` to prevent memory leaks.

```vue
<script>
import { vistaView } from 'vistaview';
import 'vistaview/style.css';


export default {
  data() {
    return {
      vista: null,
    };
  },
  mounted() {
    this.vista = vistaView({
      elements: '#gallery a',
    });
  },
  beforeUnmount() {
    this.vista?.destroy();
  },
};
</script>


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

--------------------------------

### Add download functionality to VistaView gallery with extensions in React

Source: https://vistaview.jujiplay.com/integrations/react

Shows how to extend VistaView functionality in React by including the 'download' extension. This example configures controls to include a download button.

```jsx
'use client'; // Required for Next.js and other React Server Components frameworks


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


function Gallery() {
  const vista = useVistaView({
    elements: '#gallery a',
    controls: {
      topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
    },
    extensions: [download()],
  });


  return (
    <div id="gallery">
      <a href="/images/photo1.jpg">
        <img src="/images/photo1-thumb.jpg" alt="Photo 1" />
      </a>
    </div>
  );
}

```

--------------------------------

### Complete Example: Dynamically Generate Gallery with Wistia Thumbnails

Source: https://vistaview.jujiplay.com/extensions/wistia-video

A complete example demonstrating how to dynamically generate a gallery of Wistia videos with their thumbnails. It uses `getWistiaThumbnail` to fetch thumbnail URLs and then initializes VistaView with the Wistia extension.

```javascript
<div id="gallery"></div>


<script type="module">
  import { vistaView } from 'vistaview';
  import { wistiaVideo, getWistiaThumbnail } from 'vistaview/extensions/wistia-video';
  import 'vistaview/style.css';


  // Array of Wistia video URLs
  const videos = [
    'https://fast.wistia.net/embed/iframe/abc123def',
    'https://myaccount.wistia.com/medias/xyz789ghi',
  ];


  // Generate gallery dynamically with thumbnails (async)
  const gallery = document.getElementById('gallery');


  (async () => {
    for (const videoUrl of videos) {
      const link = document.createElement('a');
      link.href = videoUrl;

      const img = document.createElement('img');
      // getWistiaThumbnail is async - fetches from Wistia's API
      img.src = await getWistiaThumbnail(videoUrl);
      img.alt = 'Video thumbnail';
      img.style.width = '200px';

      link.appendChild(img);
      gallery.appendChild(link);
    }


    vistaView({
      elements: '#gallery a',
      extensions: [wistiaVideo()],
    });
  })();
</script>
```

--------------------------------

### Minimal Setup with Anchor Tags (JavaScript)

Source: https://vistaview.jujiplay.com/core/configuration/basic

Initialize VistaView using a CSS selector for anchor tags. This setup requires importing the library and its styles.

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


vistaView({
  elements: '#gallery a',
});
```

--------------------------------

### Create a basic image gallery with the VistaView React component

Source: https://vistaview.jujiplay.com/integrations/react

Demonstrates how to use the `VistaView` React component for a declarative image gallery. It requires importing the component and CSS, and defining child `<a>` tags with image links.

```jsx
'use client'; // Required for Next.js and other React Server Components frameworks


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


function Gallery() {
  return (
    <VistaView selector="> a">
      <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>
    </VistaView>
  );
}

```

--------------------------------

### Complete Example: Dynamic YouTube Gallery with Thumbnails

Source: https://vistaview.jujiplay.com/extensions/youtube-video

A comprehensive example demonstrating how to dynamically create a gallery of YouTube videos using VistaView. It includes importing necessary modules, generating links with thumbnails, and initializing VistaView with the YouTube extension.

```javascript
<div id="gallery"></div>


<script type="module">
  import { vistaView } from 'vistaview';
  import { youtubeVideo, getYouTubeThumbnail } from 'vistaview/extensions/youtube-video';
  import 'vistaview/style.css';


  // Array of YouTube video URLs
  const videos = [
    'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
    'https://youtu.be/jNQXAC9IVRw',
    'https://www.youtube.com/watch?v=9bZkp7q19f0',
  ];


  // Generate gallery dynamically with thumbnails
  const gallery = document.getElementById('gallery');
  videos.forEach((videoUrl) => {
    const link = document.createElement('a');
    link.href = videoUrl;

    const img = document.createElement('img');
    img.src = getYouTubeThumbnail(videoUrl);
    img.alt = 'Video thumbnail';
    img.style.width = '200px';

    link.appendChild(img);
    gallery.appendChild(link);
  });


  vistaView({
    elements: '#gallery a',
    extensions: [youtubeVideo()],
  });
</script>

```

--------------------------------

### Basic VistaView Gallery Hook Usage in SolidJS

Source: https://vistaview.jujiplay.com/integrations/solid

Demonstrates the basic usage of the `useVistaView` hook in a SolidJS application to create a simple image gallery. It requires importing the hook and CSS, and then initializing it with a selector for gallery elements.

```typescript
import { useVistaView } from 'vistaview/solid';
import 'vistaview/style.css';


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


  return (
    <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>
  );
}

```

--------------------------------

### VistaView Gallery with Custom Options in SolidJS

Source: https://vistaview.jujiplay.com/integrations/solid

Illustrates how to configure VistaView with custom options such as `maxZoomLevel`, `preloads`, `animationDurationBase`, and event handlers (`onOpen`, `onClose`) in a SolidJS application. Defining options outside the component is recommended for performance.

```typescript
import { useVistaView } from 'vistaview/solid';
import type { VistaOpt } from 'vistaview';
import 'vistaview/style.css';


// Define options outside component 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'),
};


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


  return (
    <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>
  );
}

```

--------------------------------

### Initialize VistaView with an Array of Image Objects

Source: https://vistaview.jujiplay.com/integrations/vanilla

Demonstrates initializing VistaView by providing an array of image objects directly, instead of referencing DOM elements. Each object can specify `src`, `alt`, and `srcSet`. This method does not support thumbnails.

```javascript
vistaView({
  elements: [
    { src: '/images/photo1.jpg', alt: 'Photo 1' },
    {
      src: '/images/photo2-800.jpg',
      alt: 'Photo 2',
      srcSet: '/images/photo2-800.jpg 800w, /images/photo2-1200.jpg 1200w',
    },
  ],
});
```

--------------------------------

### VistaView Gallery with Control Buttons in SolidJS

Source: https://vistaview.jujiplay.com/integrations/solid

Shows how to integrate control buttons (Open, Next, Previous) with the VistaView gallery in SolidJS. This extends the basic usage by providing programmatic control over the gallery's state.

```typescript
import { useVistaView } from 'vistaview/solid';
import 'vistaview/style.css';


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


  return (
    <>
      <div id={id}>
        <a href="/images/full.jpg">
          <img src="/images/thumb.jpg" alt="Photo" />
        </a>
      </div>
      <button onClick={() => vista.open(0)}>Open Gallery</button>
      <button onClick={() => vista.next()}>Next</button>
      <button onClick={() => vista.prev()}>Previous</button>
    </>
  );
}

```

--------------------------------

### Install VistaView with bun

Source: https://vistaview.jujiplay.com/core/installation

Installs the VistaView library using the bun package manager. This command is for projects that have adopted bun.

```bash
bun add vistaview
```

--------------------------------

### Initialize and Control VistaView Gallery

Source: https://vistaview.jujiplay.com/integrations/vanilla

Initializes the VistaView gallery with specified elements and demonstrates controlling the lightbox through various methods. This includes opening, closing, navigating between images, viewing a specific image, retrieving the current index, and destroying the gallery instance. Assumes the vistaView function is globally available.

```javascript
const gallery = vistaView({ elements: '#gallery a' });


// Open lightbox at specific index (0-based)
gallery.open(0);


// Close lightbox
gallery.close();


// Navigate to next image
gallery.next();


// Navigate to previous image
gallery.prev();


// Go to specific image
gallery.view(2);


// Get current image index
const currentIndex = gallery.getCurrentIndex();


// Destroy instance and cleanup
gallery.destroy();
```

--------------------------------

### OpenStreetMap URL Example

Source: https://vistaview.jujiplay.com/extensions/openstreetmap

Provides an example of an OpenStreetMap URL following the specified format, including latitude, longitude, and zoom level.

```text
osm://40.7580,-73.9855,15
```

--------------------------------

### Install VistaView with yarn

Source: https://vistaview.jujiplay.com/core/installation

Installs the VistaView library using the yarn package manager. This command is suitable for projects managed with yarn.

```bash
yarn add vistaview
```

--------------------------------

### Start Animated Transition with VistaHiresTransition

Source: https://vistaview.jujiplay.com/api-reference/classes/vistahirestransition

Starts an animated transition for a VistaBox instance. It takes the VistaBox to animate, a callback for completion, a function to control pausing, and the target properties (dimensions, transform, translate).

```typescript
static start(options: {
  vistaImage: VistaBox;
  onComplete: () => void;
  shouldWait: () => boolean;
  target: {
    width?: number;
    height?: number;
    transform?: { x?: number; y?: number; scale?: number };
    translate?: { x?: number; y?: number };
  };
}): void
```

```javascript
import { VistaHiresTransition } from 'vistaview';


VistaHiresTransition.start({
  vistaImage: image,
  onComplete: () => console.log('Animation complete'),
  shouldWait: () => false,
  target: {
    width: 800,
    height: 600,
    transform: { scale: 1.5, x: 0, y: 0 },
  },
});
```

--------------------------------

### Install VistaView with npm

Source: https://vistaview.jujiplay.com/core/installation

Installs the VistaView library using the npm package manager. This is the recommended method for projects using npm.

```bash
npm install vistaview
```

--------------------------------

### Install Dailymotion Video Extension (ESM)

Source: https://vistaview.jujiplay.com/extensions/dailymotion-video

Install the Dailymotion Video extension for VistaView using ESM module bundlers. This method requires importing the necessary modules and initializing VistaView with the extension.

```javascript
import { vistaView } from 'vistaview';
import { dailymotionVideo } from 'vistaview/extensions/dailymotion-video';
import 'vistaview/style.css';


vistaView({
  elements: '#gallery a',
  extensions: [dailymotionVideo()],
});
```

--------------------------------

### Initialize VistaView Lightbox with JavaScript

Source: https://vistaview.jujiplay.com/llms

Demonstrates the basic usage of VistaView by importing the library and its CSS, then initializing it to apply to specified elements. This requires the 'vistaview' package to be installed.

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

vistaView({
  elements: '#gallery a',
});
```

--------------------------------

### Vue Component: Basic VistaView Gallery Setup

Source: https://vistaview.jujiplay.com/integrations/vue

Utilize the VistaView component for a declarative image gallery. This approach requires importing the component and its CSS, then nesting image links within the component.

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


<template>
  <VistaView selector="> a">
    <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>
  </VistaView>
</template>
```

--------------------------------

### Log Example: Image Initialization

Source: https://vistaview.jujiplay.com/extensions/logger

This snippet shows the console output when an image is initialized. It logs details about the image configuration and its index within the gallery.

```text
Logger: Image initialized: {
  config: { src: "...", alt: "..." },
  origin: { ... },
  index: 0
}

```

--------------------------------

### VistaView with Data Attributes for High-Res Images (ESM)

Source: https://vistaview.jujiplay.com/integrations/vanilla

Configures VistaView to use `data-vistaview-src` for specifying high-resolution image sources, while the `src` attribute provides a thumbnail. This example uses JavaScript modules (ESM) and targets `img` elements.

```javascript
<div id="gallery">
  <img src="/images/thumb1.jpg" data-vistaview-src="/images/full1.jpg" alt="Photo 1" />
  <img src="/images/thumb2.jpg" data-vistaview-src="/images/full2.jpg" alt="Photo 2" />
</div>


<script type="module">
  import { vistaView } from 'vistaview';
  import 'vistaview/style.css';


  vistaView({
    elements: '#gallery img',
  });
</script>
```

--------------------------------

### Accessing VistaState

Source: https://vistaview.jujiplay.com/api-reference/classes/vistastate

Demonstrates how to instantiate VistaView and access its state properties.

```APIDOC
## Accessing VistaState

### Overview

`VistaState` is automatically instantiated by `VistaView` and accessible via the `state` property. It provides a centralized location for all runtime state information.

### Method

JavaScript

### Endpoint

N/A (Class property access)

### Request Example

```javascript
const viewer = new VistaView('.gallery-item');
viewer.open();

console.log(viewer.state.currentIndex); // Current image index
console.log(viewer.state.zoomedIn); // Zoom state
console.log(viewer.state.elmLength); // Total images
```

### Response

N/A (Direct property access)
```

--------------------------------

### Initialize VistaView with JavaScript Modules (ESM)

Source: https://vistaview.jujiplay.com/integrations/vanilla

Initializes VistaView by importing the necessary modules and CSS. This approach is used in modern JavaScript projects with bundlers.

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


const gallery = vistaView({
  elements: '#gallery a',
});
```

--------------------------------

### VistaView Control Methods (JavaScript)

Source: https://vistaview.jujiplay.com/core/configuration/basic

Demonstrates how to use the returned VistaView instance to programmatically control the lightbox. Includes methods for opening, closing, navigation, and zoom.

```javascript
const vista = vistaView({
  elements: '#gallery a',
});


// Available methods:
vista.open(0); // Open lightbox at index 0
vista.close(); // Close the lightbox
vista.next(); // Navigate to next image
vista.prev(); // Navigate to previous image
vista.view(2); // Jump to image at index 2
vista.zoomIn(); // Zoom in
vista.zoomOut(); // Zoom out
vista.getCurrentIndex(); // Get current image index
vista.reset(); // Recalculate elements; for selectors: re-queries DOM and re-attaches click listeners; for arrays: updates element count only
vista.destroy(); // Clean up and remove lightbox
```

--------------------------------

### Vue Composable: `useVistaView` with Extensions

Source: https://vistaview.jujiplay.com/integrations/vue

Integrate VistaView extensions, such as the download functionality, with the `useVistaView` composable. This allows adding custom controls and features to the image gallery.

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


const vista = useVistaView({
  elements: '#gallery a',
  controls: {
    topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
  },
  extensions: [download()],
});
</script>


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

--------------------------------

### start

Source: https://vistaview.jujiplay.com/api-reference/classes/vistaimageevent

Initiates pointer event listening on a specified HTML element.

```APIDOC
## POST /start

### Description
Starts listening to pointer events on the specified HTML container element. This method is typically called automatically by VistaView when it is opened.

### Method
POST

### Endpoint
/start

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **imageContainer** (HTMLElement) - Required - The HTML element on which to attach the pointer event listeners.

### Request Example
```javascript
// Assuming 'viewer' is a VistaView instance and 'containerElement' is an HTMLElement
const eventSystem = new VistaImageEvent(viewer);
eventSystem.start(containerElement);
```

### Response
#### Success Response (200)
None (This method initiates an action and does not return data).

#### Response Example
None
```

--------------------------------

### VistaView Gallery with Control Buttons in Svelte

Source: https://vistaview.jujiplay.com/integrations/svelte

Enhances the Svelte gallery with control buttons for opening, navigating next, and navigating previous. It utilizes the `vista.open()`, `vista.next()`, and `vista.prev()` methods.

```svelte
<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>

```

--------------------------------

### Complete Example: Dynamic Dailymotion Gallery (JavaScript)

Source: https://vistaview.jujiplay.com/extensions/dailymotion-video

A comprehensive example demonstrating how to dynamically generate a gallery of Dailymotion videos using JavaScript. It includes creating anchor tags, setting image sources from generated thumbnails, and initializing VistaView with the Dailymotion extension.

```javascript
<div id="gallery"></div>


<script type="module">
  import { vistaView } from 'vistaview';
  import {
    dailymotionVideo,
    getDailymotionThumbnail,
  } from 'vistaview/extensions/dailymotion-video';
  import 'vistaview/style.css';


  // Array of Dailymotion video URLs
  const videos = [
    'https://www.dailymotion.com/video/x8abcde',
    'https://dai.ly/x8fghij',
    'https://www.dailymotion.com/video/x8klmno',
  ];


  // Generate gallery dynamically with thumbnails
  const gallery = document.getElementById('gallery');
  videos.forEach((videoUrl) => {
    const link = document.createElement('a');
    link.href = videoUrl;


    const img = document.createElement('img');
    img.src = getDailymotionThumbnail(videoUrl);
    img.alt = 'Video thumbnail';
    img.style.width = '200px';


    link.appendChild(img);
    gallery.appendChild(link);
  });


  vistaView({
    elements: '#gallery a',
    extensions: [dailymotionVideo()],
  });
</script>
```

--------------------------------

### Configure VistaView component with options in React

Source: https://vistaview.jujiplay.com/integrations/react

Illustrates how to pass configuration options to the `VistaView` component, such as zoom levels, preloads, and event callbacks. Options should be defined outside the component for performance.

```jsx
'use client'; // Required for Next.js and other React Server Components frameworks


import { VistaView } from 'vistaview/react';
import type { VistaOpt } from 'vistaview';
import 'vistaview/style.css';


// Define options outside component 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'),
};


function Gallery() {
  return (
    // selector defaults to '> a'
    <VistaView options={options}>
      <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>
    </VistaView>
  );
}

```

--------------------------------

### Initialize VistaView Lightbox

Source: https://vistaview.jujiplay.com/api-reference/main-function

The vistaView() function is the main entry point for creating and initializing a VistaView lightbox instance. It takes a configuration object as a parameter and returns an interface for controlling the lightbox. Ensure the vistaview library and its CSS are imported before use.

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


const gallery = vistaView({
  elements: '#gallery a',
  maxZoomLevel: 3,
  preloads: 2,
});
```

--------------------------------

### Minimal Setup with Direct Images (JavaScript)

Source: https://vistaview.jujiplay.com/core/configuration/basic

Initialize VistaView by providing a CSS selector for image elements. This configuration uses the 'data-vistaview-src' attribute for full-size images.

```javascript
vistaView({
  elements: '#gallery img',
});
```

--------------------------------

### Initialize VistaView using CDN (UMD)

Source: https://vistaview.jujiplay.com/integrations/vanilla

Includes VistaView using a CDN link for HTML files, suitable for quick prototyping or environments without module bundlers. The library is available globally.

```html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/vistaview/dist/style.css" />
  </head>
  <body>
    <div id="gallery">
      <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>


    <script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
    <script>
      // VistaView is available globally
      const gallery = VistaView.vistaView({
        elements: '#gallery a',
      });
    </script>
  </body>
</html>
```

--------------------------------

### Minimal Setup with Direct Images (HTML)

Source: https://vistaview.jujiplay.com/core/configuration/basic

Configure VistaView by selecting image elements directly. Full-size image URLs are specified using the 'data-vistaview-src' attribute.

```html
<div id="gallery">
  <img src="/images/thumb1.jpg" data-vistaview-src="/images/full1.jpg" alt="Photo 1" />
  <img src="/images/thumb2.jpg" data-vistaview-src="/images/full2.jpg" alt="Photo 2" />
</div>
```

--------------------------------

### VistaView Gallery with Download Extension in Svelte

Source: https://vistaview.jujiplay.com/integrations/svelte

Integrates the download extension into the Svelte gallery, allowing users to download images. This involves importing the extension and configuring controls to include the 'download' button.

```svelte
<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>

```

--------------------------------

### Example of Event Order Logging

Source: https://vistaview.jujiplay.com/extensions/logger

Illustrates how to use the Logger extension to observe the sequence of lifecycle events. Interacting with the lightbox after setting up the logger will show the order of operations in the console.

```javascript
vistaView({
  elements: '#gallery a',
  extensions: [logger()],
});

```

```text
Logger: Opened ...
Logger: Image initialized ...
Logger: Image viewed ...
Logger: Image viewed ...
Logger: Closed ...

```

--------------------------------

### Control VistaView component imperatively using a ref in React

Source: https://vistaview.jujiplay.com/integrations/react

Shows how to use a `ref` with the `VistaView` component to gain imperative control, such as opening the gallery programmatically. It involves importing `useRef` and `VistaInterface`.

```jsx
'use client'; // Required for Next.js and other React Server Components frameworks


import { useRef } from 'react';
import { VistaView } from 'vistaview/react';
import type { VistaInterface } from 'vistaview';
import 'vistaview/style.css';


function Gallery() {
  const vistaRef = useRef<VistaInterface>(null);


  return (
    <>
      <VistaView ref={vistaRef} selector="> a">
        <a href="/images/full.jpg">
          <img src="/images/thumb.jpg" alt="Photo" />
        </a>
      </VistaView>
      <button onClick={() => vistaRef.current?.open(0)}>Open Gallery</button>
    </>
  );
}

```

--------------------------------

### Configure VistaView with Download and YouTube Extensions (JavaScript)

Source: https://vistaview.jujiplay.com/core/configuration/extensions

This snippet demonstrates how to initialize VistaView with custom extensions, specifically the download and youtubeVideo extensions. It also shows how to add the 'download' control to the top-right corner of the UI. Ensure the 'vistaview' and its extension modules are correctly imported.

```javascript
import { vistaView } from 'vistaview';
import { download } from 'vistaview/extensions/download';
import { youtubeVideo } from 'vistaview/extensions/youtube-video';


vistaView({
  elements: '#gallery a',
  controls: {
    // Add 'download' to controls for download extension
    topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
  },
  extensions: [download(), youtubeVideo()],
});
```

--------------------------------

### VistaView with Download Extension (ESM)

Source: https://vistaview.jujiplay.com/integrations/vanilla

Integrates VistaView with the download extension using JavaScript modules (ESM). The `download` extension is imported and included in the `extensions` array, adding a download button to the gallery controls.

```javascript
<script type="module">
  import { vistaView } from 'vistaview';
  import { download } from 'vistaview/extensions/download';
  import 'vistaview/style.css';


  vistaView({
    elements: '#gallery a',
    controls: {
      topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
    },
    extensions: [download()],
  });
</script>
```

--------------------------------

### Vue Composable: `useVistaView` for Gallery Control

Source: https://vistaview.jujiplay.com/integrations/vue

Implement image galleries using the `useVistaView` composable for fine-grained control. This approach allows programmatic interaction with the gallery, such as opening, navigating, and managing images.

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


const id = useId();
const vista = useVistaView({
  elements: `#${CSS.escape(id)} a`,
});
</script>


<template>
  <div :id="id">
    <a href="/images/full.jpg">
      <img src="/images/thumb.jpg" alt="Photo" />
    </a>
  </div>
  <button @click="vista.open(0)">Open Gallery</button>
  <button @click="vista.next()">Next</button>
  <button @click="vista.prev()">Previous</button>
</template>
```

--------------------------------

### Programmatic Gallery Setup (JavaScript)

Source: https://vistaview.jujiplay.com/core/configuration/basic

Create a gallery programmatically by passing an array of image configuration objects to VistaView. This method supports responsive images via 'srcSet' but does not support thumbnails.

```javascript
import type { VistaImgConfig } from 'vistaview';


const images: VistaImgConfig[] = [
  { src: '/images/photo1.jpg', alt: 'Photo 1' },
  { src: '/images/photo2.jpg', alt: 'Photo 2' },
  {
    src: '/images/photo3.jpg',
    alt: 'Photo 3',
    srcSet: '/images/photo3-800.jpg 800w, /images/photo3-1200.jpg 1200w',
  },
];


vistaView({
  elements: images,
});
```

--------------------------------

### Basic VistaView Initialization with HTML Elements (ESM)

Source: https://vistaview.jujiplay.com/integrations/vanilla

Sets up a basic VistaView gallery using an HTML structure and initializing it with JavaScript modules (ESM). It targets anchor tags within a div with id 'gallery'.

```javascript
<div id="gallery">
  <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>


<script type="module">
  import { vistaView } from 'vistaview';
  import 'vistaview/style.css';


  const gallery = vistaView({
    elements: '#gallery a',
  });
</script>
```

--------------------------------

### Using Default imageSetup Function in VistaView

Source: https://vistaview.jujiplay.com/api-reference/lifecycle

Shows how to incorporate the default `imageSetup` function into a custom `imageSetupFunction`. This allows for custom image preparation logic to be added alongside or instead of the default setup.

```javascript
import { imageSetup } from 'vistaview';


vistaView({
  elements: '#gallery a',
  imageSetupFunction: (data, vistaView) => {
    imageSetup(data, vistaView);
    // Add custom setup logic
  },
});
```

--------------------------------

### Control image gallery imperatively using the useVistaView hook in React

Source: https://vistaview.jujiplay.com/integrations/react

Demonstrates the `useVistaView` hook for more granular control over the gallery instance in React. It allows programmatic control of gallery actions like opening and navigation.

```jsx
'use client'; // Required for Next.js and other React Server Components frameworks


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


function Gallery() {
  const id = useId();
  const vista = useVistaView({
    elements: `#${CSS.escape(id)} a`,
  });


  return (<>
    <div id={id}>
      <a href="/images/full.jpg">
        <img src="/images/thumb.jpg" alt="Photo" />
      </a>
    </div>
    <button onClick={() => vista.open(0)}>Open Gallery</button>
    <button onClick={() => vista.next()}>Next</button>
    <button onClick={() => vista.prev()}>Previous</button>
  </>);
}

```

--------------------------------

### Initialize VistaView with Custom Extension (JavaScript)

Source: https://vistaview.jujiplay.com/extensions/authoring

This JavaScript code shows how to initialize the VistaView lightbox and include a custom extension. It imports the `vistaView` function and a custom extension, then passes an array containing the extension instance to the `extensions` option.

```javascript
import { vistaView } from 'vistaview';
import { myExtension } from './my-extension';


vistaView({
  elements: '#gallery a',
  extensions: [myExtension()],
});
```

--------------------------------

### Log Example: Lightbox Open

Source: https://vistaview.jujiplay.com/extensions/logger

This snippet shows the console output when the Vistaview lightbox is opened. It logs a confirmation message indicating the opening of the view.

```text
Logger: Opened VistaView { ... }

```

--------------------------------

### Minimal Setup with Anchor Tags (HTML)

Source: https://vistaview.jujiplay.com/core/configuration/basic

The simplest way to use VistaView involves using anchor tags that wrap images. This method is recommended for its progressive loading, JavaScript-free fallback, and SEO benefits.

```html
<div id="gallery">
  <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>
```

--------------------------------

### Usage Example with Callback

Source: https://vistaview.jujiplay.com/extensions/logger

Demonstrates using the Logger extension alongside a custom callback function for the 'onOpen' event. This allows logging Vistaview events while also executing custom logic upon opening.

```javascript
import { vistaView } from 'vistaview';
import { logger } from 'vistaview/extensions/logger';
import 'vistaview/style.css';


vistaView({
  elements: '#gallery a',
  extensions: [logger()],
  onOpen: () => {
    console.log('App: Gallery opened');
  },
});

```

--------------------------------

### VistaView with Control Buttons (ESM)

Source: https://vistaview.jujiplay.com/integrations/vanilla

Demonstrates how to initialize VistaView and add custom control buttons (Open, Next, Previous) using JavaScript modules (ESM). Event listeners are attached to these buttons to interact with the gallery instance.

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


<button id="open-btn">Open Gallery</button>
<button id="next-btn">Next</button>
<button id="prev-btn">Previous</button>


<script type="module">
  import { vistaView } from 'vistaview';
  import 'vistaview/style.css';


  const gallery = vistaView({
    elements: '#gallery a',
  });


  document.getElementById('open-btn').addEventListener('click', () => {
    gallery.open(0);
  });


  document.getElementById('next-btn').addEventListener('click', () => {
    gallery.next();
  });


  document.getElementById('prev-btn').addEventListener('click', () => {
    gallery.prev();
  });
</script>
```

--------------------------------

### Initialize VistaView with onOpen Callback

Source: https://vistaview.jujiplay.com/core/configuration/events

This snippet demonstrates how to initialize VistaView and execute a function when the lightbox opens. It selects anchor elements within a gallery and logs a message to the console upon opening.

```javascript
vistaView({
  elements: '#gallery a',
  onOpen: (vistaView) => {
    console.log('Lightbox opened');
  },
});
```

--------------------------------

### VistaView Gallery with Custom Options in Svelte

Source: https://vistaview.jujiplay.com/integrations/svelte

Configures the Svelte gallery with custom options such as zoom levels, preloading, animation duration, and event callbacks like `onOpen` and `onClose`. Options are defined separately to avoid recreation.

```svelte
<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>

```

--------------------------------

### Instantiate VistaView with CSS Selector or Image Config

Source: https://vistaview.jujiplay.com/api-reference/classes/vistaview

Creates a new VistaView instance, initializing the lightbox viewer. It accepts either a CSS selector string to target elements or an array of image configuration objects. Optional configuration options can be provided to customize behavior like zoom levels and preloading.

```typescript
const viewer = new VistaView('.gallery-item', {
  maxZoomLevel: 3,
  preloads: 2,
});

const viewer = new VistaView([
  { src: 'image1.jpg', alt: 'First image' },
  { src: 'image2.jpg', alt: 'Second image' },
]);
```

--------------------------------

### Vue Component: VistaView with Custom Options

Source: https://vistaview.jujiplay.com/integrations/vue

Configure the VistaView component with custom options. This includes setting zoom levels, preload counts, animation durations, and defining callbacks for gallery events like opening and closing.

```vue
<script setup>
import { VistaView } from 'vistaview/vue';
import type { VistaOpt } from 'vistaview';
import 'vistaview/style.css';


// Define options outside component 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'),
};
</script>


<template>
  <!-- selector defaults to '> a' -->
  <VistaView :options="options">
    <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>
  </VistaView>
</template>
```

--------------------------------

### Usage Example with Vidyard Links

Source: https://vistaview.jujiplay.com/extensions/vidyard-video

Demonstrates how to use the Vidyard Video extension by creating anchor links to Vidyard video URLs within a container. The JavaScript initializes VistaView with the Vidyard extension.

```html
<div id="gallery">
  <a href="https://play.vidyard.com/abc123def">
    <img src="/thumbnails/video1.jpg" alt="Video 1" />
  </a>


  <a href="https://video.vidyard.com/watch/abc123def">
    <img src="/thumbnails/video2.jpg" alt="Video 2" />
  </a>
</div>


<script type="module">
  import { vistaView } from 'vistaview';
  import { vidyardVideo } from 'vistaview/extensions/vidyard-video';
  import 'vistaview/style.css';


  vistaView({
    elements: '#gallery a',
    extensions: [vidyardVideo()],
  });
</script>
```
Tokens:
Raw