Responsive Dynamic Image Viewer Plugin With jQuery - Chameleon Viewer

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.