Cara Membuat Galeri Gambar dengan jQuery - Bootstrap

14/05/2019    Risman Hakim    51     Website

Cara Membuat Galeri Gambar dengan jQuery - Bootstrap - Pernahkah kalian melihat suatu kumpulan gambar yang di muat di dalam satu web dengan tambahan efek ataupun anaimasi ? ya, itu yang di namakan galeri gambar. Memang sudah tidak asing lagi ya dengan tampilan galeri gambar yang di muat dalam suatu web, dengan tujuan agar konten pada website bisa di lihat semua dengan enak. Banyak sekali cara untuk membuat galeri gambar, namun kali ini saya akan bagikan tutorial bagaimana Cara Membuat Galeri Gambar dengan jQuery - Bootstrap. Penasaran seperti apa cara membuat nya, langsung saja simak langkah - langkah nya berikut ini.

Kode HTML

Sebelum memulai mengetikan kode - kode nya, untuk bahan - bahan gambar sebagai nanti galeri gambar nya, kalian bisa menggunakan gambar bebas dan bisa menyesuaikan ukuran nya.

Baik, langkah pertama untuk membuat galei gambar adalah membuat desain terlebih dahulu agar terlihat lebih menarik dan tentunya rapih, pada kasus ini saya desain tampilan nya dengan menggunakan framework Bootstrap. Silahkan kalian bisa ketikan kode HTML seperti berikut.

<div class="container mt-3">
  <div class="row">
    <div class="col-md-6">
      <div class="card border-info">
        <div id="imgBig">
          <img src="img-1.jpeg" class="img-fluid">
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col imgSmall"><img src="img-2.jpg" class="img-fluid"></div>
            <div class="col imgSmall px-0"><img src="img-3.jpg" class="img-fluid"></div>
            <div class="col imgSmall"><img src="img-4.jpg" class="img-fluid"></div>
          </div>
          <div class="row my-3">
            <div class="col imgSmall"><img src="img-5.jpg" class="img-fluid"></div>
            <div class="col imgSmall px-0"><img src="img-6.jpeg" class="img-fluid"></div>
            <div class="col imgSmall"><img src="img-7.jpg" class="img-fluid"></div>
          </div>
          <div class="row">
            <div class="col imgSmall"><img src="img-8.jpeg" class="img-fluid"></div>
            <div class="col imgSmall px-0"><img src="img-9.jpg" class="img-fluid"></div>
            <div class="col imgSmall"><img src="img-1.jpeg" class="img-fluid"></div>
          </div>
        </div>
        <div class="card-footer bg-info">
          <blockquote class="blockquote mb-0">
            <small class="text-white font-weight-bold">jQuery galeri gambar</small>
          </blockquote>
        </div>
      </div>
    </div>
  </div>
</div>

Kode jQuery

Setelah membuat tampilan seperti diatas, langkah selanjutnya adalah membuat fungsi pada tiap - tiap gambar agar bisa di pilih dengan cara di klik. Nah, cara nya silahkan kalian ketikan kode jQuery berikut.

<!-- jQuery first Code -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(document).ready(function() {
    $('.imgSmall img').click(function(event) {
      var id = $(this).data('id');
      var src = $(this).attr('src');
      var img = $('#imgBig img');

      img.fadeOut('fast', function() {
        $(this).attr({src: src,});
        $(this).fadeIn('fast');
      });
    });
  });
</script>

Selanjutnya, setelah semua kode HTML, CSS dan jQuery telah di ketikan semua, silahkan simpan file nya kemudian buka pada browser masing - masing dan lihat hasil nya, maka hasil nya akan terlihat seperti pada gambar berikut. Jika kalian bisa memilih gambar dengan cara meng-klik salah gambar - gambar yang tersedia.

Cara Membuat Galeri Gambar dengan jQuery - Bootstrap

Baiklah cukup sekian tutorial tentang Cara Membuat Galeri Gambar dengan jQuery - Bootstrap, semoga tutorial ini bisa bermanfaat dan menambah referensi kalian dalam belajar dan membuat tampilan desain. Sampai jumpa di artikel selanjutnya :)

jQuery, Web Design, 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