Accordion Style Gallery with Pure JavaScript – Harmonica

Category: Gallery , Javascript | July 1, 2015
Views Total:1,214 views
Official Page:Go to website
Last Update:July 1, 2015


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">

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.

You Might Be Interested In:

Leave a Reply