### Complete Example: Dynamic Gallery with Thumbnails

Source: https://vistaview.jujiplay.com/llms-extensions.txt

A comprehensive example demonstrating how to dynamically generate a gallery of YouTube videos using VistaView. It uses the `getYouTubeThumbnail` helper for previews.

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

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

### Complete Wistia Video Integration Example

Source: https://vistaview.jujiplay.com/llms-extensions.txt

A comprehensive example showing dynamic gallery creation with Wistia video thumbnails using `getWistiaThumbnail` and initializing VistaView with the `wistiaVideo` extension.

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

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

### Initialize VistaView with Multiple Extensions (JavaScript)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates how to initialize VistaView with several extensions, including YouTube, Vimeo, and download, for handling different media types. This example assumes you have the 'vistaview' library and its extensions installed.

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

vistaView({
  elements: '#gallery a',
  extensions: [
    youtubeVideo(),
    vimeoVideo(),
    download(), // Works for images, not videos
  ],
});
```

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

### Custom Image Setup Function Implementation

Source: https://vistaview.jujiplay.com/llms-api.txt

Provides an example of a custom image setup function for vistaView. This enables adding custom logic or modifications to the image setup process, in addition to the default setup provided by the library.

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

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

### Complete Example with Dynamic Gallery

Source: https://vistaview.jujiplay.com/llms-extensions.txt

A full example demonstrating how to dynamically create a gallery of Vimeo videos using the `vimeoVideo` extension and `getVimeoThumbnail` helper. This includes setting up the gallery, generating thumbnails, and initializing VistaView.

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

<script type="module">
  import { vistaView } from 'vistaview';
  import { vimeoVideo, getVimeoThumbnail } from 'vistaview/extensions/vimeo-video';
  import 'vistaview/style.css';

  // Array of Vimeo video URLs
  const videos = [
    'https://vimeo.com/123456789',
    'https://player.vimeo.com/video/987654321',
    'https://vimeo.com/555666777',
  ];

  // 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 = getVimeoThumbnail(videoUrl);
    img.alt = 'Video thumbnail';
    img.style.width = '200px';

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

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

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

### Simple VistaView Extension Example

Source: https://vistaview.jujiplay.com/llms-extensions.txt

A minimal example demonstrating how to create a basic VistaView extension. This extension logs a message to the console when the lightbox opens. It requires the `vistaview` and the extension module to be imported.

```typescript
import type { VistaExtension } from 'vistaview';

export function myExtension(): VistaExtension {
  return {
    name: 'myExtension',
    onOpen: (vistaView) => {
      console.log('Lightbox opened!');
    },
  };
}
```

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

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

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

### Complete Example: Dailymotion Video Extension Integration (HTML/JavaScript)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

A full example demonstrating how to dynamically create a gallery of Dailymotion videos using VistaView. It generates links with thumbnails and initializes VistaView with the Dailymotion Video extension.

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

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

### State Persistence Example using Closures

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates how to maintain state across extension method calls using closure variables. This example shows a simple counter that increments each time the `onImageView` hook is triggered. It's a fundamental pattern for managing extension-specific data.

```typescript
export function statefulExtension(): VistaExtension {
  let count = 0;
  let cache = new Map();

  return {
    name: 'statefulExtension',
    onImageView: () => {
      count++; // Persists between calls
    },
  };
}
```

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

### Wistia Video Extension Usage Example

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates how to link to Wistia videos using the Wistia Video extension. The `href` attribute should point to a valid Wistia video URL.

```html
<div id="gallery">
  <a href="https://fast.wistia.net/embed/iframe/abc123def">
    <img src="/thumbnails/video1.jpg" alt="Video 1" />
  </a>

  <a href="https://username.wistia.com/medias/abc123def">
    <img src="/thumbnails/video2.jpg" alt="Video 2" />
  </a>
