Beranda
Post

Cara Menampilkan Image dengan Lightbox pada Template Median UI

How to add image with lightbox

Cara menampilkan gambar dengan keterangan / Image with Caption pada Template Median UI. Gambar Agak lambat dimuat karena menggunakan Lazy Image

Format Penulisan:

<div class='lightBox'>
  <details>
    <summary class='n'><span class='c flex center'></span></summary>
  </details>
  <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

Contoh Image dengan Lightbox. Klik pada Gambar untuk melihat efeknya.

image_title

Efeknya mungkin kurang terasa, karena ukuran gambar hampir sama. Berbeda ketika menggunakan grid seperti di bawah ini.

image_title
image_title

Untuk membuat Lightbox dengan grid, tambahkan <div class="psImg grImg"> dan kode penutupnya. Sehingga lengkapnya seperti ini.

<div class="psImg grImg">
  <div class="lightBox">
    <details>
    <summary class="n"><span class="c flex center"></span></summary>
  </details>
    <img alt="image_title" class="lazy" data-src="url_gambar"
	src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
    <noscript><img alt='image_title' src='url_gambar'/></noscript>
  </div>
  <div class="lightBox">
    <details>
    <summary class="n"><span class="c flex center"></span></summary>
  </details>
    <img alt="image_title" class="lazy" data-src="url_gambar"
	src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
    <noscript><img alt='image_title' src='url_gambar'/></noscript>
  </div>
</div>