Accordion Style Gallery with Pure JavaScript – Harmonica

Category: Gallery , Javascript | July 1, 2015
Author:NicasHeydorn
Views Total:1,163 views
Official Page:Go to website
Last Update:July 1, 2015
License:MIT

Preview:

Accordion Style Gallery with Pure JavaScript – Harmonica

Description:

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.

You Might Be Interested In:


Leave a Reply