</div>
```

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

### Using VistaView Extensions with ESM Modules

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Shows how to import and configure VistaView with extensions like 'download' and 'youtubeVideo' when using ESM (ECMAScript Modules) for bundlers. This example initializes VistaView for a gallery and sets custom controls.

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

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

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

### HTML Example for Multiple Maps with OSM Links

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates how to create a gallery of images that link to OpenStreetMap tiles using a custom 'osm://' URL scheme. Each link contains coordinates and zoom level for specific locations like Paris, Tokyo, and Sydney.

```html
<div id="gallery">
  <a href="osm://48.8566,2.3522,13">
    <img src="/thumbnails/paris.jpg" alt="Paris, France" />
  </a>

  <a href="osm://35.6762,139.6503,12">
    <img src="/thumbnails/tokyo.jpg" alt="Tokyo, Japan" />
  </a>

  <a href="osm://-33.8688,151.2093,14">
    <img src="/thumbnails/sydney.jpg" alt="Sydney, Australia" />
  </a>
</div>
```

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

### Install Dailymotion Video Extension with UMD (HTML/JavaScript)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates installing the Dailymotion Video extension using UMD modules via CDN. It includes the necessary script tags for VistaView and the extension, then initializes VistaView in a script block.

```html
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/dailymotion-video.umd.js"></script>

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

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

### Initialize VistaView with Mapbox Extension (HTML - UMD)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Shows the UMD (CDN) installation of the Mapbox extension for VistaView. Includes necessary script tags for VistaView and the mapbox extension, and initializes the view with a Mapbox access token.

```html
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/mapbox.umd.js"></script>

<script>
  VistaView.vistaView({
    elements: '#gallery a',
    extensions: [VistaView.mapbox({ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN' })],
  });
</script>
```

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

### Initialize VistaView with Mapbox Extension using Module Script (JavaScript)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

An example of initializing VistaView with the Mapbox extension within a JavaScript module script. It imports necessary components and configures the extension with an access token.

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

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

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

### Using VistaView Extensions with UMD (CDN)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Illustrates how to integrate VistaView and its extensions using UMD (Universal Module Definition) format via CDN links. This example includes scripts for VistaView, download, and youtube-video extensions, then initializes VistaView with these extensions.

```javascript
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/download.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/youtube-video.umd.js"></script>

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

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

### Import VistaView Image Setup Function

Source: https://vistaview.jujiplay.com/llms-api.txt

Imports the default image setup function from the 'vistaview' library. This function is responsible for initial setup and configuration of images displayed within the lightbox.

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

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

### Quick Start with VistaView JavaScript

Source: https://context7_llms

Demonstrates the basic usage of VistaView in JavaScript. It imports the necessary function and CSS, then initializes VistaView to enhance specified anchor elements as a gallery.

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

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

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

### Install YouTube Video Extension (UMD/CDN)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the YouTube Video extension for VistaView using UMD via CDN. It includes script tags for VistaView and its extension, then initializes VistaView with the extension.

```html
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/youtube-video.umd.js"></script>

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

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

### Install Streamable Video Extension (UMD)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Streamable Video extension for VistaView using UMD via CDN. It includes the necessary scripts and initializes VistaView with the streamableVideo extension.

```html
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/streamable-video.umd.js"></script>

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

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

### Integrate Google Maps Thumbnails with VistaView in HTML

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates how to use generated static map URLs within an HTML structure for a gallery. It shows `<img>` tags with `src` attributes pointing to static map URLs and links to interactive Google Maps. The example also includes the necessary JavaScript initialization for the `vistaView` component, enabling the gallery and its Google Maps extension.

```html
<div id="gallery">
  <a href="https://www.google.com/maps/@40.7580,-73.9855,15z">
    <img
      src="https://maps.googleapis.com/maps/api/staticmap?center=40.7580,-73.9855&zoom=15&size=800x600&maptype=roadmap&markers=color:red|40.7580,-73.9855&key=YOUR_API_KEY"
      alt="Central Park, NYC"
    />
  </a>
  <a href="https://www.google.com/maps?q=Times+Square">
    <img
      src="https://maps.googleapis.com/maps/api/staticmap?center=Times+Square&zoom=15&size=800x600&maptype=roadmap&key=YOUR_API_KEY"
      alt="Times Square"
    />
  </a>
