Javascript & DOM #13 - Membuat IMAGE GALLERY

Dengan menggabungkan semua materi dan ilmu yang sudah kita dapatkan dari video2 sebelumnya, kali ini kita akan membuat sebuah program sederhana untuk menampilkan IMAGE GALLERY atau serangkaian gambar menggunakan DOM.
jangan lupa untuk menunjukkan hasil yang sudah kalian buat lewat kolom komentar dengan mencantumkan link-nya (codepen, jsfiddle, dll).. saya tunggu yaa :)
---
PLAYLIST Javascript & DOM :
• Javascript dan DOM (Do...
---
PLAYLIST LAIN:
- HTML Dasar
• HTML Dasar
- CSS Dasar
• CSS Dasar
- Tutorial Sublime Text
• Tutorial Sublime Text 3
- CSS Layouting
• CSS Layouting
- Dasar Pemrograman dengan JAVASCRIPT
• Dasar Pemrograman deng...
- Belajar PHP untuk Pemula
• Belajar PHP untuk PEMULA
---
MEDIA SOSIAL
- / sandhikagalih
- / webprogrammingunpas
- codepen.io/webp...
- github.com/web...
- / sandhikagalih
---
UNIVERSITAS PASUNDAN BANDUNG
www.unpas.ac.id/
www.if.unpas.ac...
terimakasih dan selamat #ngoding!
@sandhikagalih

[@sandhikagalihWPU]

ayo pamerin hasil karyanya, tulis linknya di reply komen ini yaa, boleh lewat codepen atau jsfiddle.. 😀

[@hilmanfirdaus7139]

jgn pa.., riyaa.. :v

[@qianzybisnis8655]

bagaimana buat coding ketika saya lihat tanpa diketik sudah muncul?

[@mariamagda1766]

paling suka ketika pak guru bilang "nah tapi kita ada problem lagi nih..",,,"gimana dong caranya?" :D

[@YUQINOER]

9:34 , ini versi saya pak dhika... const jumbo = document.querySelector('.jumbo'); const thumb = document.querySelectorAll('.thumb'); thumb.forEach(function(img){ img.addEventListener('click', function(e){ const atribute = img.getAttribute('src'); jumbo.setAttribute('src', atribute) }) })

[@rizalsyafiie5236]

Pak. Yang kayak dulu lagi dong ada bapak di pojok .wkwk . Soal nya kalo liat cara bapak jelasin bisa menginspirasi saya 😊

[@ulargajah9154]

wkwk

[@bayunurjati2654]

Ditambah lagi pak tutor yg beginian,kalo boleh buat play list musik atau video dgn HTML5+CSS3+Javascript.Semangat pak 😀

[@junevenlee1979]

teman-teman ini ada saya tambahin fitur sendiri yaitu tambah gambar tapi tambah gambar dalam kasus ini saya ambil dari nama file gambar kita yang kita save, jadi bukan tambah gambar yang kompleks bisa ambil dari file explorer gitu Untuk HTML nya saya tambahin diluar setelah container : + lalu untuk CSS nya saya bikin seadanya saja, soalnya masih belum terlalu menguasain teknik css : .tambah { position: relative; left: 330px; bottom: 25px; } button { display: inline-block; font-size: 50px; cursor: pointer; } lalu untuk js nya : const button = document.querySelector('button'); const thumbNail = document.querySelector('.thumbnail'); button.addEventListener('click', function(e) { e.preventDefault(); const pilihGambar = prompt("Silakan Pilih Foto yang mana Mau ditambahkan (Sesuai Urutan Angkanya!"); if( pilihGambar == '' ) { alert('Kamu tidak memasukkan angka atau karakter yang tidak dikenali.'); return; } const img = document.createElement('img'); img.setAttribute('src', 'img/' + pilihGambar + '.jpg'); img.classList.add('thumb'); thumbNail.append(img); }); itu saja teman-teman jika ada kekurangan mohon sarannya dan bimbingannya sekian terimakasih.

[@nirmaulifajanata1497]

mantabbb Pak, baru kali ini dapet course JS yang gampang dimengerti, uda gtu free lagi. Jadi asik ngodingnya huhuhu makasih banyak Pak

[@MuhammadFikri-du4qk]

Sedikit tambahan pak Dika, bukan maksud menggurui cuma ingin tambah dikit di htmlnya agar di img 1.jpg dikasi default class active

[@alifs3992]

Mungkin saya punya solusi tanpa looping semua element Pak Dika. Caranya adalah menampung elemen yang terakhir diklik dalam sebuah array. Ketika elemen lain diklik, maka kita pop elemen yang ada di array sekaligus menghapus class active dari classList nya. Kasus khusus hanyalah ketika belum ada elemen yang diklik. if (arr.length != 0){ arr.pop().classList.remove("active"); } arr.push(event.target); event.target.classList.add("active"); Anw terima kasih video-videonya, sangat membantu bagi yang ingin memulai belajar pemrograman web.

[@universe2465]

makasih bro

[@deddyandy7306]

Untuk fitur yg terakhir yaitu memberi class active kpd thumb yg dipilih, lalu menghilangkan class active pada thumb sebelumnya: const container = document.querySelector('.container'); const jumbo = document.querySelector('.jumbo'); let eOld = null; container.addEventListener('click', function(e) { if (e.target.className == 'thumb') { if (eOld != null) { eOld.classList.remove('active') } jumbo.src = e.target.src; jumbo.classList.add('fade'); setTimeout(function() { jumbo.classList.remove('fade'); }, 500); e.target.classList.add('active'); eOld = e.target; } }); Simpan objek thumb yg dipilih pada eOld. Ketika memilih thumb yg baru , remove class active dari eOld

[@rifansetiadi9411]

keren bro

[@kaumborjuis8953]

🔥🔥

[@muhammadtaslim2305]

Bahas jQuery juga dong pak.

[@polsekbaureno2663]

Untuk yang terakhir, ini codingan saya, bang (Mohon koreksi kalau salah). Untuk image pertama saya buat class active dulu, dan untuk class active nya saya pakai " filter : brightness(50%); ", nggak pakai opacity. HTML Document script.js const container = document.querySelector('.container') const jumbo = document.querySelector('.jumbo') container.addEventListener('click', function(e) { if (e.target.className == 'thumb') { jumbo.src = e.target.src; jumbo.classList.add('fade') setTimeout(function () { jumbo.classList.remove('fade') }, 500) /* menghapus class active dan membuat thumb yang di klik menjadi class active*/ document.querySelector('.active').classList.remove('active'); e.target.classList.add('active') } }) CSS *{ margin: 0; padding: 0; line-height: 0; } body { background-color: #ccc; text-align: center; } .container { width: 600px; margin: 10px auto; border: 10px solid white; overflow: auto; } .thumb { width: 200px; height: 133px; float: left; border: 1px solid rgb(77, 75, 75); cursor: pointer; box-sizing: border-box; } .thumb:hover { filter: brightness(50%); } .active { filter: brightness(50%); } @keyframes fadeIn { to { filter: brightness(100%); } } .fade { filter: brightness(50%); animation: fadeIn .5s forwards; }

[@rinositanggang2632]

keren kak, belajar js&dom susah atau tidak ya kak ?..... kalau aku agak sedikit susah, karna harus memperhatikan sedetail mungkin😀😀.

[@rhandytabriantama2905]

//saya pakai jumbo.setAttribute('src', e.target.src); //pak dika pakai jumbo.src = e.target.src;

[@korakoretrailadventure4148]

terimakasih , nambah pengetahuan baru ......

[@ariosetiawan173]

Kekurangannya yang Bapak coding di tutorial, ketika klik element ber-class jumbo, maka class active ditambahkan kedalamnya, jadi perlu menambahkan percabangan seperti berikut if (!e.target.className == '.jumbo') { e.target.classList.add('active'); } Makasih Pak Dika :D

[@sandhikagalihWPU]

aahh.. ini terlewat! terimakasih Ario.. :)

[@ariosetiawan173]

Sipp Pak Sama2 ^_^

[@leravio]

itu maksudnya gimana mas, terus codenya ditaruh dimana ?

[@jafarpagerjaya1311]

Gmn kalo menghapus class activenya pake traversaling jd gak pake looping ke nodelist baru. Jd ambil parent node thumb (thumbnail) terus terlusur ke childnya (thumb) yang ada class activenya terus class activenya diremove :)

