jeep-photoviewer

PhotoViewer Stencil Component

Usage no npm install needed!

<script type="module">
  import jeepPhotoviewer from 'https://cdn.skypack.dev/jeep-photoviewer';
</script>

README

Built With Stencil

jeep-photoviewer

Stencil web component using a CSS grid to display one image or a set of images as gallery or slider and using CSS snap points to walk through images. A selected image can be viewed in fullscreen mode with zoom in/out and pan capabilities.

The Web component tag is is the main component. It is using the following embedded components:

  • Horizontal scrolling through images.
  • Set of buttons (Share , Fullscreen, Close) which could be visible or hidden (Single Tap).
  • Zoom In (Double Tap) / Out (Single Tap) and Pan features.
  • Based on Web Share API. No fallback for Browsers not compatible with Web Share API.

All components use Shadow DOM

Since 1.1.0, the background color can be specified in the options parameter and must be in the range

["white","ivory","lightgrey","darkgrey","dimgrey", "grey", "black"]

Getting Started

Script tag

  • Put a script tag similar to this
    <script type="module" src="https://unpkg.com/jeep-photoviewer/dist/jeep-photoviewer.esm.js"></script>
    <script nomodule src="https://unpkg.com/jeep-photoviewer/dist/jeep-photoviewer.js"></script>

in the head of your index.html

  • Then you can use the element anywhere in your template, JSX, html etc

Node Modules

  • Run npm install jeep-photoviewer --save
  • Put a script tag similar to this
<script src='node_modules/my-component/dist/my-component.esm.js'></script>

in the head of your index.html

  • Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

  • Run npm install jeep-photoviewer --save
  • Add an import to the npm packages import jeep-photoviewer;
  • Then you can use the element anywhere in your template, JSX, html etc

Usage

Grid Display

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <script type="module" src="https://unpkg.com/jeep-photoviewer@0.0.2/dist/jeep-photoviewer/jeep-photoviewer.esm.js"></script>
    <script nomodule src="https://unpkg.com/jeep-photoviewer@0.0.2/dist/jeep-photoviewer/jeep-photoviewer.js"></script>
  </head>
  <body>
    <jeep-photoviewer></jeep-photoviewer>
  </body>
  <style>
    body {
      background-color: #000;
    }
  </style>
  <script>
    var cmp = document.querySelector('jeep-photoviewer');
    cmp.imageList = [
      {url: "https://i.ibb.co/wBYDxLq/beach.jpg", title: "Beach Houses"},
      {url: "https://i.ibb.co/gM5NNJX/butterfly.jpg", title: "Butterfly"},
      {url: "https://i.ibb.co/10fFGkZ/car-race.jpg", title: "Car Racing"},
      {url: "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", title: "Coffee with Milk"},
      {url: "https://i.ibb.co/7XqwsLw/fox.jpg", title: "Fox"},
      {url: "https://i.ibb.co/L1m1NxP/girl.jpg", title: "Mountain Girl"},
      {url: "https://i.ibb.co/wc9rSgw/desserts.jpg", title: "Desserts Table"},
      {url: "https://i.picsum.photos/id/1009/5000/7502.jpg?hmac=Uj6crVILzsKbyZreBjHuMiaq_-n30qoHjqP0i7r30r8", title: "Surfer"},
      {url: "https://i.picsum.photos/id/1011/5472/3648.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk", title: "On a Lac"},
      {url: "https://i.ibb.co/wdrdpKC/kitten.jpg", title: "Kitten"},
      {url: "https://i.ibb.co/dBCHzXQ/paris.jpg", title: "Paris Eiffel"},
      {url: "https://i.ibb.co/JKB0KPk/pizza.jpg", title: "Pizza Time"},
      {url: "https://i.ibb.co/VYYPZGk/salmon.jpg", title: "Salmon "},
    ];
    const options = {};
    options.maxzoomscale = 3;
    options.compressionquality = 0.6;
    cmp.options = options;
    cmp.mode = "gallery";
    cmp.addEventListener('jeepPhotoViewerResult',(ev) => {
      if(ev.detail) {
        if(ev.detail.result) {
          if( Object.keys(ev.detail).includes("imageIndex")) {
            console.log(`${ev.detail.imageIndex}`);
          }
          if( Object.keys(ev.detail).includes("message")) {
            console.log(`${ev.detail.message}`);
          }
        } else {
          console.log(`${ev.detail.message}`);
        }
      }
    },false);
  </script>
</html>

