Touch-enabled Modal Gallery Library – ModalMadness

Preview:

Description:

ModalMadness is a simple-to-use gallery lightbox library that opens gallery items as a responsive, touch-enabled slider in a modal popup.

How to use it:

1. Load the modal-madness.css and modal-madness.js from the dist folder.

<link rel="stylesheet" href="dist/css/modal-madness.css">
<script src="dist/modal-madness.js"></script>

2. Create the HTML template for the modal popup.

<section id="modal-window">
  <span id="modal-close">X</span>
  <span id="modal-prev">&lt;</span>
  <span id="modal-next">&gt;</span>
  <div id="modal-content">
    <div class="modal-image-view">
      <img id="modal-image" src="" alt="">
    </div>
    <div class="modal-text-view">
      <p id="modal-text"></p>
    </div>
  </div>
</section>

3. Add images to the gallery.

<div class="thumbnail-container">
  <div class="gallery-thumb">
    <a class="modal-link" href="https://source.unsplash.com/kWmt_T_sv5w/600x450"
      data-title="Image 1 <a href='#'>Link Here</a>">
      <img src="https://source.unsplash.com/kWmt_T_sv5w/600x450" alt="Oranges" />
    </a>
  </div>
  <div class="gallery-thumb">
    <a class="modal-link" href="https://source.unsplash.com/Tk2uTulVh38/600x450"
      data-title="Image 2 <a href='#'>Link Here</a>">
      <img src="https://source.unsplash.com/Tk2uTulVh38/600x450" alt="Oranges" />
    </a>
  </div>
  <div class="gallery-thumb">
    <a class="modal-link" href="https://source.unsplash.com/WGptbb8HCfQ/600x450"
      data-title="Image 3 <a href='#'>Link Here</a>">
      <img src="https://source.unsplash.com/WGptbb8HCfQ/600x450" alt="Oranges" />
    </a>
  </div>
</div>

4. Initialize the library and done.

if (modalMadness) {
  modalMadness.init()
}