Cara Membuat Lightbox Tanpa JQuery part1

Lightbox merupakan sebuah plugin Jquery yang biasa digunakan pada gallery atau kumpulan gambar dalam sebuah website, sebagai seorang web design tentu memiliki banyak kreatifitas untuk menyajikan sebuah tampilan pada website yang dibuat. Oiya sahabat dumet pada artikel ini saya akan membahas cara membuat lightbox tanpa JQueryÂ , sebelum mulai ngetik code yang diperlukan siapin dulu text editor sahabat gunakan.Pertama langsung ikutin langkah-langkahnya ketikan struktur html seperti berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Membuat Lightbox tanpa JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <div class="portfolio">

    <div class="portfolio_item">
      <img src="a.jpg" alt="">
      <div class="portfolio_desc">
        <h3 class="portfolio_title">Ini adalah bagian title</h3>
        <a href="#" class="button">Lihat info</a>
      </div>
    </div>

    <div class="portfolio_item">
      <img src="b.jpg" alt="">
      <div class="portfolio_desc">
        <h3 class="portfolio_title">Ini adalah bagian title</h3>
        <a href="#" class="button">Lihat info</a>
      </div>
    </div>

    <div class="portfolio_item">
      <img src="c.jpg" alt="">
      <div class="portfolio_desc">
        <h3 class="portfolio_title">Ini adalah bagian title</h3>
        <a href="#" class="button">Lihat info</a>
      </div>
    </div>
  </div>

  <div class="portfolio-lightboxes">
    <div class="portfolio-lightbox">
      <div class="portfolio-lightbox_content">
        <a href="#" class="close"></a>
        <img src="1.jpg" alt="">
        <h3 class="portfolio-lightbox_title">Ini adalah bagian title didalam lightbox</h3>
        <p class="portfolio-lightbox_body">Ini adalah bagian content didalam lightbox</p>
      </div>
    </div>

    <div class="portfolio-lightbox">
      <div class="portfolio-lightbox_content">
        <a href="#" class="close"></a>
        <img src="4.jpg" alt="">
        <h3 class="portfolio-lightbox_title">Ini adalah bagian title didalam lightbox</h3>
        <p class="portfolio-lightbox_body">Ini adalah bagian content didalam lightbox</p>
      </div>
    </div>

    <div class="portfolio-lightbox">
      <div class="portfolio-lightbox_content">
        <a href="#" class="close"></a>
        <img src="3.jpg" alt="">
        <h3 class="portfolio-lightbox_title">Ini adalah bagian title didalam lightbox</h3>
        <p class="portfolio-lightbox_body">Ini adalah bagian content didalam lightbox</p>
      </div>
    </div>

  </div>

</body>
</html>

Langkah selanjutnya sahabat siapkan file css ketikan seperti berikut ini:

*, *::before, *::after {
  box-sizing: border-box;
}

body{
  margin:0;
  font-family: 'Arial', sans-serif;
  font-weight: 400;
}

img{
  max-width: 100%;
}

.basic-example{
  display: flex;
  background: #ede2a6;
  padding:3em;
}

p:target{
  background: #91f7dc;
}

.portfolio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:1em;
  padding: 1em;
  background: #fcd994;
}

Jika sahabat sudah selesai membuat kedua file yang dibuat langsung save saja lalu jalankan ke browser masing-masing, jika sudah benar maka akan terlihat tampilan seperti dibawah ini

Oke berarti sudah benar sahabat mengikuti langkah-langkah saya pada artikelÂ cara membuat lightbox tanpa JQueryÂ ,Â baiklah akan kita lanjut pada artikel selanjutnya.

Sahabat jangan lupa tetap ikutin langkah selanjutnya , terima kasih.

Cara Membuat Lightbox Tanpa JQuery part1

Kategori