Membuat Image Gallery dengan jQuery

04/04/2018    Risman Hakim    811     Website

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 :)

jQuery, Web Design, Javascript, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More