This time I will share jQuery Plugin and tutorial about Responsive Dynamic Image Viewer Plugin With jQuery – Chameleon Viewer, hope it will help you in programming stack.
| File Size: | 40.5 KB |
|---|---|
| Views Total: | 1987 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Chameleon Viewer is a jQuery plugin that generates a responsive, customizable, mobile-friendly image viewer from an array of image objects.
Features:
- Slide between images through navigation arrows.
- Zoom in/out images with mouse wheel or slider.
- Fullscreen mode.
- Responsive and touch-friendly. Works on most browsers and platforms.
Dependencies:
- jQuery
- jQuery Mousewheel plugin
- screenfull.js
- hammer.js
How to use it:
1. Load the jQuery Chameleon Viewer plugin and it’s dependencies in the webpage.
01 |
<!-- Chameleon css dependency --> |
02 |
<link rel="stylesheet" href="chameleon.viewer.css"> |
03 |
04 |
<!-- Other dependences --> |
05 |
<script src="/path/to/jquery.min.js"></script> |
06 |
<script src="/path/to/jquery.mousewheel.js"></script> |
07 |
<script src="/path/to/screenfull.min.js"></script> |
08 |
<script src="/path/to/hammer.min.js"></script> |
09 |
10 |
<!-- Chameleon js depencency --> |
11 |
<script src="chameleon.viewer.js"></script> |
2. Create an empty container for the Chameleon Viewer.
1 |
<div id="chameleon-viewer"></div> |
3. Initialize the plugin and define an array of images to be presented in the image viewer.
01 |
$('#chameleon-viewer').chameleon({ |
02 |
options: { |
03 |
images: [ |
04 |
{ |
05 |
url: '1.png', |
06 |
subtitle: 'Image 1' |
07 |
}, |
08 |
{ |
09 |
url: '2.png', |
10 |
subtitle: 'Image 2' |
11 |
}, |
12 |
{ |
13 |
url: '3.png', |
14 |
subtitle: 'Image 3' |
15 |
}, |
16 |
{ |
17 |
url: '4.png', |
18 |
subtitle: 'Image 4' |
19 |
} |
20 |
], |
21 |
title: 'Image Viewer Title' |
22 |
} |
23 |
}); |
4. Default configuration options.
01 |
$('#chameleon-viewer').chameleon({ |
02 |
options: { |
03 |
04 |
// Sets the current image |
05 |
currentImage: 0, |
06 |
07 |
// Initial and current zoom |
08 |
currentZoom: 1, |
09 |
10 |
// Enables or disables the fullscreen |
11 |
fullscreen: true, |
12 |
13 |
// Images list |
14 |
images: [], |
15 |
16 |
// Shows or hides the images counter |
17 |
imagesCounter: true, |
18 |
19 |
// Allows to pass the images with the arrow keys |
20 |
keyArrows: true, |
21 |
22 |
// Maximum zoom |
23 |
maxZoom: 3, |
24 |
25 |
// Minimum zoom |
26 |
minZoom: 1, |
27 |
28 |
// DOM element where the images preview will be shown |
29 |
preview: '', |
30 |
31 |
// Images preview visualization: with arrows or with a slider |
32 |
previewType: 'arrows', |
33 |
34 |
// Shows or hides the subtitles |
35 |
subtitle: true, |
36 |
37 |
// Viewer title |
38 |
title: '', |
39 |
40 |
// Enables or disables the zooming property |
41 |
zoom: true, |
42 |
43 |
// Increase or decrease of zoom for each tic or step |
44 |
zoomStep: 0.1 |
45 |
} |
46 |
}); |
5. Default position settings.
01 |
$('#chameleon-viewer').chameleon({ |
02 |
positions: { |
03 |
04 |
top: |
05 |
{ |
06 |
left: ['title'], |
07 |
center: [], |
08 |
right: ['zoom', 'fullscreen'] |
09 |
}, |
10 |
bottom: |
11 |
{ |
12 |
left: ['subtitle'], |
13 |
center: [], |
14 |
right: ['imagesNumber'] |
15 |
}, |
16 |
left: |
17 |
{ |
18 |
top: [], |
19 |
center: ['prevArrow'], |
20 |
bottom: [] |
21 |
}, |
22 |
right: |
23 |
{ |
24 |
top: [], |
25 |
center: ['nextArrow'], |
26 |
bottom: [] |