</div>

<script type="module">
  import { vistaView } from 'vistaview';
  import { googleMaps } from 'vistaview/extensions/google-maps';
  import 'vistaview/style.css';

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

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

### VistaView Available Methods (JavaScript)

Source: https://vistaview.jujiplay.com/llms-integrations.txt

Provides examples of using various methods available on a VistaView instance, such as opening, closing, navigating through images, getting the current index, and destroying the instance. These methods allow programmatic control over the gallery.

```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();
```

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

### Install YouTube Video Extension (ESM)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the YouTube Video extension for VistaView using ESM module bundlers. It imports necessary components and applies the extension to gallery links.

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

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

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

### Initialize VistaView with Mapbox Extension (JavaScript - ESM)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates the ESM installation of the Mapbox extension for VistaView. Requires 'vistaview' and 'vistaview/extensions/mapbox' modules, along with a Mapbox access token.

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

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

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

### Debugging Custom Extensions with Logger (JavaScript)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Shows how to integrate the logger extension alongside custom extensions for debugging. This example assumes 'myCustomExtension' is defined elsewhere. It logs all events for easier troubleshooting.

```javascript
import { logger } from 'vistaview/extensions/logger';
import { myCustomExtension } from './my-extension';

vistaView({
  elements: '#gallery a',
  extensions: [
    logger(), // Log all events
    myCustomExtension(), // Your extension
  ],
});
```

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

### Install Vimeo Video Extension (UMD)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Vimeo Video extension for VistaView using UMD format, typically for CDN-based setups. This allows direct inclusion via script tags.

```html
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/vimeo-video.umd.js"></script>

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

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

### Install Dailymotion Video Extension with ESM (JavaScript)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Shows how to install the Dailymotion Video extension for VistaView using ESM module bundlers. It imports necessary components from 'vistaview' and the extension, then initializes 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()],
});
```

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

### Install Wistia Video Extension (ESM)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Wistia Video extension for VistaView using ECMAScript Modules (ESM). This is suitable for modern build tools and bundlers.

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

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

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

### Basic VistaView Setup with Anchor Tags (HTML & TypeScript)

Source: https://vistaview.jujiplay.com/llms-core.txt

Implement a minimal VistaView setup using anchor tags to wrap images. This approach supports progressive loading and is SEO-friendly. The HTML structure requires anchor tags with `href` pointing to full-size images and `img` tags for thumbnails. The TypeScript code initializes VistaView by selecting these anchor tags.

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

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

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

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

### Responsive Images with Width Descriptors Example

Source: https://vistaview.jujiplay.com/llms-core.txt

An example demonstrating how VistaView handles responsive images with pixel calculations, considering aspect ratio and device pixel ratio (DPI). It uses the `srcset` attribute with width descriptors (`w`) to specify image widths.

```html
<!-- 
A portrait photo (3000×4000px) in a 1920×1080 viewport:
- Image is constrained by viewport height: 1080px tall
- Display width: 1080 × (3000/4000) = 810px wide
- On 2× DPI: requires 810 × 2 = 1620px → selects large-2400.jpg
- When zoomed 2×: 1620px display × 2 = 3240px → still uses large-2400.jpg 
-->
<img
  src="/thumb.jpg"
  srcset="/small-600.jpg 600w, /medium-1200.jpg 1200w, /large-2400.jpg 2400w"
  alt="Adaptive resolution"
/>
```

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

### Install Vidyard Video Extension (UMD)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Vidyard Video extension for VistaView using UMD via CDN. It includes the necessary scripts and initializes VistaView with the vidyardVideo extension.

```html
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/vidyard-video.umd.js"></script>

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

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

### Basic Usage of Image Story Extension

Source: https://vistaview.jujiplay.com/llms-extensions.txt

This basic example demonstrates the core functionality of the Image Story extension. It configures VistaView to use the imageStory extension and provides a simple `getStory` function that generates placeholder HTML content for each image based on its index.

```javascript
import { imageStory } from 'vistaview/extensions/image-story';

vistaView({
  elements: '#gallery a',
  extensions: [
    imageStory({
      getStory: async (index) => ({
        content: `
          <h2>Image ${index + 1}</h2>
          <p>This is the story for image ${index + 1}.</p>
        `,
      }),
    }),
  ],
});
```

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

### Mixing Images and Google Maps in a VistaView Gallery

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Illustrates how to create a gallery that combines regular images with interactive Google Maps. This example shows a simple HTML structure where `<a>` tags contain either image `src` attributes or Google Maps links, demonstrating the versatility of VistaView in handling mixed content types.

```html
<div id="gallery">
  <!-- Regular image -->
  <a href="/images/photo1.jpg">
    <img src="/thumbnails/photo1.jpg" alt="Beach Photo" />
  </a>

  <!-- Google Map -->
  <a href="https://www.google.com/maps/@40.7580,-73.9855,15z">
    <img src="/thumbnails/map.jpg" alt="Central Park" />
  </a>

  <!-- Another image -->
  <a href="/images/photo2.jpg">
    <img src="/thumbnails/photo2.jpg" alt="Mountain Photo" />
  </a>
</div>
```

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

### Create a Simple Logger Extension for VistaView

Source: https://vistaview.jujiplay.com/llms-extensions.txt

This extension provides basic logging for 'onOpen' and 'onClose' events in VistaView. It's a simple example demonstrating how to create a VistaExtension. No external dependencies are required.

```typescript
import type { VistaExtension } from 'vistaview';

export function simpleLogger(): VistaExtension {
  return {
    name: 'simpleLogger',
    onOpen: () => console.log('Opened'),
    onClose: () => console.log('Closed'),
  };
}
```

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

### Install Wistia Video Extension (UMD/CDN)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Wistia Video extension for VistaView using the Universal Module Definition (UMD) format via CDN. This is useful for direct script inclusion in HTML.

```html
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/wistia-video.umd.js"></script>

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

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

### Basic VistaView Gallery Implementation in SolidJS

Source: https://vistaview.jujiplay.com/llms-integrations.txt

Shows a fundamental example of using the `useVistaView` hook in a SolidJS component to create a simple image gallery. It requires importing the hook and CSS, and then initializing VistaView with a selector for gallery elements.

```tsx
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>
  );
}
```

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

### Install Vimeo Video Extension (ESM)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Vimeo Video extension for VistaView using ESM modules. This method is suitable for modern JavaScript projects using module bundlers.

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

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

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

### Install VistaView Package (bun)

Source: https://vistaview.jujiplay.com/llms-integrations.txt

Installs the VistaView package using bun. bun is a fast all-in-one JavaScript runtime.

```bash
bun add vistaview
```

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

### Install Streamable Video Extension (ESM)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Streamable Video extension for VistaView using ESM module bundlers. It imports necessary components from 'vistaview' and applies the extension to gallery links.

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

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

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

### Install VistaView using npm

Source: https://context7_llms

Installs the VistaView library using the npm package manager. This is the first step to integrate VistaView into your web project.

```bash
npm install vistaview
```

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

### Install Vidyard Video Extension (ESM)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Vidyard Video extension for VistaView using ESM module bundlers. It imports necessary components from 'vistaview' and applies the extension to gallery links.

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

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

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

### Install VistaView using package managers (npm, yarn, pnpm, bun)

Source: https://vistaview.jujiplay.com/llms-integrations.txt

Demonstrates how to install the vistaview package using various popular JavaScript package managers. This is the initial step before integrating VistaView into your project.

```bash
npm install vistaview
```

```bash
yarn add vistaview
```

```bash
pnpm add vistaview
```

```bash
bun add vistaview
```

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

### Example CSS for Sticky Header with VistaView

Source: https://vistaview.jujiplay.com/llms-core.txt

An example CSS snippet demonstrating how to configure a sticky header to appear above the VistaView lightbox when it is closed. By setting the header's z-index to 2, it will layer correctly over the default `initialZIndex` of 1 for the closed lightbox.

```css
/* Your sticky header */
.site-header {
  position: sticky;
  z-index: 2; /* Appears above closed lightbox (z-index: 1) */
}

```

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

### Custom Initialization

Source: https://vistaview.jujiplay.com/llms-api.txt

Override the default initialization process with a custom function to add specific setup logic.

```APIDOC
## Custom Initialization

### Description
Allows overriding the default initialization of VistaView to include custom setup steps.

### Method
`initFunction`

### Parameters
#### Request Body
- **vistaView** (VistaView) - Required - The VistaView instance.

### Request Example
```typescript
import { vistaView, init } from 'vistaview';

vistaView({
  elements: '#gallery a',
  initFunction: (vistaView) => {
    // Call default initialization
    init(vistaView);

    // Add custom initialization
    console.log('Custom initialization');
    console.log('Total images:', vistaView.state.elmLength);
  },
});
```

### Response
N/A (This is a configuration option)
```

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

### Basic VistaView Gallery Initialization (HTML)

Source: https://vistaview.jujiplay.com/llms-integrations.txt

Demonstrates the basic setup for a VistaView image gallery using HTML anchor tags for image links and a script block for initialization. It requires a container element with anchor tags pointing to images.

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

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

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

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

### VistaView Gallery with Control Buttons (HTML)

Source: https://vistaview.jujiplay.com/llms-integrations.txt

This example shows how to initialize VistaView and bind control buttons (Open, Next, Previous) to its methods. It requires specific HTML elements for the gallery items and buttons, along with JavaScript event listeners.

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

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

### Custom Image Setup

Source: https://vistaview.jujiplay.com/llms-api.txt

Implement custom logic for setting up images during the viewing process.

```APIDOC
## Custom Image Setup

### Description
Provides a way to customize how each image is set up before being displayed.

### Method
`imageSetupFunction`

### Parameters
#### Request Body
- **data** (VistaData) - Required - The data associated with the current image.
- **vistaView** (VistaView) - Required - The VistaView instance.

### Request Example
```typescript
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);
  },
});
```

### Response
N/A (This is a configuration option)
```

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

### Install Logger Extension (ESM)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Logger extension using ECMAScript Modules (ESM), typically with a module bundler like Webpack or Rollup. This method imports the necessary components from the `vistaview` library and its extensions. Ensure `vistaview` and the logger extension are installed via npm or yarn.

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

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

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

### OpenStreetMap URL Format Example

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Illustrates the required URL format for embedding OpenStreetMap maps using the 'osm://' protocol in the href attribute. It specifies the latitude, longitude, and zoom level parameters.

```plaintext
osm://LATITUDE,LONGITUDE,ZOOM

Example:

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

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

### Install Google Maps Extension for VistaView (UMD)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs and initializes the Google Maps extension for VistaView using the Universal Module Definition (UMD) format, suitable for direct inclusion via CDN. It loads VistaView and the Google Maps extension from unpkg.com and then initializes VistaView.

```html
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/google-maps.umd.js"></script>

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

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

### VistaImageSetupFn Type for Image Setup

Source: https://vistaview.jujiplay.com/llms-api.txt

Defines the signature for custom setup functions executed during image navigation. It receives navigation data and the VistaView instance for context.

```typescript
type VistaImageSetupFn = (data: VistaData, vistaView: VistaView) => void;
```

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

