Website Touch Screen dengan jQuery-gestures

Udah kenal sama jQuery kan ? jQuery sangat memanjakan website atau blog kita dengan bermacam-macam plugin na.. wuih.. keren banget dweh .

Kali ini saya coba share ke temen-temen jQuery-gestures yang jika kita mengaktifkan efek dari jQuery ini maka website atau blog kita khalayak touchscreen... Kalo masih bingung temen-temen bisa liat demo nya di sini

Di dalam demo tersebut coba tahan ctrl lalu klik dan gerakan mouse .. terasa seperti touchscreen karena saat kita geser ke kiri pada gambar.. gambar akan berubah ke gambar berikutnya .. begitu juga sebalik nya..  

Kalo temen-temen mao coba tinggal copy paste ajah script berikut ke HTML blog temen-temen..

<script type="'text/javascript'">$(function() {<br /> <br /> $.gestures.init({active:false,color:'#ff0000'});<br /> $.gestures.register('R', function () {<br /> var nb = (the_pic()+1)%pics.length;<br /> log('<code>Right</code> : Next picture');<br /> show_pic(nb);<br /> });<br /> $.gestures.register('L', function () {<br /> var nb = the_pic();<br /> if (nb == 0) { nb = pics.length - 1} else {nb--}<br /> log('<code>Left</code> : Previous picture');<br /> show_pic(nb);<br /> });<br /> $.gestures.register('U', function() { <br /> $('#pic').slideUp();<br /> log('<code>Up</code> : Hide picture');<br /> });<br /> $.gestures.register('D', function() { <br /> $('#pic').slideDown() <br /> log('<code>Down</code> : Show picture');<br /> });<br /> $.gestures.register('UR', function() { <br /> log('<code>Up, Right</code> : Show title');<br /> $('#title').html(pics[the_pic()].title);<br /> $('#title').fadeIn();<br /> });<br /> $.gestures.register('DR', function() { <br /> log('<code>Down, Right</code> : Hide title');<br /> $('#title').fadeOut();<br /> });<br /> $.gestures.register('DL', function() { <br /> log('<code>Down, Left</code> : Open flickr page');<br /> window.open(pics[the_pic()].url);<br /> });<br /> $.gestures.register('DURD', function () {<br /> $('#help').slideToggle();<br /> log('<code>Down, Up, Right, Down</code> : Toggle help');<br /> });<br /> $.gestures.error(function(g) {<br /> log('Unknown Gesture : <code>'+g+'</code>');<br /> });<br /> $(window).keydown(function(e) {<br /> if ($.gestures.active() && e.which==27) {<br /> log('Disabling gestures');<br /> $.gestures.disable();<br /> } else if (!$.gestures.active() && (e.which==17 || e.which==18)) {<br /> $.gestures.enable();<br /> }<br /> });<br /> $(window).keyup(function(e) {<br /> if ($.gestures.active() && (e.which==17 || e.which==18)) {<br /> $.gestures.disable();<br /> }<br /> });<br /> <br /> show_pic(0);<br /> })<br /> </script>

yawh emang postingan kali ne sedikit aneh yak .. di pake buat ap'an nih ??

tapi gpp lah nambah info... hahahaha .. semoga bermanfaat..