display:inline » Image Slider http://displayinline.net Update seputar web development—HTML, CSS, Javascript, Wordpress, etc. Tue, 31 Aug 2010 14:11:28 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Membuat Slideshow dengan CrossSlide http://displayinline.net/javascript/membuat-slideshow-dengan-crossslide/ http://displayinline.net/javascript/membuat-slideshow-dengan-crossslide/#comments Wed, 07 Jan 2009 03:02:46 +0000 Deny Sri Supriyono http://displayinline.net/?p=125 CrossSlide adalah sebuah jQuery plugin yang bisa digunakan untuk membuat slideshow animasi.

Contoh Tampilan Slideshow dengan CrossSlide

Contoh Tampilan Slideshow dengan CrossSlide

Ada 3 macam animasi yang bisa digunakan untuk tampilan slideshow, yaitu:

  1. Slide + cross-fade
    Gambar bergerak dari bawah ke atas atau sebaliknya untuk kemudian memudar dan berganti dengan gambar berikutnya.
  2. Static cross-fade
    Gambar memudar untuk kemudian berganti dengan gambar berikutnya.
  3. Ken Burns effect
    Gambar bergerak, zoom dan memudar sesuai dengan point yang ditentukan.

Setelah mencobanya, animasi favorit saya adalah Ken Burns effect meskipun sepertinya memerlukan kerja CPU yang paling besar dibandingkan efek lainnya.

Dalam percobaan dengan Chrome, transisi antar gambar terlihat agak tersendat dengan menggunakan Ken Burns effect — sesuatu yang tidak terjadi dengan Firefox 3 dan IE6.

CrossSlide memiliki ukuran 11KB dengan lisensi GPL.

Related posts

]]> http://displayinline.net/javascript/membuat-slideshow-dengan-crossslide/feed/ 0 Membuat Slideshow dengan s3Slider jQuery plugin http://displayinline.net/javascript/membuat-slideshow-dengan-s3slider-jquery-plugin/ http://displayinline.net/javascript/membuat-slideshow-dengan-s3slider-jquery-plugin/#comments Wed, 31 Dec 2008 09:08:40 +0000 Deny Sri Supriyono http://displayinline.net/?p=120 s3Slider adalah sebuah jQuery plugin untuk membuat slideshow.

Contoh tampilan s3Slider

Contoh tampilan s3Slider

Posisi caption bisa diatur untuk ditaruh di atas, bawah, kanan atau kiri.

Lama pergantian antar image juga bisa diatur oleh pengguna.

s3Slider boleh digunakan untuk semua project termasuk komersial.

Halaman demo s3slider.

Related posts

]]> http://displayinline.net/javascript/membuat-slideshow-dengan-s3slider-jquery-plugin/feed/ 1 Image Slideshow dengan Animated Javascript Slideshow http://displayinline.net/javascript/image-slideshow-dengan-animated-javascript-slideshow/ http://displayinline.net/javascript/image-slideshow-dengan-animated-javascript-slideshow/#comments Wed, 24 Dec 2008 19:33:27 +0000 Deny Sri Supriyono http://displayinline.net/?p=116 Animated Javascript Slideshow adalah javascript yang bisa mengubah unordered list menjadi slideshow.

Slideshow yang dihasilkan memiliki judul dan deskripsi pada setiap slidenya.

Tampilan Slideshow

Tampilan Slideshow

Navigasi bisa dilakukan dengan tombol previous dan next yang terdapat pada slide atau dengan memilih thumbnail yang diinginkan.

Script berukuran 5KB ini juga memiliki beberapa parameter yang bisa diatur oleh pengguna.

Script boleh digunakan untuk kepentingan pribadi maupun komersial.

Halaman demo Animated Javascript Slideshow.

Related posts

]]> http://displayinline.net/javascript/image-slideshow-dengan-animated-javascript-slideshow/feed/ 1 SlideItMoo — Image Slider dengan MooTools http://displayinline.net/javascript/slideitmoo-%e2%80%94-image-slider-dengan-mootools/ http://displayinline.net/javascript/slideitmoo-%e2%80%94-image-slider-dengan-mootools/#comments Wed, 24 Dec 2008 02:10:28 +0000 Deny Sri Supriyono http://displayinline.net/?p=114 SlideItMoo adalah slider untuk image yang dibuat dengan MooTools 1.2.

SlideItMoo bisa digunakan untuk menampilkan thumbnail atau sebagai banner rotator.

Contoh Slider dan Banner Rotator

Contoh Slider dan Banner Rotator

Navigasi slide bisa dilakukan dengan meng-klik tombol back, forward ataupun mouse-wheel.

Pengaturan tampilan bisa dilakukan melalui file CSS eksternal.

Beberapa pengaturan lainnya juga tersedia untuk mendapatkan beberapa efek yang diinginkan.

Lihat halaman demo SlideItMoo.

Related posts

]]> http://displayinline.net/javascript/slideitmoo-%e2%80%94-image-slider-dengan-mootools/feed/ 0