Accordion Style Gallery with Pure JavaScript – Harmonica

Harmonica is a lightweight minimalist JavaScript module used to create an overlapping image gallery (or any html content) that allows the visitor to expand & collapse each image like an accordion.

How to use it:

Include the harmonica.js script in the web page.

<script src="harmonica.js"></script>

Add content into the gallery.

<div class="harmonica">
  <img src="1.jpg">
  <div>Also supports inline elements</div>
  <img src="2.jpg>
  <p>Text here</p>
  <img src="3.jpg">
</div>

Initialize the gallery on document ready.

window.onload = function() {
  // Harmonica(container, options)
  var harmonica = new Harmonica('.harmonica');
}

Default options.

• offset: Distance between overlapping elements. Default: First element is fully visible, Remaining Container space is sliced equally.
• slideCallback: A function to call when an element has slided. The element and the direction are passed as arguments.
• zOffset: An integer value to add upon the z-index of the Elements, to prevent collision with surrounding elements.