Author: | foo123 |
---|---|
Views Total: | 0 views |
Official Page: | Go to website |
Last Update: | December 2, 2023 |
License: | MIT |
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:
12/02/2023
- v1.5.1: update
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