[@ariefasroi1189]

ga perlu pake contains, pak container.addEventListener('click', function(e){ if (e.target.className == 'small'){ big.setAttribute('src', e.target.src); big.classList.add('fade'); setTimeout(function(){ big.classList.remove('fade'); }, 500); smalls.forEach(function(small){ small.classList.remove('active'); }); e.target.classList.add('active'); }; });

[@solitestudio]

Solusi lain dari saya pak dhika, jadi nambah satu variable global dengan nama previousActive yang nilai awalnya null terus tinggal diinisiasi dan dikondisikan saat salah satu object dengan class thumb di klik, jadi bisa tanpa perulangan. Thanks banget pak dhika atas ilmunya, ditunggu lagi video tentang front end nya pak dhika yah. Mantabs My Favourite Lecture const container = document.querySelector('.container'); const jumbo = document.querySelector('.jumbo'); var previousActive = null; container.addEventListener('click', function(e){ // cek apakah yang di click adalah thumb if(e.target.className == 'thumb'){ jumbo.src = e.target.src; jumbo.classList.add('fade'); setTimeout(function(){ jumbo.classList.remove('fade'); }, 500); e.target.classList.add('active'); if(previousActive != null){ previousActive.classList.remove('active'); previousActive = e.target; } else{ previousActive = e.target; } } });

[@jeffry144]

mantap guru asli mudah di mengerti buat yg masih newbie

[@ariqhabibi3171]

Terima Kasih banyak pak Dhika atas semua vdeo tutorialnya jadi membantu saya dalam membuat aplikasi untuk tugas akhir saya semoga diberi kesehatan selalu

[@whysantos]

Mantab pak. Kalau boleh request lagi. Pemahaman DOM pada kasus Slider/Carousel dan Step/progress bar. Nuhun

[@samsulbahri907]

Auto subscribe nhe chanel. Salam untuk calon developer pemula

[@iputuarisusila1541]

terus lanjutkan pak sampai bisa jadi full stack js hehe, sehat terus pak

[@willyrumapea4438]

keren pak dhika saya mau buat todo list pakai dom,sepertinya sudah cukup bisa

[@muhammadridwanfauzi]

Kalau misalkan gini gimana pak, daripada kita loop ke semua thumbnail, kita simpen thumbnail yang diklik itu ke sebuah variabel dan ketika kita klik thumbnail yang lain, kita remove class active di variabel yang kita pake buat simpen thumbnail active sebelumnya

[@muhyiddienrabbani7117]

mantap pak dhika, semoga berkah dunia akhirat,, Aamiin

[@ahmadyusuf6799]

pak dhika, klo buat file gambar di sebuah tabel yg ada di database lalu tampil otomatis pada galery yg kita buat bgaimna cara manggilnya. jdi setiap ada file gambar yg di tambahkan didlm tabel database, secara otomatis ikut tampil ke galery yg udah kita buat. bgitu selanjutnya

[@ASkrik]

Hadir... mantap, sehat dan sukses selalu...

[@wibowomuhmmad]

mantaap pak thanks a lott

[@azkiamima6190]

kalau gue gini bang kebetulan gue pause pas denger looping buat nyoba sendiri const thumbs = document.querySelectorAll(.thumb); for (let i = 0 ; i < thumbs.length ; i++) { thumbs[i].classList.remove('active'); e.target.classList.add('active'); } ada problem ga kalau gini?

[@joelhkbn]

thumb nya pake petik ('.thumb');

[@BoRrrr88]

gg bro

[@pak_duta]

Like ke 800 Terimakasih pak dhika

[@williamvinct]

Seperti biasa tutorialnya ademmm

[@iwayanpurnasanjaya741]

Pak maaf mau bertanya bagaimana biar gambar bisa menyesuikan biar tidak di atur gambarnya ukutan 600px x 400px ... biar di tumb jumbo bisa ngepas gambarnya walau ukuran gambar tidak sama

[@polsekbaureno2663]

bantu jawab bang, masih pemula juga. Gambar dicodingan saya juga tidak sama, jadi di css class container, saya atur width sama weightnya 600x400, trs kasih overflow: hidden; jadi meskipun gambarnya ukuran 900 x 700, yang terlihat seperti ukuran 600x400, gambarnya seperti di cut otomatis ke ukuran yang kita buat. jadi gambarnya di potong, bukan diperkecil. kalau gambarnya diperkecil otomatis sesuai ukutran container, nggak tahu bisa atau nggak, ilmu saya masih belum nyampe. Dicodingan bang dika juga sudah dikasih (width 600px, trs overflow: auto;) jadi kalau gambarnya melebihi ukuran, kelebihanyya akan disembunyikan (tidak terlihat)

[@kevinramadhan2136]

terima kasih pak . Jempol

[@syarifmaulanay.615]

matur kesuwun pak Dhika ,,

[@Ken-ke9bi]

Pak, saat saya coba mengerjakan ini, saya tidak tahu kenapa local host saya sangat lemot. Terima kasih pak.

[@andirahmatullah3758]

bang, coba doang buat tutorial untuk merelasikan antar database menggunakan skript

[@sapiqiuchannel4289]

lanjut pak dika, cara membuat menu dropDwon ya hehe...

[@williamphilip6893]

Keren Bang dhika....Lanjutkan hehehehe..God Bless bang

[@sandhikagalihWPU]

terimakasih bang William.. GBU 🙂

[@yantoajah9479]

Trimakasih banyak pak

[@wisnuputra3696]

trimkasih pak andhika

[@didinafifuddin1320]

punten pak mau tanya. ini kasusnya sama dengan tutorial diatas, dan saya punya file htmlny begini 8 9 * 0 D = / file js : const output = document.querySelector('.layar'); const inputAngka = document.querySelector('.number'); inputAngka.addEventListener('click', function(a) { if (a.target.className == 'num') { console.log(a.target); } }); problemnya ketika saya menambahkan kelas 'de' dan 'equal', element bagian itu tidak bisa kepanggil pak, bagaimana pak? apakah harus memiliki satu kelas? terimakasih atas waktu dan jawabnnya pak 🙏

[@hanmuid9387]

Mantap pak! Terima kasih banyak :D

[@MuhammadRizki-yh7fr]

assalamualaikum warahmatullahi wabarakatuh pak pada menit 13:02 saya klik gambar di thumbnail nya ga berubah ke gambar yg besar pas di klik,saya cek di console log ada error tulisanya "script.js:7 Uncaught TypeError: Cannot set properties of null (setting 'src') at HTMLDivElement. " minta tolong pencerahanya pak ? 🙏😊 terimakasih sebelumnya pak

[@polsekbaureno2663]

itu brarti di script js no 7 ada kesalahan bang, Coba dicek lagi codingannya, besar kecil huruf, kurung buka kurung tutup, kurung kurawa. Soalnya kalau Codinganyya nggak dikirim semua nggak bisa ngecek kesalahanyya dimana.

[@fandiananta1743]

pak punya saya nggk bisa apakah perlu sublime text saya dowlaod plugin

[@permadiekapermana]

Notification squad hadir pak 😂

[@sandhikagalihWPU]

terimakasih Permadi.. :)

[@permadiekapermana]

Web Programming UNPAS semoga seri ini cepat selesai pak, masih ditunggu requestan nya 😂

[@nocacad]

Pak dika, boleh dong bikinin tutorial untuk upload miltiple file gambar dengan progress bar per gambar terus disimpan ke DB 😅

[@ocean189]

Ada yang bisa ngejelasin algoritmanya. Kalau kita udah klik thumbnailnya otomatis thumbnya bakalan ngegantiin posisi si kelas jumbo. Tapi saya maunya yg kelas jumbo itu mengganti posisi yang menggantikan posisinya dia...

[@hantunemal]

makasih ilmunya..

[@afenafrianto1996]

tnya kak, kok klo gmbar thumnailnya itu hasil dr looping database, yg bs kena event kok cm yg gmbar pertama sj, gmbar lain kok gk bs. apa cara nya beda lg ya klo pakek database?mksih

[@Azil7136]

Assalamualaikum pak Dhika, pak model galeri seperti ini bisa di hubungkan dengan menu galeri yang menggunakan CI 3 ?

[@nabillaaaaa]

Terima kasih pak

[@farhan_2467]

Buat program to do list dong pak pakai javascript

[@byruddy]

untuk forward pada @keyframe, saya kurang mengerti pak tolong pencerahannya

[@tian9811]

pak kalau misalkan setiap gambar yang kecil nya punya text contohnya, element h3 dan p..itu bagaimana ya supaya ketika di klik gambar yang besar juga punya element h3 dan p nya seusai dengan yang di klik? udah coba berbagai cara belum berhasil :(

[@timothywaruwu2718]

Izin bertanya, kenapa class active di javascript tidak berfungsi dia tidak ninggalin active di saat mengklik gambar. Saya juga sudah mengikuti alur tutorial dari awal hingga akhir

[@polsekbaureno2663]

kirim codingannya semua bang, biar bisa dicek sama22

[@jakasetiawan7947]

yeaa! 🙌

[@sandhikagalihWPU]

yeaa!! 🙌

[@fcicoss648]

yeaa!! 🙌

[@arifsutekno8794]

Siip ;

[@isengproject6551]

pak buatin series yang backendnya dong

[@muhammadandrianto9236]

Keren👍

[@farhantaufikurohman5371]

pak ada bug kalo kita klik gambar yang gede nya jadi aenh,harusnya gambar gede nya kalo di klik ga ngasih efek apa2,caranya gimana ya pak

[@diongz1589]

Bang, cara membuat free transorm gambar biar bisa d besarin atau kecilin secara live g mana ya?

[@dede102]

Aduh dari dulu gua pengen bisa maen script baru ketemu ni channel nyesel

[@indriruth]

pak Dika, saya coba buat 3 gallery dalam 1 halaman, javascript yang jalan hanya di gallery pertama. kenapa ya, Pak? mohon pencerahannya.

[@rudynisanr8694]

Mantap

[@adipati27ma]

Mau tanya pak dhika, itu kan kalo misalkan cuma di set dari timeoutnya di js bisa ada bug kalo di klik2 cepet foto selanjutnya fadenya gak keluar jadi langsung pindah foto.. Kira2 buat ngebenerinnya pake apa ya... Siapa tau pak dhika punya solusinya, hehe

[@malvinval]

coba ubah jadi lebih KECIL dari 500 contohnya 200.

[@reviewfilm444]

Pak yg ini saat menambahkan class active di css itu nga berfungsi itu knp yah?

[@fringkifirmansah8407]

👍 like this

[@jackyhauofficial]

Ini versi saya ketika video dipause : const jumbo = document.querySelector('img.jumbo'); const thumbnail = document.querySelectorAll('img.thumb'); for ( let i = 0; i < thumbnail.length; i++ ) { let newImg = thumbnail[i].getAttribute('src'); thumbnail[i].addEventListener('click', () => jumbo.setAttribute('src', newImg)); } #salamkoding #ngoding #janganlupatitikkoma

[@candrabauana6709]

Pak, semua materi yang pak sampaikan saya dapat memahaminya tetapi ada stu materi yaitu hyper Link bagian Html .....kok sublime text saya nggak mau loding ke google ya pass waktu milik tulisan "Klik disini" Mohon bantuannya pak....!!! Terimakasih

[@ariosetiawan173]

sudah bisa kah? di cek di tab console atau network(waktu klik link) keterangannya apa?

[@elisadoa8381]

Nuhun bang dika

[@sandhikagalihWPU]

sawangsulna elisadoa 🙂

[@musakkirtarang3657]

Izin save ya pak..

[@ariwardi7859]

Pak kalau dalam variabel ada variabel itu bacanya gimana ya? Misalnya gini $kalimat = $_POST[kata]; For ($i =0; $i < $kalimat; i++); $b[$i] =ord($kalimat[i]); Cara baca $b[$i] itu gimana ya pak?

[@ariosetiawan173]

mungkin indeksnya terhitung variabel $b indeks ke-i sama dengan lakukan ord pada kalimat ke-i

[@jejakdigital8538]

Maaf pak, untuk action comment supaya masuk ke email kita, ada di video yg judulnya apa ya pak.? Terima kasih.

[@malvinval]

sudah ada video untuk mengirim input comment ke google sheet

[@isengproject6551]

pak saya kan nambahin judul diatasnya itu kalo mau buat judul nya berubah warna otomatis tanpa di klik ,klo pake DOM gimana ya pak? eventnya pake apa?

[@dragonregure]

Tanpa di klik? Terus event trigger nya apa? Harus ada event minimal

[@Joshua-ot7fu]

pak dika kepikiran buat bahas jquery gak nanti ?

[@bendama16]

bang, kalo bikin button like pake javascript, buttonnya itu cuma bisa diklik oleh satu orang saja, itu gimana bang?

[@malvinval]

tombol like implementasinya menggunakan classlist.toggle();

[@ridhoaditya8841]

Pak ketika saya klik gambar yg jumbo eh dia jadi kecil gambar nya terus masuk ke div thumbs, mengatasinya bagaimana ya pak?

[@malvinval]

jangan kasih event kedalam container, cukup kasih event ke setiap img saja. berikut contoh source codenya : ==HTML== IMAGE GALLERY Made with love by Vinternet ==CSS== * { margin: 0; padding: 0; line-height: 0; } img { width: 600px; height: 400px; } body { background-color: #ccc; } h1 { text-align: center; margin-top: 20px; font-family: 'Nunito', sans-serif; } .container { width: 600px; margin: 30px auto; border: 5px solid #fff; overflow: auto; } .clicker { width: 200px; height: 200px; float: left; border: 2px solid whitesmoke; box-sizing: border-box; transition: .3s ease; } .clicker:hover { opacity: 0.8; cursor: pointer; transform: scale(0.95); } @keyframes mainImage { to { opacity: 1; } } .fade { opacity: 0; animation: mainImage 1s forwards; } ==JAVASCRIPT== const vin = document.querySelector('.container .childs') const clicker = vin.children; for ( let i = 0; i < clicker.length; i++ ) { clicker[i].addEventListener('click', function() { const mainImage = document.querySelector('.container .mainImage') mainImage.src = clicker[i].src; mainImage.classList.add('fade'); setTimeout(function() { mainImage.classList.remove('fade'); },700); }); };

[@khairulhadi2676]

Halo pak, saya ukuran foto nya udh 600 x 400 px Tapi dia ga jejer 3 Tetep vertikal ke bawah

[@polsekbaureno2663]

ukuran 600 itu ukuran width gambar jumbonya bang, jadi digambar thumb, width nya kasih ukuran (600 : 3 = 200), biar pas 3 foto. kalau pengen berjejer 4, width nya kasih ukuran ( 650 : 4 = 150px )

[@khairulhadi2676]

@@polsekbaureno2663 wkwkw udah lama itu bang

[@wibowomuhmmad]

loh ko bisa ada line height disituu wkwkwk

[@husnimubarak987]

pake jquery lebih niqmat pak

[@rendiandrian7972]

Pak, maaf melenceng dari topik ini saya mau tanya yg seri php pak. Jadi gini pak saya mau pas reporting pdfnya yg mau d cetak sesuai sama index yg hasil dari pencarian pak misalnya saya cuma ingin mencetak satu nama saya gimana ya pak ? Tidak mencetak semua yg ada d database mohon bantuannya pak. Please

[@sandhikagalihWPU]

sesuaikan saja sintaks sqlnya, jadi misalnya SELECT * FROM mahasiswa WHERE id = 'mahasiswa yang mau ditampilkan datanya'

[@rendiandrian7972]

Tapi itu kan cara manual pak saya maunya yg d print itu hasil dari pencariannya pak . Gimana pak ya ?

[@rendiandrian7972]

Pak ?

[@tiopanjayapanjaitan1177]

Dah ketemu kah solusinya ?

[@erlanggarizky4216]

erlangga_hadir

[@apayanamanyaadayangpunyaid9800]

Saya mau taya kalok bikin scroll trigger pake vanila javascript ada yang tau tutorial nya dimana?

[@mizzuddin123]

knapa x blh reset css cara tuan?

[@kalifapulsa6793]

Mas pengen belajar

[@halimatussakdiyah930]

Ajib

[@ininamakokharusdijarak6815]

// js clip gallery

[@renalbook366]

Kok nggk make setAttribute pak? Malah pake src?

[@sandhikagalihWPU]

karena bisa langsung pake src.. kalo mau pake setAttribute juga bisa kok.. :)

[@renalbook366]

Ohh gtuh thks pak :)

[@renalbook366]

pak dika nanya 1 lagi di menit 21:51 itu kok thumb.className = 'thumb'; Itu maksudnya gmn pak?

[@pramudyaputrapratama7258]

punya ku kok gk bisa ya padahal jsnya dah benar

[@polsekbaureno2663]

kirim codingannya semua bang, biar bisa dicek sama22

[@Fachri_Dessu]

Ga ngerti gmn fungsi thumb.className = 'thumb' ; bekerja 😂

[@bawidyantoro]

thumb pertama itu variabel javascript trus thumb kedua itu class di html

[@tennysabrina483]

Pak saya mau tanya, ko setelah saya ikutin semua cara bapa sampai akhir tapi gajalan ya pak program nya, ketika saya klik gambar yang kecil, dia engga muncul di gambar besar nya, mohon ke jelasannya pak, ini tugas dari dosen disuruh ikutin kodingan bapak-, saya udah play terus video nya saya udah cek ulang udah sama persis pak.. Mohon di respon pak, sebelum nya terima kasih banyak :D

[@sandhikagalihWPU]

Cek di console-nya ada muncul error apa?

[@tennysabrina483]

Nah di console nya saya liat engga ada eror pa, kira kira kenapa ya pa, atau saya bisa kirim dm ga ke bapak saya bingung cari cari tapi ga ketemu masalah dan jawabannya pa,

[@tennysabrina483]

Mungkin saya nya yang kurang teliti, bantu saya pak-,

[@rafid5977]

telat 5 tahun g ngaruh pak hehehe🙏 const thumb = document.querySelectorAll(".thumb"); thumb.forEach(function (el) { el.addEventListener("click", function (e) { e.target.parentElement.parentElement.querySelector(".jumbo").src = el.src; e.target.parentElement.parentElement .querySelector(".jumbo") .classList.add("fade"); thumb.forEach(function (thumbEl) { thumbEl.classList.remove("active"); }); el.classList.add("active"); setTimeout(function () { e.target.parentElement.parentElement .querySelector(".jumbo") .classList.remove("fade"); }, 500); }); });