گالری لایت باکس

تصاویر گالری باید درون عنصر .row .gallery-wrapper پیچیده شوند.

گالری لایت باکس پایه:


<div class="container">  <div class="row gallery-wrapper spacing-20 border-radius">    <div class="col-12 col-md-4 gallery-box">      <div class="gallery-img">        <a href="../assets/images/img-1.jpg" data-gallery-title="Gallery Image 1">          <img src="../assets/images/img-1.jpg" alt="">        </a>      </div>    </div>    <div class="col-12 col-md-4 gallery-box">      <div class="gallery-img">        <a href="../assets/images/img-2.jpg" data-gallery-title="Gallery Image 2">          <img src="../assets/images/img-2.jpg" alt="">        </a>      </div>    </div>    <div class="col-12 col-md-4 gallery-box">      <div class="gallery-img">        <a href="../assets/images/img-3.jpg" data-gallery-title="Gallery Image 3">          <img src="../assets/images/img-3.jpg" alt="">        </a>      </div>    </div>  </div><!-- end row -->
</div><!-- end container -->

فاصله گذاری

فاصله بین هر تصویر را می توان با استفاده از کلاس های ( spacing-0 / spacing-6 / spacing-10 / spacing-20 / spacing-30 ) تغییر داد .

spacing-0: 0px بین تصاویر گالری

spacing-6: 6px بین تصاویر گالری

spacing-10: 10px بین تصاویر گالری

spacing-20: 20px بین تصاویر گالری

spacing-30: 30px بین تصاویر گالری


<div class="container">  <div class="row gallery-wrapper spacing-6"><!-- Or 'spacing-0/spacing-10/spacing-20/spacing-30' -->    <div class="col-12 col-md-4 gallery-box">      <div class="gallery-img">        <a href="../assets/images/img-1.jpg" data-gallery-title="Gallery Image 1">          <img src="../assets/images/img-1.jpg" alt="">        </a>      </div>    </div>    <div class="col-12 col-md-4 gallery-box">      <div class="gallery-img">        <a href="../assets/images/img-2.jpg" data-gallery-title="Gallery Image 2">          <img src="../assets/images/img-2.jpg" alt="">        </a>      </div>    </div>    <div class="col-12 col-md-4 gallery-box">      <div class="gallery-img">        <a href="../assets/images/img-3.jpg" data-gallery-title="Gallery Image 3">          <img src="../assets/images/img-3.jpg" alt="">        </a>      </div>    </div>  </div><!-- end row -->
</div><!-- end container -->

هاور استایل 2

استایل هاور را می توان با افزودن کلاس hover-style-2 به عنصر .gallery-wrapper تغییر داد. 


<div class="container">  <div class="row gallery-wrapper spacing-30 hover-style-2">    <div class="col-12 col-md-4 gallery-box">      <div class="gallery-img">        <a href="../assets/images/img-1.jpg" data-gallery-title="Gallery Image 1">          <img src="../assets/images/img-1.jpg" alt="">        </a>      </div>    </div>    <div class="col-12 col-md-4 gallery-box">      <div class="gallery-img">        <a href="../assets/images/img-2.jpg" data-gallery-title="Gallery Image 2">          <img src="../assets/images/img-2.jpg" alt="">        </a>      </div>    </div>    <div class="col-12 col-md-4 gallery-box">      <div class="gallery-img">        <a href="../assets/images/img-3.jpg" data-gallery-title="Gallery Image 3">          <img src="../assets/images/img-3.jpg" alt="">        </a>      </div>    </div>  </div><!-- end row -->
</div><!-- end container -->