Membuat Image Gallery dengan jQuery

Membuat Image Gallery dengan jQuery - Image gallery didalam tampilan website merupakan suatu kumpulan objek berupa gambar yang mempunyai efek atau animasi bermacam dalam menampilkan detail gambarnya. Ada beberapa cara dalam membuat image gallery, yang paling sederhana tampilan image gallery bisa kita buat dengan bantuan CSS3. Namun pada artikel kali ini saya akan bagikan bagaimana Membuat Image Gallery dengan jQuery, dimana akan terjadi efek perubahan pada gambar yang diklik. Penasaran seperti apa cara membuatnya ? berikut akan saya praktekan Membuat Image Gallery dengan jQuery.

Langkah 1: Membuat Image Gallery dengan jQuery

Baik, kita mulai membuat image gallery dengan menyiapkan bahan - bahannya terlebih dahulu, yaitu beberapa gambar sebagai objeknya, tentu gambarnya boleh bebas dan juga jumlahnya, pada kasus ini saya menyiapkan 5 gambar untuk dijadikan image gallery. Setelah gambar sudah tersedia, barulah kita akan membuat struktur awal image gallery dengan sintak HTML seperti berikut.

<body>
    <div class="wrapper">
      <div class="gallery">
          <img src="images/img-1.jpeg"/>
      </div>
      <ul class="thumbnail">
        <li>
              <a href="images/img-1.jpeg">
                  <img src="images/img-1.jpeg"/>
              </a>
          </li>
        <li>
              <a href="images/img-2.jpeg">
                  <img src="images/img-2.jpeg"/>
              </a>
          </li>
        <li>
              <a href="images/img-3.jpeg">
                  <img src="images/img-3.jpeg"/>
              </a>
          </li>
        <li>
              <a href="images/img-4.jpeg">
                  <img src="images/img-4.jpeg"/>
              </a>
          </li>
          <li>
              <a href="images/img-5.jpeg">
                  <img src="images/img-5.jpeg"/>
              </a>
          </li>
      </ul>
    </div>
</body>

Silahkan isikan gambar yang sudah disiapkan tadi kedalam tag img src dan href seperti diatas.

Langkah 2: Membuat Image Gallery dengan jQuery

Langkah selanjutnya, kita akan butuh CSS untuk merapihkan layout, maka dari itu silahkan kalian bisa ketikan sintak CSS seperti berikut.

* {padding: 0; margin: 0;}    
.wrapper{
    width:515px;
    margin: auto;
    margin-top: 20px;
}
.gallery img{
    border: solid 2px #484848;
    border-radius: 5px 5px 0 0;
}
ul {margin-top: 1px;}
li {list-style: none;}
li a {
    float: left;
    margin-right: 10px;
}
.thumbnail img{
    width:85px;
    cursor:pointer;
    border:solid 2px #484848;
    padding: 2px;
}

Langkah 3: Membuat Image Gallery dengan jQuery

setelah kita membuat struktur kemudian memberikan style dengan CSS, langkah selanjutnya kita akan membuat fungsi untuk memilih gambar pada saat thumbnail gambar diklik, untuk membuat fungsinya tentu kita butuh jQuery, silahkan ketikan sintak jQuery seperti berikut.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(".thumbnail a").click(function(evt) {
        evt.preventDefault();
        $(".gallery").empty().append(
            $("<img>", {src: this.href})
        );
    });
</script>

sisipkan juga library jQuery nya agar fungsi yang kita buat bisa berjalan dengan baik.

Nah, setelah semua sintak telah diketikan, silahkan simpan filnya dengan nama index.html kemudian buka pada browser masing - masing dan lihat hasilnya, maka akan terlihat seperti pada gambar dibawah ini. Ketika kita meng-klik gambar thumbnail maka gambar besar akan berubah sesuai dengan thumbnail yang dipilih. Selesai

Membuat Image Gallery dengan jQuery

Baik, seperti itulah cara Membuat Image Gallery dengan jQuery, cukup mudah bukan ? Cukup sekian tutorial kali ini, semoga bisa bermanfaat dan selamat mencoba :)

4 April 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat