Cara Membuat Galeri Gambar Sederhana Menggunakan HTML, CSS, dan JavaScript

Membuat galeri gambar sederhana menggunakan HTML, CSS, dan JavaScript adalah cara yang bagus untuk mempelajari dasar-dasar pengembangan web. Di galeri gambar, Anda dapat membolak-balik gambar dengan memilih thumbnail untuk memperbesar gambar di halaman web.

Untuk membuat galeri, Anda dapat menggunakan HTML untuk menambahkan konten halaman web dan CSS untuk menambahkan gaya. Anda dapat menggunakan JavaScript untuk membuat galeri menjadi interaktif saat pengguna mengeklik salah satu thumbnail.

Cara Membuat UI untuk Galeri Gambar

Tambahkan UI untuk galeri gambar menggunakan HTML dan CSS. Ini termasuk menambahkan gambar besar di tengah halaman web, yang akan berubah berdasarkan thumbnail yang dipilih. Anda juga dapat melihat contoh lengkapnya

1. Buat file baru bernama "index.html".
2. Di dalam file ini, tambahkan struktur kode HTML dasar:

   html>
   <htmllang="en-AS">
   <kepala>
   <judul>Galeri Gambarjudul>
   kepala>
   <tubuh>
   <divkelas="pengantar">
   <h2>Galeri Gambarh2>
   <P>Pilih thumbnail di bawah untuk melihat gambarP>
   div>
   tubuh>
   html>

3. Buat subfolder bernama "gambar". Isi dengan beberapa gambar, dan beri nama dari "image1.jpg" menjadi "image10.jpg".
4. Di file HTML Anda, tambahkan div untuk galeri gambar:

   <divpengenal="galeri-gambar">
   div>

5. Di dalam div galeri gambar, tambahkan tag gambar untuk menampilkan gambar yang diperbesar yang dipilih. Secara default, tampilkan gambar pertama di dalam folder "gambar":

   <imgpengenal="gambar-saat ini"src="gambar/gambar1.jpg"alt="Gambar 1">

6. Di folder yang sama dengan file HTML Anda, tambahkan file baru bernama "styles.css" dengan CSS berikut. Jangan ragu untuk memodifikasi CSS untuk ditambahkan komponen desain neumorfik atau buat tweak desain lainnya menggunakan tips dan trik CSS ini.

7. .intro { 
   perataan teks: tengah; 
   font-family: Arial;
   }
   h2 { 
   ukuran huruf: 36px;
   }
   P { 
   ukuran huruf: 14pt;
   }
   #galeri-gambar { 
   lebar: 600px; 
   batas: 0 mobil;
   }
   #gambar-saat ini { 
   lebar: 100%;
   } 

8. Tambahkan tautan ke file CSS Anda di tag kepala file HTML Anda:

   <tautanrel="lembar gaya"jenis="teks/css"href="styles.css">

Cara Menambahkan Thumbnail untuk Gambar Lain di Galeri

Saat ini, galeri gambar hanya menampilkan gambar pertama. Di bawah gambar yang dipilih, tambahkan daftar thumbnail. Thumbnail ini akan menampilkan pratinjau semua gambar di dalam folder "gambar".

1. Di dalam div galeri gambar di file HTML, tambahkan div lain untuk menampilkan thumbnail untuk gambar lain:

   <divpengenal="gambar-jempol">div>

2. Di dalam file CSS, tambahkan beberapa gaya untuk daftar thumbnail:

   #gambar-jempol { 
   menampilkan: melenturkan; 
   membenarkan-konten: tengah; 
   margin-atas: 20px;
   }

3. Di folder yang sama dengan file HTML dan CSS Anda, tambahkan file baru bernama "script.js".
4. Tambahkan tautan ke file JavaScript Anda di bagian bawah tag badan HTML:

   <tubuh>
    Kode Anda di sini 
   <naskahsrc="skrip.js">naskah>
   tubuh>

5. Di dalam file JavaScript, dapatkan elemen HTML dari div yang akan menyimpan daftar thumbnail:

   var imageThumbs = dokumen.getElementById("gambar-jempol");

6. Tambahkan for-loop untuk mengulang setiap dari 10 gambar di galeri:

   untuk (var saya = 1; saya <= 10; saya++) {
   }

7. Di dalam loop, buat elemen img baru untuk setiap gambar:

   var ibu jari = dokumen.createElement("img");

8. Tambahkan nilai untuk atribut "src" dan "alt". Dalam hal ini, atribut "src" adalah jalur file ke gambar pada indeks yang sama di dalam folder "gambar":

   ibu jari.src = "gambar/gambar" + saya + ".jpg";
   ibu jari.alt = "Gambar " + saya;

9. Di dalam file CSS Anda, tambahkan kelas baru untuk memberi gaya pada thumbnail gambar. Anda juga dapat menambahkan gaya CSS transisi atau hover lainnya untuk thumbnail jadikan situs web Anda responsif dan interaktif.

   .ibu jari { 
   lebar: 80px; 
   tinggi: 80px; 
   sesuai objek: menutupi; 
   margin-kanan: 10px; 
   kursor: penunjuk;
   }

10. Di dalam file JavaScript, tambahkan kelas di atas ke thumbnail baru:

    thumb.classList.add("ibu jari");

11. Tambahkan thumbnail baru ke elemen HTML yang berisi daftar thumbnail:

    imageThumbs.appendChild (jempol);

Cara Mengubah Gambar Saat Pengguna Mengklik Thumbnail

Saat pengguna mengklik salah satu thumbnail, ubah gambar yang diperbesar di tengah halaman menjadi gambar yang dipilih. Anda dapat menambahkan fungsi ini di dalam file JavaScript.

1. Di bagian atas file JavaScript, dapatkan elemen HTML dari gambar yang dipilih saat ini:

   var Gambar saat ini = dokumen.getElementById("gambar-saat ini");

2. Di dalam for-loop, tambahkan pengendali acara yang terpicu saat pengguna memilih salah satu thumbnail di bagian bawah halaman:

   thumb.addEventListener(
   "klik", fungsi() {
    }
   );

3. Di dalam event handler, ubah atribut "src" dari gambar saat ini ke gambar yang baru dipilih. Anda juga dapat memperbarui atribut "alt":

   currentImage.src = ini.src;
   CurrentImage.alt = ini.alt;

4. Klik pada file "index.html" untuk membukanya di browser web.
5. Pilih salah satu thumbnail untuk melihat gambar.

Terus Perluas Pengetahuan JavaScript Anda

Terlepas dari pengalaman Anda, penting untuk terus membangun proyek untuk memperluas pengetahuan Anda. Terus jelajahi proyek lain seperti membuat game catur, kalkulator, atau daftar tugas.