MENU

by • May 13, 2013 • Blogging, InternetComments (0)3923

Merubah Foto Berwarna Menjadi Hitam Putih Dengan jQuery

Pemrograman kode HTML dan CSS dari waktu ke waktu terus mengalami pengembangan.  Saat ini yang sedang menjadi tren adalah HTML5 dan CSS3. Dengan peningkatan ranah koding tersebut, banyak hal yang bisa dilakukan untuk membuat web interaktif dengan lebih mudah.  Jika dulu harus menggunakan flash untuk membuat web animasi interaktif, kini ada HTM5 yang siap melayani.

Pada artikel ini saya mencoba berbagi tips merubah foto berwarna menjadi hitam putih dengan jQuery memanfaatkan tag canvas HTML5 yang scriptnya dibuat oleh Gianluca Guarini.  Akibatnya secara otomatis browser versi lama (yang belum support HTML5) ndak bisa digunakan untuk menampilkan hasilnya.  Tapi tenang, browser sekarang kebanyakan sudah melakukan update agar mendukung HTML5, maka kalo masih menggunakan browser lama segeralah bertobat dan melakukan update.

Penggunaan

1. Masukkan link tempat menaruh plug in dan jQuery ke halaman. Pasang diantara tag <head></head>

2. Masukkan script window load (no $(document).ready()) ke halaman. Pasang diantara tag <head></head>

3. Menentukan wrapper dalam kode css.

4. Mengeset class CSS pada foto/gambar yang ingin dikonversi.  Class ini bisa dipasang pada bermacam tag; span, div, link dll asal menggunakan class bwWrapper. Contoh:

5. Contoh implementasi bisa dilihat pada halaman depan blog ini (khusus browser komputer).

Implementasi pada WordPress

Untuk menggunakan efek ini pada wordpress seperti halaman depan blog saya, langkahnya sama dengan penjelasan diatas.  Cukup mengoprek theme yang ingin diterapkan efek ini. Intinya hanya perlu menambahkan class bwWrapper baik itu pada gambar di artikel post maupun page maka otomatis efek ini akan berlaku.

Untuk penerapan pada thumbnail secara otomatis  di WordPress, Anda tinggal mencari menemukan baris yang menempatkan thumbnail; misal pada index.php temukan <?php if ( has_post_thumbnail() ) ?> kemudian wrap dengan class bwWrapper.

Download

Setelah mengetahui langkah-langkah penerapannya, silakan download file-file yang diperlukan untuk merubah foto berwarna menjadi hitam putih dengan jQuery seperti telah dijelaskan diatas.  Untuk mendownloadnya silakan klik download dibawah ini.

Download File jQuery Black & White

==================

Merubah Foto Berwarna Menjadi Hitam Putih Dengan CSS

Selain dengan jQuery seperti dipaparkan diatas, kita juga bisa memanfaakan CSS untuk membuat hover foto berwarna menjadi hitam putih.  Cara ini cukup praktis, hanya tinggal memanggil class CSS pada gambar/foto yang akan kita animasikan.

1. Menentukan kode CSS

2. Contoh cara implemenyasi CSS pada foto

Demikian penjelasannya. Semoga bermanfaat.

happy wheels

Related Posts

Komentar?