Touch Friendly Mobile Gallery Plugin with jQuery and CSS3 - touchTouch

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.