GDL - Global Design Language

Lightbox 

<ul class="c-lightbox u-list-none u-list-reset u-mb-none u-flex u-wrap ">

    <li class="c-lightbox__item u-p-xsmall">

        <a class="u-block u-relative u-size-full-height" href="#image-0">
            <img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
        </a>

        <div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-0">

            <div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">

                <a href="#image--1" class="o-link-inverse u-mr-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
                    </svg>
                </a>

                <div class="u-relative">
                    <img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
                    <a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
                        <svg class="o-icon o-icon--md">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                        </svg>
                    </a>
                </div>

                <a href="#image-1" class="o-link-inverse u-ml-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>

            </div>

        </div>

    </li>

    <li class="c-lightbox__item u-p-xsmall">

        <a class="u-block u-relative u-size-full-height" href="#image-1">
            <img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
        </a>

        <div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-1">

            <div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">

                <a href="#image-0" class="o-link-inverse u-mr-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
                    </svg>
                </a>

                <div class="u-relative">
                    <img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
                    <a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
                        <svg class="o-icon o-icon--md">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                        </svg>
                    </a>
                </div>

                <a href="#image-2" class="o-link-inverse u-ml-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>

            </div>

        </div>

    </li>

    <li class="c-lightbox__item u-p-xsmall">

        <a class="u-block u-relative u-size-full-height" href="#image-2">
            <img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
        </a>

        <div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-2">

            <div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">

                <a href="#image-1" class="o-link-inverse u-mr-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
                    </svg>
                </a>

                <div class="u-relative">
                    <img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
                    <a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
                        <svg class="o-icon o-icon--md">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                        </svg>
                    </a>
                </div>

                <a href="#image-3" class="o-link-inverse u-ml-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>

            </div>

        </div>

    </li>

    <li class="c-lightbox__item u-p-xsmall">

        <a class="u-block u-relative u-size-full-height" href="#image-3">
            <img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
        </a>

        <div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-3">

            <div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">

                <a href="#image-2" class="o-link-inverse u-mr-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
                    </svg>
                </a>

                <div class="u-relative">
                    <img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
                    <a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
                        <svg class="o-icon o-icon--md">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                        </svg>
                    </a>
                </div>

                <a href="#image-4" class="o-link-inverse u-ml-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>

            </div>

        </div>

    </li>

    <li class="c-lightbox__item u-p-xsmall">

        <a class="u-block u-relative u-size-full-height" href="#image-4">
            <img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
        </a>

        <div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-4">

            <div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">

                <a href="#image-3" class="o-link-inverse u-mr-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
                    </svg>
                </a>

                <div class="u-relative">
                    <img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
                    <a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
                        <svg class="o-icon o-icon--md">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                        </svg>
                    </a>
                </div>

                <a href="#image-5" class="o-link-inverse u-ml-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>

            </div>

        </div>

    </li>

    <li class="c-lightbox__item u-p-xsmall">

        <a class="u-block u-relative u-size-full-height" href="#image-5">
            <img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
        </a>

        <div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-5">

            <div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">

                <a href="#image-4" class="o-link-inverse u-mr-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
                    </svg>
                </a>

                <div class="u-relative">
                    <img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png" alt="image01">
                    <a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
                        <svg class="o-icon o-icon--md">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                        </svg>
                    </a>
                </div>

                <a href="#image-6" class="o-link-inverse u-ml-large">
                    <svg class="o-icon o-icon--md" data-dd-icon="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
                    </svg>
                </a>

            </div>

        </div>

    </li>

</ul>
 
<ul class="c-lightbox u-list-none u-list-reset u-mb-none u-flex u-wrap ">

  {% for item in range(0, 6) %}
  {% set i = loop.index0 %}
  <li class="c-lightbox__item u-p-xsmall">
    
    <a class="u-block u-relative u-size-full-height" href="#image-{{i}}">
      <img class="u-block u-cover" decoding="async" referrerpolicy="no-referrer" src="{{media}}" alt="{{alt}}"> 
    </a>
    
    <div class="c-lightbox__overlay u-fixed u-overflow-hidden u-top u-left" id="image-{{i}}">

      <div class="c-lightbox__expanded u-flex u-justify-center u-items-center ">
        
        <a href="#image-{{i-1}}" class="o-link-inverse u-mr-large">
          <svg class="o-icon o-icon--md" data-dd-icon="">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
          </svg>
        </a>

        <div class="u-relative">
          <img decoding="async" referrerpolicy="no-referrer" class="c-lightbox__full-img" src="{{media}}" alt="{{alt}}">
          <a href="#page" class="c-lightbox__icon-close o-link-inverse u-p-xxsmall u-absolute">
            <svg class="o-icon o-icon--md">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
            </svg>
          </a>
        </div>

        <a href="#image-{{i+1}}" class="o-link-inverse u-ml-large">
          <svg class="o-icon o-icon--md" data-dd-icon="">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
          </svg>
        </a>

      </div>
    
    </div>

  </li>
  {% endfor %}

</ul>
 
{
  "media": "https://www.previewtoday.it/~media/original-hi/43271161050302/gallery1-2-4.png",
  "alt": "image01"
}
  • Content: 
    // Name:            Gallery lightbox
// Description:     Display images in a lightbox
//
// Component:       `c-lightbox`
//
// Dependencies:    `settings/v7/colors.tokens`
//
// ========================================================================

// Variables
// ========================================================================

$lightbox-show: 1;
$lightbox-hide: 0;
$lightbox-full-size: 100%;
$lightbox-close-icon-position: -12px;

// ========================================================================

.c-lightbox {

  // Custom properties
  // ========================================================================

  --lightbox-item-size: 33.333333%;

  // ========================================================================

  margin: 0 -8px;
  
  &__item {
    max-width: var(--lightbox-item-size);
    @include bp(sm) {
      --lightbox-item-size: 25%;
    }
  }

  &__expanded {
    height: $lightbox-full-size;
  }

  &__full-img {
    max-height: 90vh;
    opacity: $lightbox-hide;
    transition: opacity .5s linear;
  }
  
  &__icon-close {
    top: $lightbox-close-icon-position;
    right: $lightbox-close-icon-position;
    border: 2px solid $ui-01;
    border-radius: 50%;
    opacity: $lightbox-show;
    background: $ui-02;
    @include z(high);
  }

  &__overlay {
    width: $lightbox-hide;
    height: $lightbox-hide;
    background-color: rgba($ui-02, .8);
    @include z(clouds);

    &:target {
      width: $lightbox-full-size;
      height: $lightbox-full-size;

      & img,
      & .btn-close {
        opacity: $lightbox-show;
      }
    }
  }
}
  • URL: /components/raw/lightbox/lightbox.scss
  • Filesystem Path: src/lib/components/lightbox/lightbox.scss
  • Size: 1.6 KB

No notes defined.