Responsive Dynamic Image Viewer Plugin With jQuery - Chameleon Viewer
File Size: | 40.5 KB |
---|---|
Views Total: | 2109 |
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.
<!-- Chameleon css dependency --> <link rel="stylesheet" href="chameleon.viewer.css"> <!-- Other dependences --> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.mousewheel.js"></script> <script src="/path/to/screenfull.min.js"></script> <script src="/path/to/hammer.min.js"></script> <!-- Chameleon js depencency --> <script src="chameleon.viewer.js"></script>
2. Create an empty container for the Chameleon Viewer.
<div id="chameleon-viewer"></div>
3. Initialize the plugin and define an array of images to be presented in the image viewer.
$('#chameleon-viewer').chameleon({ options: { images: [ { url: '1.png', subtitle: 'Image 1' }, { url: '2.png', subtitle: 'Image 2' }, { url: '3.png', subtitle: 'Image 3' }, { url: '4.png', subtitle: 'Image 4' } ], title: 'Image Viewer Title' } });
4. Default configuration options.
$('#chameleon-viewer').chameleon({ options: { // Sets the current image currentImage: 0, // Initial and current zoom currentZoom: 1, // Enables or disables the fullscreen fullscreen: true, // Images list images: [], // Shows or hides the images counter imagesCounter: true, // Allows to pass the images with the arrow keys keyArrows: true, // Maximum zoom maxZoom: 3, // Minimum zoom minZoom: 1, // DOM element where the images preview will be shown preview: '', // Images preview visualization: with arrows or with a slider previewType: 'arrows', // Shows or hides the subtitles subtitle: true, // Viewer title title: '', // Enables or disables the zooming property zoom: true, // Increase or decrease of zoom for each tic or step zoomStep: 0.1 } });
5. Default position settings.
$('#chameleon-viewer').chameleon({ positions: { top: { left: ['title'], center: [], right: ['zoom', 'fullscreen'] }, bottom: { left: ['subtitle'], center: [], right: ['imagesNumber'] }, left: { top: [], center: ['prevArrow'], bottom: [] }, right: { top: [], center: ['nextArrow'], bottom: [] } } });
This awesome jQuery plugin is developed by Astaldo10. For more Advanced Usages, please check the demo page or visit the official website.