TouchTouch - A Touch Optimized Gallery Plugin

Gauloran

Kıdemli Moderatör
7 Tem 2013
8,094
585
local
I want to share a little experiment with Tutorialzine readers - TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind.

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;
TouchTouch relies entirely on CSS3 for animations, which means that transitions are extra smooth on mobile devices (naturally, this also means that you won't see any on older browsers). Using some clever CSS, the interface automatically adjusts to the size and orientation of the device, with photos growing to fill the available screen estate (test it by resizing your browser window). And with the help of jQuery, going through photos is done by swiping left or right.

On the desktop, you get that same responsive interface and smooth animations. Browsing the gallery there is done either with the onscreen arrows, or the arrow keys on the keyboard.

touch-gallery-jquery-plugin.jpg


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 of this, simply call the gallery as a regular jQuery plugin:
Kod:
$(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.
https://github.com/martinaglv/touchTouch
this post is quoted​
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.