Mobile Optimized Lightbox Gallery – touchTouch

Preview:

Description:

This is the Vanilla Version of the jQuery touchTouch plugin.

touchTouch is a JavaScript-based gallery lightbox plugin created entirely in HTML5 & Vanilla JavaScript and can be used straight after downloading.

It has excellent touch support and is lightweight, fast, and easy to implement.

How to use it:

1. Download the package and insert the touchTouch’s JavaScript & CSS files into the document.

<link rel="stylesheet" href="../src/touchTouch.css" />
<script src="./src/touchTouch.js"></script>

2. Call the function touchTouch on the images and done.

<div class="gallery">
  <a class="demo" href="1.jpg">
    <img src="1-thumb.jpg" />
  </a>
  <a class="demo" href="2.jpg">
    <img src="2-thumb.jpg" />
  </a>
  <a class="demo" href="3.jpg">
    <img src="3-thumb.jpg" />
  </a>
</div>

touchTouch(document.getElementById('gallery').querySelectorAll('.demo'), {
  // options here
});

3. All available options.

touchTouch(document.getElementById('gallery').querySelectorAll('.demo'), {
  slider: 'custom CSS class for slider', 
  prevArrow: 'custom css class for previous button',
  nextArrow: 'custom css class for next button'
  showCaption: false, // show image numbering (default false)
  caption: 'custom css class for caption',
  swipe: 400, // duration in ms for swipe animation (default 400)
  fit: 0, // scale factor in [0, 1] (relative to viewport dimensions) to fit image dimensions to current viewport
  auto: false, // indicating that passed images are the hrefs of the gallery images themselves, instead of clickable elements
});

4. API methods.

const instance = touchTouch(document.getElementById('gallery').querySelectorAll('.demo'), {
      // options here
});
instance.showGallery();
instance.hideGallery();
instance.showNext(); 
instance.showPrevious(); 
instance.dispose();

Changelog:

05/01/2023

• v1.5.0: update

04/30/2023

• v1.3.0: remove extra dragging

02/26/2022

• v1.2.0

02/25/2022

• fixed some responsive issues