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 :
https://www.youtube.com/playlist?list=PLFIM0718LjIWB3YRoQbQh82ZewAGtE2-3
—
PLAYLIST LAIN:
– HTML Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIVuONHysfOK0ZtiqUWvrx4F
– CSS Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIUBrbm6Gdh6k7ZUvPIAZm7p
– Tutorial Sublime Text
https://www.youtube.com/playlist?list=PLFIM0718LjIWE-Ot9V9qcALx5OMAZY67c
– CSS Layouting
https://www.youtube.com/playlist?list=PLFIM0718LjIUu4Ju9GUL5zpLcuq08TKYr
– Dasar Pemrograman dengan JAVASCRIPT
https://www.youtube.com/playlist?list=PLFIM0718LjIWXagluzROrA-iBY9eeUt4w
– Belajar PHP untuk Pemula
https://www.youtube.com/playlist?list=PLFIM0718LjIUqXfmEIBE3-uzERZPh3vp6
—
MEDIA SOSIAL
– http://instagram.com/sandhikagalih
– https://www.facebook.com/WebProgrammingUNPAS
– http://codepen.io/webprogrammingunpas
– https://github.com/webprogrammingunpas
– http://twitter.com/sandhikagalih
—
UNIVERSITAS PASUNDAN BANDUNG
http://www.unpas.ac.id/
http://www.if.unpas.ac.id/
terimakasih dan selamat #ngoding!
@sandhikagalih
Javascript & DOM #13 – Membuat IMAGE GALLERY
Javascript & DOM #13 – Membuat IMAGE GALLERY
yeaa! 🙌
Nuhun bang dika
Keren Bang dhika….Lanjutkan hehehehe..God Bless bang
Notification squad hadir pak 😂
kenapa gakdi monetize pak chanelnya
Mantap
pak dika kepikiran buat bahas jquery gak nanti ?
makasih ilmunya..
👍 like this
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?
terimakasih , nambah pengetahuan baru ……
Keren👍
Maaf pak, untuk action comment supaya masuk ke email kita, ada di video yg judulnya apa ya pak.?
Terima kasih.
Terima Kasih banyak pak Dhika atas semua vdeo tutorialnya jadi membantu saya dalam membuat aplikasi untuk tugas akhir saya semoga diberi kesehatan selalu
matur kesuwun pak Dhika ,,
Aduh dari dulu gua pengen bisa maen script baru ketemu ni channel nyesel
Seperti biasa tutorialnya ademmm
pake jquery lebih niqmat pak
Ditambah lagi pak tutor yg beginian,kalo boleh buat play list musik atau video dgn HTML5+CSS3+Javascript.Semangat pak 😀
Pak. Yang kayak dulu lagi dong ada bapak di pojok .wkwk . Soal nya kalo liat cara bapak jelasin bisa menginspirasi saya 😊
lanjut pak dika, cara membuat menu dropDwon ya hehe…
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
Bang sandika . .semua tutorialnya bagus sekali detail penjelasannya . Saya suka . Tolong juga buatin tutorial berbasis OOP .. trimakasih
bang, coba doang buat tutorial untuk merelasikan antar database menggunakan skript
Kok nggk make setAttribute pak? Malah pake src?
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
Pak mau tanya, situs buat belajar dom dimana yaa pak?
pak Dika, saya coba buat 3 gallery dalam 1 halaman, javascript yang jalan hanya di gallery pertama. kenapa ya, Pak? mohon pencerahannya.
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 😀
Hadir… mantap, sehat dan sukses selalu…
Bahas jQuery juga dong pak.
bang, kalo bikin button like pake javascript, buttonnya itu cuma bisa diklik oleh satu orang saja, itu gimana bang?
Mantab pak. Kalau boleh request lagi. Pemahaman DOM pada kasus Slider/Carousel dan Step/progress bar. Nuhun
Buat program to do list dong pak pakai javascript
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 🙂
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;
}
}
});
Pak dika, boleh dong bikinin tutorial untuk upload miltiple file gambar dengan progress bar per gambar terus disimpan ke DB 😅
Ajib
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 😀
Sedikit tambahan pak Dika, bukan maksud menggurui cuma ingin tambah dikit di htmlnya agar di img 1.jpg dikasi default class active
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
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?
terus lanjutkan pak sampai bisa jadi full stack js hehe, sehat terus pak
pak punya saya nggk bisa apakah perlu sublime text saya dowlaod plugin
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
Mas pengen belajar