jeep-photoviewer
v1.2.3
Published
PhotoViewer Stencil Component
Downloads
11,194
Readme
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 bevisibleorhidden(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/[email protected]/dist/jeep-photoviewer/jeep-photoviewer.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/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/[email protected]/dist/jeep-photoviewer/jeep-photoviewer.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/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/[email protected]/dist/jeep-photoviewer/jeep-photoviewer.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/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>