Skip to content

Latest commit

 

History

History
85 lines (64 loc) · 5.51 KB

README.md

File metadata and controls

85 lines (64 loc) · 5.51 KB
Raw

touchTouch

Enhanced Vanilla JavaScript version of touchTouch Optimized Mobile Gallery by Martin Angelov

touchTouch Optimized Mobile Gallery

version: 1.5.2 (9.8 kB minified)

Live Demo

MIT License

API: (see test/demo.html)

<div id="gallery">
<a class="magnifier" href="./imgs/1.jpg"><img src="./imgs/thumbs/1.jpg" /></a>
<a class="magnifier" href="./imgs/2.jpg"><img src="./imgs/thumbs/2.jpg" /></a>
<a class="magnifier" href="./imgs/3.jpg"><img src="./imgs/thumbs/3.jpg" /></a>
</div>
const slideshow = touchTouch(document.getElementById('gallery').querySelectorAll('.magnifier'), options);
slideshow.showGallery(); // show gallery programmatically
slideshow.hideGallery(); // hide gallery programmatically
slideshow.showNext(); // navigate to next image programmatically
slideshow.showPrevious(); // navigate to previous image programmatically
slideshow.dispose(); // dispose the slideshow instance

Supported Options:

  • slider custom css class for gallery slider
  • prevArrow custom css class for previous button
  • nextArrow custom css class for next button
  • showCaption boolean flag to show image numbering (default false)
  • customCaption boolean flag to take caption from image title (default false)
  • caption custom css class for caption
  • swipe duration in ms for swipe animation (default 400)
  • fit scale factor in [0, 1] (relative to viewport dimensions) to fit image dimensions to current viewport (default 0 disabled)
  • fitsize max size for fit to take place (default Infinity disabled)
  • auto boolean flag indicating that passed images are the hrefs of the gallery images themselves, instead of clickable elements (default false)

Supported Actions:

  • Keyboard Navigation: ESC (close), LEFT (previous image), RIGHT (next image)
  • Mouse Navigation: CLICK BACKGROUND (close), CLICK LEFT ARROW (previous image), CLICK RIGHT ARROW (next image), SWIPE RIGHT (previous image), SWIPE LEFT (next image)
  • Touch Navigation: TAP BACKGROUND (close), SWIPE RIGHT (previous image), SWIPE LEFT (next image)
  • Keyboard Gestures: UP/DOWN (scale up/down image), CTRL/META + UP/DOWN/LEFT/RIGHT (move scaled image)
  • Mouse Gestures: CTRL/META + WHEEL (scale up/down image), CTRL/META + MOVE (move scaled image)
  • Touch Gestures: TWO-FINGER PINCH (scale up/down image), TWO-FINGER MOVE (move scaled image)

see also:

  • ModelView a simple, fast, powerful and flexible MVVM framework for JavaScript
  • Contemplate a fast and versatile isomorphic template engine for PHP, JavaScript, Python
  • HtmlWidget html widgets, made as simple as possible, both client and server, both desktop and mobile, can be used as (template) plugins and/or standalone for PHP, JavaScript, Python (can be used as plugins for Contemplate)
  • Paginator simple and flexible pagination controls generator for PHP, JavaScript, Python
  • ColorPicker a fully-featured and versatile color picker widget
  • Pikadaytime a refreshing JavaScript Datetimepicker that is ightweight, with no dependencies
  • Timer count down/count up JavaScript widget
  • InfoPopup a simple JavaScript class to show info popups easily for various items and events (Desktop and Mobile)
  • Popr2 a small and simple popup menu library
  • area-select.js a simple JavaScript class to select rectangular regions in DOM elements (image, canvas, video, etc..)
  • area-sortable.js simple and light-weight JavaScript class for handling smooth drag-and-drop sortable items of an area (Desktop and Mobile)
  • css-color simple class for manipulating color values and color formats for css, svg, canvas/image
  • jquery-plugins a collection of custom jQuery plugins
  • jquery-ui-widgets a collection of custom, simple, useful jQueryUI Widgets
  • touchTouch a variation of touchTouch jQuery Optimized Mobile Gallery in pure vanilla JavaScript
  • Imagik fully-featured, fully-customisable and extendable Responsive CSS3 Slideshow
  • Carousel3 HTML5 Photo Carousel using Three.js
  • Rubik3 intuitive 3D Rubik Cube with Three.js
  • MOD3 JavaScript port of AS3DMod ActionScript 3D Modifier Library
  • RT unified client-side real-time communication for JavaScript using XHR polling / BOSH / WebSockets / WebRTC
  • AjaxListener.js: Listen to any AJAX event on page with JavaScript, even by other scripts
  • asynchronous.js simple manager for asynchronous, linear, parallel, sequential and interleaved tasks for JavaScript
  • classy.js Object-Oriented mini-framework for JavaScript