Membuat Efek Image Zoom Atau Light Box Dengan JavaScript

Dalam artikel sebelumnya sudah menjelaskan beberapa method penting dalam JavaScript seperti addEventListener, createElement, appendChild dan querySelector. Kali ini saya akan membuat studi kasus sederhana dengan membuat efek light box atau image zoom. Mau tau caranya? langsung saja, cekidot!

1. Siapkan dokument HTML

Buatlah dokument HTML dan di dalam tag body, buatlah tag div.container di dalamnya buat tag img.thumb dengan src "http://placehold.it/100x100". Dan di bawahnya buat tag script.

2. Mulai koding

Pertama, kita ambil dulu tag html yang akan dimanipulasi. Dimana kita akan mendapatkan tag img.thumb. Serta tambahkan addEventListener().

Kemudian di dalam function tersebut, kita buat tag img untuk menampilkan gambar versi besarnya.

Dan kita masukan ke dalam container.

Kalau kalian mau tahu apakah tag img.thumbLg berhasil masuk atau tidak ke dalam tag div.container, kita bisa menampikannya pada console browser (F12).

Jalankan browser dan tekan F12 dan pilih tab console. Kalau sudah tidak dipakai, console.log bisa dihapus atau dikomen.

Sekarang buatlah tag style pada head, dan ketik perintah css berikut.

Kita lihat hasil sementara pada browser.

Pada element HTML.

Nah, sekarang kita akan menambahkan event jika mouse keluar "mosueout".

Perhatikan sintaks di bawah, method removeChild(), berfungsi untuk menghapus element HTML (child) yang disisipkan pada tag HTML (parent/pembungkus). Dan removeEventListener(), berfungsi untuk menghapus EventListener, karena sudah tidak digunakan lagi. e.target saya akan jelaskan pada artikel selanjutnya...

Here it is...

25 September 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat