Syntax Light Box Image

Untuk menerapkan light Box Image sebaiknya menggunakan syntax bawaan template ini, berikut kode yang bisa diterapkan :

Light Box Image Default

<div class='lightBox'>
  <details>
    <summary class='n'><span class='c flex center'></span></summary>
  </details>
  
</div>
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='#url_gambar'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

Light Box Image With Grid

Syntax yang dipakai :

<div class='psImg grImg'>
  <img alt='image_title_1' src='#url_gambar'/>
  
  <img alt='image_title_2' src='#url_gambar'/>

  <img alt='image_title_3' src='#url_gambar'/>

  <img alt='image_title_4' src='#url_gambar'/>
</div>

Light Box Image and Show All Image

Gunakan syntax ini :

<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_1' src='#url_gambar'/>
  
  <img alt='image_title_2' src='#url_gambar'/>

  <img alt='image_title_3' src='#url_gambar'/>
  
  <div class='btImg'>
    <img alt='image_title_4' src='#url_gambar'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img alt='image_title_5' src='#url_gambar'/>
    
    <img alt='image_title_6' src='#url_gambar'/>
    
    <img alt='image_title_7' src='#url_gambar'/>
    
    <img alt='image_title_8' src='#url_gambar'/>
  </div>
</div>

Untuk DEMO bisa KLIK DISINI