گالری

جاوا اسکریپت برمبنای lightbox برای ارائه نوع های مختلف رسانه

کامپوننت سایت

کامپوننت گالری وابسته به پلاگین 3rd party است ، جهت استفاده باید فایل های css و js پلاگین Light Gallery را در فایل Html خود تعریف کنید به صورت: vendor/lightgallery.js/dist/css/lightgallery.min.css و lightgallery.js/dist/js/lightgallery.min.js اگر به ویژگی های دیگری مانند بزرگنمایی ، نمایش تمام صفحه یا فیلم نیاز دارید ، باید افزونه های اضافی را اضافه کنید:

vendor/lg-fullscreen.js/dist/lg-fullscreen.min.js
vendor/lg-zoom.js/dist/lg-zoom.min.js
vendor/lg-video.js/dist/lg-video.min.js
vendor/lg-thumbnail.js/dist/lg-thumbnail.min.js

برای استفاده از اسلایدر (Carousel) نیز باید فایل های css و js پلاگین Tiny Slider را در فایل پروژه خود تعریف کنید به صورت: vendor/tiny-slider/dist/tiny-slider.css and vendor/tiny-slider/dist/min/tiny-slider.js.

تصویر

عنوان عکس

<!-- Image gallery -->
<div class="gallery">
  <a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="gallery-item-caption">Gallery image caption</span>
  </a>
</div>

// Image gallery
.gallery
  a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-2
    img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
    span.gallery-item-caption Gallery image caption

ویدئو

عنوان ویدئو

<!-- Video gallery -->
<div class="gallery">
  <a href="link-to-youtube/vimeo-video" class="gallery-item video-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="gallery-item-caption">Gallery video caption</span>
  </a>
</div>

// Video gallery
.gallery
  a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>').gallery-item.video-item.rounded-2
    img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
    span.gallery-item-caption Gallery video caption

Iframe (گوگل مپ)

Google map embed

<!-- Iframe (Google map) -->
<div class="gallery">
  <a href="link-to-google-map-embed" data-iframe="true" class="gallery-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    <span class="gallery-item-caption">Google map embed</span>
  </a>
</div>

