Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Touch Optimized Mobile Gallery
JavaScript Ruby
branch: master

This branch is 6 commits ahead, 16 commits behind martinaglv:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
assets
.gitignore
index.html
readme.md

readme.md

jQuery TouchTouch

A jQuery 1.7 plugin that makes it easy to display a set of photos on your site as a touch-optimized photo gallery.

Highlights

  • Smooth CSS3 animations and transitions;
  • A responsive CSS interface that fills the screen and responds to changes in device orientation;
  • Preloads photos only when they are needed;
  • Supports swiping through photos;
  • Displays onscreen arrows and listens for arrow key presses on desktop browsers;

How to use

Using it is simple. Drop the touchTouch folder (you can find it in the download under assets/) somewhere in your website folder tree. After this, include touchTouch/touchTouch.css in your <head>, and touchTouch.jquery.js right after the jQuery library. The script depends on jQuery 1.7 or above.

After you do all this, simply call the gallery as a regular jQuery plugin:

$(function(){

    // Initialize the gallery
    $('#thumbs a').touchTouch();

});

You must pass anchor elements which point to images in their href attributes for the gallery to work. In addition to conveying which images are to be displayed in the gallery, this also provides a graceful fallback in case JavaScript is not available.

License

Released under the MIT license

Demo

Go to Tutorialzine for a live demo.

Something went wrong with that request. Please try again.