An easy to integrate image viewer for your website.
If you first want to see if the image viewer is what you are looking for, you can see it here.
- Clone or download the repo
- Implement the
image-viewer.jsfile in your project - Implement the
<image-viewer></image-viewer>HTML tag in your site - Pass the image viewer the image data in your JS file (see the
settings-image-viewer.jsfile in this repo) - For the design use the attributes in the
<image-viewer></image-viewer>HTML tag
This repo shows some examples.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Title</title>
<!-- 1. Implement the "image-viewer.js" file -->
<script src="./assets/js/image-viewer.js"></script>
<!-- 2. Implement your "*.js" settings file -->
<script src="./assets/js/settings-image-viewer.js" defer></script>
</head>
<body>
<!-- Some Content -->
<!-- 3. Implementation of the "<image-viewer></image-viewer>" HTML tag -->
<image-viewer></image-viewer>
<!-- Some Content -->
</body>
</html>See the examples and comments in the files for more information.
The following attributes are available:
thumbnail-height=> height of the image slidercolor-bg=> background color of the image slidercolor-icon=> color of the next and preview buttonradius-slider=> radius of the image sliderslider-border=> border of the image slider
margin-image=> distance between image and sliderradius-image=> radius of the imageimage-border=> border of the image