// Iframe (Google map)
.gallery
  a(href="link-to-google-map-embed", data-iframe="true", data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>').gallery-item.rounded-2
    img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
    span.gallery-item-caption Google map embed

سیستم گریدبندی با فاصله

<!-- Gallery grid with gutters -->
<div class="row g-4 gallery">

  <!-- Item -->
  <div class="col-xl-4 col-sm-6">
    <a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
      <span class="gallery-item-caption">Gallery image caption</span>
    </a>
  </div>

  <!-- Item -->
  <div class="col-xl-4 col-sm-6">
    ....
  </div>

  <!-- Add as many columns with gallery item inside as you need -->
</div>

// Gallery grid with gutters
.row.g-4.gallery

  //- Item
  .col-xl-4.col-sm-6
    a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-2
      img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
      span.gallery-item-caption Gallery image caption
  
  //- Item
  .col-xl-4.col-sm-6
    ...

  //- Add as many columns with gallery item inside as you need

سیستم گریدبندی بدون فاصله

<!-- Gallery grid no gutters -->
<div class="row gallery g-0">

  <!-- Item -->
  <div class="col-xl-4 col-sm-6 border border-light">
    <a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
      <span class="gallery-item-caption">Gallery image caption</span>
    </a>
  </div>

  <!-- Item -->
  <div class="col-xl-4 col-sm-6 border border-light">
    ....
  </div>
  
  <!-- Add as many columns with gallery item inside as you need -->
</div>

// Gallery grid no gutters
.row.gallery.g-0

  //- Item
  .col-xl-4.col-sm-6.border.border-light
    a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item
      img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
      span.gallery-item-caption Gallery image caption
  
  //- Item
  .col-xl-4.col-sm-6.border.border-light
    ...

  //- Add as many columns with gallery item inside as you need

باکس (card)

عنوان

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

کلیک

<!-- Gallery inside card -->
<div class="card gallery">
  <a href="path-to-large-image" class="gallery-item card-img-top" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
    <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
  </a>
  <div class="card-body">
    <h5 class="card-title">Card with gallery thumbnail</h5>
    <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

// Gallery inside card
.card.gallery
  a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-2
    img(src="path-to-thumbnail-image", alt"Gallery thumbnail")
  .card-body
    h5.card-title
      | Card with gallery thumbnail
    p.card-text.fs-sm.text-muted
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

اسلایدر (carousel)

<!-- Gallery inside carousel  -->
<div class="tns-carousel-wrapper tns-controls-outside tns-nav-outside gallery">
  <div class="tns-carousel-inner" data-carousel-options='{"responsive": {"0":{"items":1, "gutter": 16},"576":{"items":2, "gutter": 20},"991":{"items":3, "gutter": 24}}}'>

    <!-- Item -->
    <div>
      <a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
        <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
        <span class="gallery-item-caption">Gallery image caption</span>
      </a>
    </div>

     <!-- Add as many gallery items wrapped in divs as you need -->
  </div>
</div>

// Gallery inside carousel
.tns-carousel-wrapper.tns-controls-outside.tns-nav-outside.gallery
  .tns-carousel-inner(data-carousel-options='{"responsive": {"0":{"items":1, "gutter": 16},"576":{"items":2, "gutter": 20},"991":{"items":3, "gutter": 24}}}')

    //- Item
    div
      a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-2
        img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
        span.gallery-item-caption Gallery image caption
    
    //- Add as many gallery items wrapped in divs as you need

تصاویر کوچک (Thumbnails)

تصاویر +5

<!-- Gallery with thumbnails  -->
<div class="row g-2 g-md-3 gallery" data-thumbnails="true">
  <div class="col-sm-8">
    <a href="path-to-large-image" class="gallery-item rounded-3" data-sub-html="<h6 class="fs-sm text-light">Image caption #1</h6>">
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    </a>
  </div>
  <div class="col-sm-4">
    <a href="path-to-large-image" class="gallery-item rounded-3 mb-2 mb-md-3" data-sub-html="<h6 class="fs-sm text-light">Image caption #2</h6>">
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    </a>
    <a href="path-to-large-image" class="gallery-item rounded-3" data-sub-html="<h6 class="fs-sm text-light">Image caption #3</h6>">
      <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
    </a>
  </div>
  <div class="col-12">
    <div class="row g-2 g-md-3">
      <div class="col-sm">
        <a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #4</h6>">
          <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
        </a>
      </div>
      <div class="col-sm">
        <a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #5</h6>">
          <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
        </a>
      </div>
      <div class="col-sm">
        <a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #6</h6>">
          <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
        </a>
      </div>
      <div class="col-sm">
        <a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #7</h6>">
          <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
        </a>
      </div>
      <div class="col-sm">
        <a href="path-to-large-image" class="gallery-item more-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #8</h6>">
          <img src="path-to-thumbnail-image" alt="Gallery thumbnail">
          <span class="gallery-item-caption fs-base">+5 <span class='d-inline d-sm-none d-md-inline'>photos</span></span>
        </a>
      </div>
    </div>
  </div>
</div>

// Gallery with thumbnails
.row.g-2.g-md-3.gallery(data-thumbnails="true")
  .col-sm-8
    a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #1</h6>").gallery-item.rounded-3
      img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
  .col-sm-4
    a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #2</h6>").gallery-item.rounded-3.mb-2.mb-md-3
      img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
    a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #3</h6>").gallery-item.rounded-3
      img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
  .col-12
    .row.g-2.g-md-3
      .col-sm
        a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #4</h6>").gallery-item.rounded-2
          img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
      .col-sm
        a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #5</h6>").gallery-item.rounded-2
          img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
      .col-sm
        a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #6</h6>").gallery-item.rounded-2
          img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
      .col-sm
        a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #7</h6>").gallery-item.rounded-2
          img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
      .col-sm
        a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #8</h6>").gallery-item.more-item.rounded-2
          img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
          span.gallery-item-caption.fs-base +5 <span class="d-inline d-sm-none d-md-inline">photos</span>