Chci se podělit o malý experiment se čtenáři Tutorialzine - TouchTouch. Jedná se o plugin jQuery, který promění sbírku fotografií na webové stránce na dotykovou mobilní galerii. Funguje ve všech hlavních prohlížečích (kromě IE7 a nižších) a co je nejdůležitější, je speciálně navržen s ohledem na iOS a Android.
Důležité
- hladké animace a přechody CSS3;
- Responzivní rozhraní CSS, které vyplní obrazovku a reaguje na změny orientace zařízení;
- předem načte fotografie, pouze když jsou potřeba;
- Podporuje procházení fotografií;
- Zobrazuje šipky na obrazovce a poslouchá stisknutí kláves se šipkami v prohlížečích na počítači;
TouchTouch se u animací zcela spoléhá na CSS3, což znamená, že přechody jsou na mobilních zařízeních extra plynulé (přirozeně to také znamená, že ve starších prohlížečích žádné neuvidíte). Pomocí chytrého CSS se rozhraní automaticky přizpůsobí velikosti a orientaci zařízení, přičemž fotografie rostou tak, aby zaplnily dostupnou plochu obrazovky (otestujte to změnou velikosti okna prohlížeče). A pomocí jQuery se procházení fotografií provádí přejetím doleva nebo doprava.
Na ploše získáte stejné responzivní rozhraní a plynulé animace. Procházení galerie se provádí buď pomocí šipek na obrazovce, nebo pomocí šipek na klávesnici.
Jak používat
Použití je jednoduché. Přetáhněte touchTouch složka (najdete ji ve stažení pod assets/ ) někde ve stromu složek vašeho webu. Poté zahrňte touchTouch/touchTouch.css ve vaší
a touchTouch.jquery.js hned za knihovnou jQuery. Skript závisí na jQuery 1.7 nebo výše.Až toto všechno uděláte, jednoduše zavolejte galerii jako běžný plugin jQuery:
$(function(){
// Initialize the gallery
$('#thumbs a').touchTouch();
}); Aby galerie fungovala, musíte v atributech href předat kotevní prvky, které ukazují na obrázky. Kromě sdělení, které obrázky mají být v galerii zobrazeny, to také poskytuje elegantní záložní řešení v případě, že není k dispozici JavaScript.
V souladu s tradicí Tutorialzine uvolňovat kvalitní zdroje pro vývojáře je zdrojový kód galerie rozsáhle komentován a vydáván na Github.