One Image Display

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <script type="module" src="https://unpkg.com/jeep-photoviewer@0.0.2/dist/jeep-photoviewer/jeep-photoviewer.esm.js"></script>
    <script nomodule src="https://unpkg.com/jeep-photoviewer@0.0.2/dist/jeep-photoviewer/jeep-photoviewer.js"></script>
  </head>
  <body>
    <jeep-photoviewer></jeep-photoviewer>
  </body>
  <style>
    body {
      background-color: #000;
    }
  </style>
  <script>
    var cmp = document.querySelector('jeep-photoviewer');
      {url: "https://i.ibb.co/wBYDxLq/beach.jpg", title: "Beach Houses"},
      {url: "https://i.ibb.co/gM5NNJX/butterfly.jpg", title: "Butterfly"},
      {url: "https://i.ibb.co/10fFGkZ/car-race.jpg", title: "Car Racing"},
      {url: "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", title: "Coffee with Milk"},
      {url: "https://i.ibb.co/7XqwsLw/fox.jpg", title: "Fox"},
      {url: "https://i.ibb.co/L1m1NxP/girl.jpg", title: "Mountain Girl"},
      {url: "https://i.ibb.co/wc9rSgw/desserts.jpg", title: "Desserts Table"},
      {url: "https://i.picsum.photos/id/1009/5000/7502.jpg?hmac=Uj6crVILzsKbyZreBjHuMiaq_-n30qoHjqP0i7r30r8", title: "Surfer"},
      {url: "https://i.picsum.photos/id/1011/5472/3648.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk", title: "On a Lac"},
      {url: "https://i.ibb.co/wdrdpKC/kitten.jpg", title: "Kitten"},
      {url: "https://i.ibb.co/dBCHzXQ/paris.jpg", title: "Paris Eiffel"},
      {url: "https://i.ibb.co/JKB0KPk/pizza.jpg", title: "Pizza Time"},
      {url: "https://i.ibb.co/VYYPZGk/salmon.jpg", title: "Salmon "},
    const options = {};
    options.maxzoomscale = 3;
    options.compressionquality = 0.6;
    options.backgroundcolor = 'lightgrey';
    cmp.options = options;
    cmp.mode = "one";
    cmp.startFrom = 3;
    cmp.addEventListener('jeepPhotoViewerResult',(ev) => {
      if(ev.detail) {
        if(ev.detail.result) {
          if( Object.keys(ev.detail).includes("imageIndex")) {
            console.log(`${ev.detail.imageIndex}`);
          }
          if( Object.keys(ev.detail).includes("message")) {
            console.log(`${ev.detail.message}`);
          }
        } else {
          console.log(`${ev.detail.message}`);
        }
      }
    },false);
  </script>
</html>

Slider Display

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <script type="module" src="https://unpkg.com/jeep-photoviewer@0.0.2/dist/jeep-photoviewer/jeep-photoviewer.esm.js"></script>
    <script nomodule src="https://unpkg.com/jeep-photoviewer@0.0.2/dist/jeep-photoviewer/jeep-photoviewer.js"></script>
  </head>
  <body>
    <jeep-photoviewer></jeep-photoviewer>
  </body>
  <style>
    body {
      background-color: #000;
    }
  </style>
  <script>
    var cmp = document.querySelector('jeep-photoviewer');
      {url: "https://i.ibb.co/wBYDxLq/beach.jpg", title: "Beach Houses"},
      {url: "https://i.ibb.co/gM5NNJX/butterfly.jpg", title: "Butterfly"},
      {url: "https://i.ibb.co/10fFGkZ/car-race.jpg", title: "Car Racing"},
      {url: "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", title: "Coffee with Milk"},
      {url: "https://i.ibb.co/7XqwsLw/fox.jpg", title: "Fox"},
      {url: "https://i.ibb.co/L1m1NxP/girl.jpg", title: "Mountain Girl"},
      {url: "https://i.ibb.co/wc9rSgw/desserts.jpg", title: "Desserts Table"},
      {url: "https://i.picsum.photos/id/1009/5000/7502.jpg?hmac=Uj6crVILzsKbyZreBjHuMiaq_-n30qoHjqP0i7r30r8", title: "Surfer"},
      {url: "https://i.picsum.photos/id/1011/5472/3648.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk", title: "On a Lac"},
      {url: "https://i.ibb.co/wdrdpKC/kitten.jpg", title: "Kitten"},
      {url: "https://i.ibb.co/dBCHzXQ/paris.jpg", title: "Paris Eiffel"},
      {url: "https://i.ibb.co/JKB0KPk/pizza.jpg", title: "Pizza Time"},
      {url: "https://i.ibb.co/VYYPZGk/salmon.jpg", title: "Salmon "},
    const options = {};
    options.maxzoomscale = 3;
    options.compressionquality = 0.6;
    options.backgroundcolor = 'ivory';
    cmp.options = options;
    cmp.mode = "slider";
    cmp.startFrom = 5;
    cmp.addEventListener('jeepPhotoViewerResult',(ev) => {
      if(ev.detail) {
        if(ev.detail.result) {
          if( Object.keys(ev.detail).includes("imageIndex")) {
            console.log(`${ev.detail.imageIndex}`);
          }
          if( Object.keys(ev.detail).includes("message")) {
            console.log(`${ev.detail.message}`);
          }
        } else {
          console.log(`${ev.detail.message}`);
        }
      }
    },false);
  </script>
</html>