Cara Membuat Gallery Dengan Javascript Part 2 dan langkahnya

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website,pada kesempatan kali ini saya akan melanjutkan tentang Cara Membuat Gallery Dengan Javascript Part 2 yang sebelumnya kita sudah membuat layoutnya di artikel Cara Membuat Gallery Dengan Javascript Part 1. Pada tahap ini adalah membuat sebuah hover image, dimana pada event di javascript hover sama dengan MouseEnter kemudian kita akan membuat sebuah fungsi untuk mengambil data src image nya lalu kita tampilkan di detail gambarnya.

Baik langsung saja kita implementasikan Cara Membuat Gallery Dengan Javascript Part 2 teman – teman pastikan sudah membuat layoutnya atau bisa review artikel sebelumnya. Kemudian buka file di text editornya, buat fungsi seperti script di bawah ini

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

Panggil semua image nya untuk 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;
		
    });
	
  }

Selanjutnya kita tampilkan di detail nya dengan fungsi nextElementSibling

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

Kita tambahkan css nya untuk 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";

Jika sudah save dan jalankan pada browsernya, kemudian hover image dengan mouse dengan begitu image akan di tampilkan di image ukuran yang besar atau detail image.

Selanjutnya kita buat fungsi lagi dengan MouseLeave untuk mereset css yang sudah kita berikan pada event MouseEnter supaya pada saat mouse keluar dari area image maka css akan di reset ulang seperti semula

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

Jika sudah save dan refresh pada browsernya, maka gallery foto berhasil kita buat tanpa menggunakan plugin. Untuk fullscript bisa lihat pada gambar di bawah ini

Baik, sekian pada artikel kali ini tentang Cara Membuat Gallery Dengan Javascript Part 2 kita akan berjumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa, semoga bermanfaat.

Cara Membuat Gallery Dengan Javascript Part 2

Kategori