### Initialize VistaView with OpenStreetMap Extension (UMD)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Illustrates how to initialize VistaView with the OpenStreetMap extension using the Universal Module Definition (UMD) format, typically loaded via CDN. This setup is suitable for projects not using module bundlers.

```javascript
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/openstreetmap.umd.js"></script>

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

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

### Start Animated Transition with VistaHiresTransition

Source: https://vistaview.jujiplay.com/llms-api.txt

The static start method of VistaHiresTransition initiates an animated transition for a VistaBox instance. It requires the VistaBox, a completion callback, a condition to pause the animation, and the target state (dimensions and transform). This is used internally by VistaImage for smooth visual changes.

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

```typescript
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 },
  },
});
```

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

### Integrating VistaView Gallery with SolidStart using Lazy Loading

Source: https://vistaview.jujiplay.com/llms-integrations.txt

Provides an example of how to use VistaView within a SolidStart application, emphasizing the use of client-side rendering and lazy loading for components. This ensures that the gallery is only rendered in the browser.

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

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

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

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

### Install Image Story Extension via UMD (CDN)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

This HTML snippet shows how to set up the Image Story extension for VistaView using Universal Module Definition (UMD) via Content Delivery Network (CDN) links. It includes the necessary CSS and JavaScript files for VistaView and the imageStory extension before initializing VistaView.

```html
<link rel="stylesheet" href="https://unpkg.com/vistaview/dist/style.css" />
<link rel="stylesheet" href="https://unpkg.com/vistaview/dist/styles/extensions/image-story.css" />
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/image-story.umd.js"></script>

<script>
  VistaView.vistaView({
    elements: '#gallery a',
    extensions: [
      VistaView.imageStory({
        getStory: async (index) => {
          const response = await fetch(`/api/stories/${index}`);
          const data = await response.json();
          return { content: data.html };
        },
      }),
    ],
  });
</script>
```

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

### Usage: Link to YouTube Videos

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates how to create links to YouTube videos within an HTML gallery. The extension will recognize these links and embed the videos.

```html
<div id="gallery">
  <!-- Various YouTube URL formats supported -->
  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
    <img src="/thumbnails/video1.jpg" alt="Video 1" />
  </a>

  <a href="https://youtu.be/dQw4w9WgXcQ">
    <img src="/thumbnails/video2.jpg" alt="Video 2" />
  </a>

  <a href="https://www.youtube.com/embed/dQw4w9WgXcQ">
    <img src="/thumbnails/video3.jpg" alt="Video 3" />
  </a>
</div>
```

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

### Initialize VistaView with Options API (Vue)

Source: https://vistaview.jujiplay.com/llms-integrations.txt

Provides an example of initializing and managing the VistaView gallery using Vue's Options API. It involves creating a `vista` instance in the `mounted` hook and destroying it in `beforeUnmount` to prevent memory leaks. This approach is suitable for developers who prefer the Options API structure.

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

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

### Install Logger Extension (UMD/CDN)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs the Logger extension using the Universal Module Definition (UMD) format via a Content Delivery Network (CDN). This method is suitable for projects that do not use module bundlers and include scripts directly in HTML. It requires loading both the main `vistaview.umd.js` and the `logger.umd.js` extension scripts.

```html
<script src="https://unpkg.com/vistaview/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/dist/extensions/logger.umd.js"></script>

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

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

### Embed Mapbox Maps using Coordinate URLs (HTML)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Provides an example of HTML structure using anchor tags with Mapbox-compatible URLs to display maps in the lightbox. Supports 'mapbox://' protocol and standard coordinate formats.

```html
<div id="gallery">
  <!-- Use mapbox:// protocol or coordinates in URL -->
  <a href="mapbox://40.7580,-73.9855,15">
    <img src="/thumbnails/map1.jpg" alt="Central Park, NYC" />
  </a>

  <a href="mapbox://34.0522,-118.2437,12">
    <img src="/thumbnails/map2.jpg" alt="Los Angeles" />
  </a>

  <!-- Or use standard coordinate format -->
  <a href="coords://51.5074,-0.1278,13">
    <img src="/thumbnails/map3.jpg" alt="London" />
  </a>
</div>
```

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

### Initialize VistaView with Logger Extension (JavaScript)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates how to initialize VistaView with the logger extension to capture and display console logs. Requires the 'vistaview' and 'vistaview/extensions/logger' modules. Logs can be viewed in the browser's developer console.

```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');
  },
});
```

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

### Install VistaView Package (yarn)

Source: https://vistaview.jujiplay.com/llms-integrations.txt

Installs the VistaView package using yarn. This is an alternative to npm for package management.

```bash
yarn add vistaview
```

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

### Install Image Story Extension via ESM

Source: https://vistaview.jujiplay.com/llms-extensions.txt

This code demonstrates how to install and configure the Image Story extension for VistaView using ECMAScript Modules (ESM), commonly used with module bundlers like Webpack or Rollup. It includes necessary imports for vistaView, the imageStory extension, and their respective CSS files.

```javascript
import { vistaView } from 'vistaview';
import { imageStory } from 'vistaview/extensions/image-story';
import 'vistaview/style.css';
import 'vistaview/styles/extensions/image-story.css';

vistaView({
  elements: '#gallery a',
  extensions: [
    imageStory({
      getStory: async (index) => {
        const response = await fetch(`/api/stories/${index}`);
        const data = await response.json();
        return { content: data.html };
      },
    }),
  ],
});
```

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

### Open VistaView Lightbox

Source: https://vistaview.jujiplay.com/llms-api.txt

Opens the VistaView lightbox viewer, optionally specifying the starting image index. The method handles DOM injection, event setup, and calls extension hooks.

```typescript
const viewer = new VistaView('.gallery-item');
viewer.open(2); // Opens at the third image
```

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

### Custom Image Setup Function for VistaView

Source: https://vistaview.jujiplay.com/llms-api.txt

This TypeScript snippet illustrates overriding the default image setup process in VistaView. It includes calling the default `imageSetup` function and then executing custom logic, like logging the index of the image being set up. Depends on the 'vistaview' library.

```typescript
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);
  },
});
```

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

### Understanding Event Order with Logger (JavaScript)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Illustrates how to use the logger extension to understand the sequence of VistaView lifecycle events. By observing the console output after interacting with the lightbox, developers can track the order of operations.

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

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

### Install Google Maps Extension for VistaView (ESM)

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Installs and initializes the Google Maps extension for VistaView using ECMAScript Modules (ESM). This method is suitable for modern JavaScript projects using module bundlers like Webpack or Rollup. It requires importing 'vistaView' and 'googleMaps' from their respective modules.

```javascript
import { vistaView } from 'vistaview';
import { googleMaps } from 'vistaview/extensions/google-maps';
import 'vistaview/style.css';

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

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

### Basic VistaView Gallery in Svelte

Source: https://vistaview.jujiplay.com/llms-integrations.txt

Demonstrates the basic setup of VistaView in a Svelte component to create an image gallery from anchor elements. It requires importing the `useVistaView` hook and the CSS styles.

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

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

### Fetch Story Data from API

Source: https://vistaview.jujiplay.com/llms-extensions.txt

Demonstrates how to fetch story data from a specified API endpoint. It handles potential errors during the fetch operation and formats the response into HTML content. Requires the `fetch` API.

```javascript
imageStory({
  getStory: async (index) => {
    try {
      const response = await fetch(`/api/stories/${index}`);
      const data = await response.json();

      return {
        content: `
          <h2>${data.title}</h2>
          <p>${data.description}</p>
          <p><small>By ${data.author} on ${data.date}</small></p>
        `,
      };
    } catch (error) {
      return {
        content: '<p>Story could not be loaded.</p>',
      };
    }
  },
});
```