Cara Membuat Gallery Dengan Javascript Part 2

Halo Dumenity, selamat datang kembali di laman tips dan trik Source Code Aplikasi. Berjumpa kembali dengan saya di pembahasan tips seputar dunia laman,di kesempatan kali ini saya akan melanjutkan mengenai Cara Membuat Gallery Dengan Javascript Part 2 yang sebelumnya kita telah membangun layoutnya di artikel Cara Membuat Gallery Dengan Javascript Part 1. Di tahap ini yaitu membangun sebuah hover image, dimana di event di javascript hover sama dengan MouseEnter kemudian kita akan membangun sebuah manfaat bagi mengambil data src image nya lalu kita tampilkan di detail gambarnya.

Bagus seketika saja kita implementasikan Cara Membuat Gallery Dengan Javascript Part 2 teman – teman pastikan telah membangun layoutnya atau dapat review artikel sebelumnya. Kemudian buka file di text editornya, bikin manfaat seperti script di bawah ini

var image = document.querySelectorAll(.col-sm-4.item img);

Panggil seluruh image nya bagi mengambil seluruh image, kemudian kita looping dengan for() dan ambil nilai src nya

for (i = 0; i < image.length; i++) {
    image[i].addEventListener(mouseenter, function() {
img =this.src;

    });

  }

Berikutnya kita tampilkan di detail nya dengan manfaat nextElementSibling

teks = this.nextElementSibling.textContent;
document.querySelector(.big-image img).src = img ;
document.querySelector(.big-image p).textContent = teks ;

Kita tambahkan css nya bagi berikan border supaya tampilan lebih menarik dan sesuai

this.style.boxSizing = border-box;
this.style.border = 5px solid #edaf50;
this.style.transition = ease all 0.2s;

Apabila telah save dan jalankan di browsernya, kemudian hover image dengan mouse dengan semacam itu image akan di tampilkan di image ukuran yang besar atau detail image.

Berikutnya kita bikin manfaat lagi dengan MouseLeave bagi mereset css yang telah kita berikan di event MouseEnter supaya di ketika mouse keluar dari area image karenanya css akan di reset ulang seperti semula

image[i].addEventListener(mouseleave, function() {
this.style.boxSizing = border-box
this.style.border = 1px solid #edaf50
});

Apabila telah save dan refresh di browsernya, karenanya gallery gambar berhasil kita bikin tanpa menggunakan plugin. Bagi fullscript dapat lihat di gambar di bawah ini

Bagus, demikianlah di artikel kali ini mengenai Cara Membuat Gallery Dengan Javascript Part 2 kita akan berjumpa kembali di artikel yang akan datang. Terimakasih dan hingga jumpa, semoga bermanfaat.

Sumber https://kursuswebsite.org