Touch Friendly Mobile Gallery Plugin with jQuery and CSS3 - touchTouch

Touch Friendly Mobile Gallery Plugin with jQuery and CSS3 - touchTouch
File Size: 53.9 KB
Views Total: 3990
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

touchTouch is a clean and responsive jQuery gallery plugin which helps you to create an amazing Touch-Friendly image gallery with smooth CSS3 animations and lightbox effect.

The Vanilla JavaScript Version is now Available Here.

Features:

  • Responsive Design
  • Support for CSS3 animations and transitions
  • Preloads photos only when they are needed
  • Support for swiping through photos
  • Support for arrow key navigation

Basic Usage:

1. Markup Html Structure

<div class="thumbs"> 
  <a href="1.jpg" style="background-image:url(thumnails/1.jpg)" title="Title 1"></a>
  <a href="2.jpg" style="background-image:url(thumnails/2.jpg)" title="Title 1"></a>
  <a href="3.jpg" style="background-image:url(thumnails/3.jpg)" title="Title 1"></a>
  ...
</div>

2. Include jQuery touchTouch CSS.

<link rel="stylesheet" href="assets/touchTouch/touchTouch.css" />

3. Include jQuery library and the jQuery touchTouch plugin on your page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="assets/touchTouch/touchTouch.jquery.js"></script> 

4. Initialize the gallery and done.

$(function(){

  $('.thumbs a').touchTouch();

});

5. Assign a unique ID to the gallery in cases where you have multiple instance on a page.

<div class="thumbs" data-gallery="one"> 
  <a href="1.jpg" style="background-image:url(thumnails/1.jpg)" title="Title 1"></a>
  <a href="2.jpg" style="background-image:url(thumnails/2.jpg)" title="Title 1"></a>
  <a href="3.jpg" style="background-image:url(thumnails/3.jpg)" title="Title 1"></a>
  ...
</div>

Changelog:

2014-01-03

  • Adding keydown listener for escape key to close overlay.

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.