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>

<script src="js/jquery.min.js"></script>
<script src="js/jQuery.BlackAndWhite.js"></script>

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

<script>
$(window).load(function(){
    $('.bwWrapper').BlackAndWhite({
        hoverEffect : true, // Efek saat mouse hover. default true
        // memasang path BnWWorker.js untuk implementasi lebih cepat
        // ganti path dengan false jika tak ditentukan
        webworkerPath : 'js/', // sesuai path tempat menaruh file BnWWorker.js
        responsive:true, // agar efek jadi responsive, set 'true'
        invertHoverEffect: false, // set true untuk kebalikan dari hitam putih ke warna 
        speed: { // sesuaikan kecepatan fadeIn fadeOut saat hover 
            fadeIn: 200, // 200ms animasi fadeIn
            fadeOut: 800 // 800ms animasi fadeOut
        }
    });
});
</script>

3. Menentukan wrapper dalam kode css.

.bwWrapper {
    position:relative;
    display:block;
}

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:

<div class="bwWrapper" >
    <img src="http://arwan.web.id/files/gambar.jpg" width="150" height="150" / >
</div>

<a class="bwWrapper" href="http://arwan.web.id">
<img src="http://arwan.web.id/files/gambar.jpg" width="150" height="150">
</a>

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.

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jQuery.BlackAndWhite.js"></script>

<script>
$(window).load(function(){
    $('.bwWrapper').BlackAndWhite({
        hoverEffect : true, // Efek saat mouse hover. default true
        // memasang path BnWWorker.js untuk implementasi lebih cepat
        // ganti path dengan false jika tak ditentukan
        // sesuai path tempat menaruh file BnWWorker.js pada folder WP theme
        webworkerPath : '<?php bloginfo('stylesheet_directory'); ?>/js/',
        responsive:true, // agar efek jadi responsive, set 'true'
        invertHoverEffect: false, // set true untuk kebalikan dari hitam putih ke warna 
        speed: { // sesuaikan kecepatan fadeIn fadeOut saat hover 
            fadeIn: 200, // 200ms animasi fadeIn
            fadeOut: 800 // 800ms animasi fadeOut
        }
    });
});
</script>

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.

<div class="bwWrapper">
<?php if ( has_post_thumbnail() ) ?>
</div>

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

.blackwhite {
     filter: url(filters.svg#grayscale); /* untuk Firefox */
     filter: gray; /* Untuk IE */
     -webkit-filter: grayscale(1); /* untuk Chrome */
}
.blackwhite:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

2. Contoh cara implemenyasi CSS pada foto

<img class="blackwhite" src="http://link-gambarmu.jpg"/>

Demikian penjelasannya. Semoga bermanfaat.