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 <jeep-photoviewer> is the main component. It is using the following embedded components:
- <jeep-photo-hscroll> Horizontal scrolling through images.
- <jeep-photo-buttons> Set of buttons (
Share
,Fullscreen
,Close
)which could be `visible` or `hidden` (Single Tap).
- <jeep-photo-zoom> Zoom In (Double Tap) / Out (Single Tap) and Pan features.
- <jeep-photo-share> 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
in the head of your index.html<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>
- 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
in the head of your index.html<script src='node_modules/my-component/dist/my-component.esm.js'></script>
- 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>