Archive

Posts Tagged ‘Snippets’

Membuat Animasi Image Rotator Dengan JQuery

January 9th, 2010 12 comments

Pertama-tama saya ucapkan Selamat Tahun Baru 2010, semoga kita dapat meraih hasil yang lebih baik dari tahun sebelumnya.

Artikel kali ini akan membahas tentang animasi image yang sering di gunakan pada setiap sisi halaman website, yaitu image rotator. Image rotator adalah cara menampilkan daftar image yang diganti satu per satu dalam suatu periode. Animasi ini biasanya di pasang pada space banner di dalam halaman website, agar pengunjung dapat melihat satu per satu secara bergantian produk yang di tawarkan pada banner tersebut.

Untuk membuat efek image rotator dengan JavaScript biasa tentu akan sulit, namun dengan bantuan jQuery anda tidak perlu menulis banyak kode, karena efek animasi seperti fadeIn (menampilkan perlahan-lahan) dan fadeOut (menyembunyikan perlahan-lahan) sudah disediakan oleh library jQuery standar.

Selengkapnya…

Categories: JQuery, Snippets Tags: , ,

Membuat Slideshow Headline Berita Sederhana Dengan JQuery (+Efek Animasi)

March 5th, 2009 45 comments

Jika berbicara tentang sarana interaktif pada web di era saat ini. Efek slideshow tentunya paling sering digunakan oleh website-website yang mengandung content berupa berita. Slideshow biasa diisi dengan rangkuman-rangkuman berita terkini (Headline) agar pengunjung dapat memantau perkembangan berita terkini dengan sajian efek slideshow yang menarik dan tidak akan cepat membuat pengunjung bosan.

Contoh slideshow yang akan kita bangun pada artikel kali ini adalah seperti gambar berikut:

Kunci dari pembuatan fasilitas ini pada halaman web anda adalah CSS + JavaScript. Untuk membuatnya pertama kali buat halaman HTML seperti ini:

Selengkapnya…

Membuat Thumbnail Image Dengan PHP dan Image Slideshow Dengan Thickbox JQuery

January 5th, 2009 26 comments

Salah satu fasilitas pada website adalah gallery image, dimana para pengunjung dapat melihat kumpulan koleksi gambar dari pemilik web. Biasanya gallery juga digunakan untuk dokumentasi suatu acara.

Pada pemasangan gallery di web ada satu persoalan yang cukup mengganggu, yaitu masalah ukuran file pada tiap gambar . Oleh karena itu gambar dengan ukuran besar sebaiknya tidak boleh langsung ditampilkan di halaman depan gallery anda, lebih baik buat dulu ukuran kecilnya .

Nah, masalah membuat ukuran kecil ini yang cukup merepotkan apabila kita tidak tahu tekniknya, ternyata PHP memberi kemudahan untuk kita dalam me-resize image itu dalam ukuran kecil untuk ditampilkan , bukan sekedar me-resize lebar dan tinggi gambar namun juga me-resize ukuran byte file, teknik ini dinamakan Thumbnail Image .

Dengan membuat thumbnail terlebih dahulu tentunya pengunjung anda bisa melihat preview gambar anda sebelum melihat ukuran sebenarnya, dan manfaat lain adalah menghemat bandwidth hosting web anda .

Selengkapnya…

T-10 Tabs: Membuat Tab Pada Halaman Web Dengan Lebih Mudah

January 2nd, 2009 11 comments

Sebelumnya saya ucapkan, Selamat tahun baru 2009, semoga segala cita-cita anda tercapai pada tahun ini… Amien. Berarti ini adalah posting pertama saya di tahun 2009… ^_^

Pada saat ini teknologi web semakin gencar dikembangkan oleh developer agar dapat menyaingi keunggulan pemrograman desktop, hal yang nyata terjadi adalah semakin banyak interface form desktop yang bisa diimplementasikan di halaman web. Contohnya seperti DateTimePicker, ColorPicker, DynamicGrid, Slider dan PageTab. Khusus untuk PageTab atau Tab saya akan memberikan kemudahan dalam mengimplementasikannya ke aplikasi anda.

Selengkapnya…

Tips Membuat Web Full Ajax Sederhana

October 17th, 2008 19 comments

Fenomena Ajax yang menjanjikan pengembangan aplikasi web menjadi lebih dinamis dan interaktif membuat para developer pun terus menerus melakukan eksperimen. JavaScript yang menjadi unsur dasar Ajax pun terus menerus dikembangkan dan hampir seluruh website sudah pasti menggunakan JavaScript untuk membuat setiap halamannya lebih hidup dan menarik.

Yang membuat Ajax menarik adalah kita dapat mengupdate satu atau lebih dari element di halaman web kita tanpa perlu reload halaman. Bila reload dapat dihindarkan tentunya kita berhemat waktu pengambilan data.

Seiring berkembangnya Ajax, banyak pertanyaan dan usulan muncul kepada saya tentang bagaimana kalau kita buat saja 1 web yang seluruh fasilitasnya merupakan Ajax, jadi tidak ada lagi berpindah-pindah halaman karena semua proses dilakukan pada 1 file. Bagaimana mungkin? namun di dalam prinsip saya “kalau tidak dicoba maka belum boleh bilang tidak mungkin” bukan?? ^_^

Disini saya punya tips dasar membuat website berpindah-pindah halaman/proses dengan Ajax dan kita akan lakukan semua proses di 1 file saja yaitu index.html.

Selengkapnya…