<section class="photo_gallery">
    <div class="gallery_item">
        <a class="gallery" rel="group1" href="/img/lava.jpg" title="hot lava caption">
            <img src="/img/lava.jpg" alt="hot lava" />
        </a>
    </div><!-- end gallery_item -->
    <div class="gallery_item">
        <a class="gallery" rel="group1" href="/img/lava-2.jpg" title="hot lava caption 2">
            <img src="/img/lava-2.jpg" alt="hot lava" />
        </a>
    </div><!-- end gallery_item -->
    <div class="gallery_item">
        <a class="gallery" rel="group1" href="/img/maxresdefault.jpg" title="hot lava caption 3">
            <img src="/img/maxresdefault.jpg" alt="hot lava" />
        </a>
    </div><!-- end gallery_item -->
    <div class="gallery_item">
        <a class="gallery" rel="group1" href="/img/lava.jpg" title="hot lava caption 4">
            <img src="/img/lava.jpg" alt="hot lava" />
        </a>
    </div><!-- end gallery_item -->
</section>
<section class="photo_gallery">
  {% block photo_gallery %}
  {% for gallery_item in gallery_items %}
  {% include "@gallery_item" with gallery_item %}
  {% endfor %}
  {% endblock photo_gallery %}
</section>
{
  "group": "group1",
  "gallery_items": {
    "1": {
      "img": "/img/lava.jpg",
      "imgAlt": "hot lava",
      "caption": "hot lava caption"
    },
    "2": {
      "img": "/img/lava-2.jpg",
      "imgAlt": "hot lava",
      "caption": "hot lava caption 2"
    },
    "3": {
      "img": "/img/maxresdefault.jpg",
      "imgAlt": "hot lava",
      "caption": "hot lava caption 3"
    },
    "4": {
      "img": "/img/lava.jpg",
      "imgAlt": "hot lava",
      "caption": "hot lava caption 4"
    }
  }
}
  • Content:
    var Drupal = Drupal || {};
    (function ($, Drupal) {
      Drupal.behaviors = Drupal.behaviors || {};
      Drupal.behaviors.lehigh_clutch_photogallery = {
        attach: function (context) {
          if (context == document) {
            $('a.gallery').colorbox({ opacity: 0.5, photo: true, maxWidth: '95%', maxHeight: '95%' });
          }
        }
      }
    })(jQuery, Drupal);
    
  • URL: /components/raw/photo_gallery/photo_gallery.js
  • Filesystem Path: bits/05-sections/photo_gallery/photo_gallery.js
  • Size: 349 Bytes
  • Content:
    .photo_gallery {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: $space_and_half;
      margin-top: $space_and_half;
      background-color: $off-white;
      background-color: var(--off-white, $off-white);
    
      .gallery_item {
        margin: $spacer;
      }
    }
    
    #cboxPrevious,
    #cboxNext,
    #cboxClose {
      text-indent: 0;
    
      &::before {
        @include font-awesome-base;
        font-family: $font_awesome !important;
        color: $white;
        color: var(--white, $white);
        font-size: 8rem !important;
    
    
        @include media-breakpoint-down(sm) {
          font-size: 4rem !important;
        }
      }
    
      span {
        position: absolute;
        text-indent: -9999px;
      }
    
      &:hover {
        svg {
          fill: $lehigh_brown;
          fill: var(--lehigh_brown, $lehigh_brown);
          fill-opacity: 1;
          @include transition;
        }
      }
    }
    
    #cboxPrevious {
      left: $spacer !important;
    
      &::before {
        content: "\f104" !important;
      }
    }
    
    #cboxNext {
      right: $space-three !important;
    
      &::before {
        content: "\f105" !important;
      }
    }
    
    #cboxPrevious,
    #cboxNext {
      top: 30%;
      margin-top:0;
    
      @include media-breakpoint-down(sm) {
        width: 10px;
        height: 65px;
      }
    }
    
    #cboxClose {
      &::before {
        font-size: 2rem !important;
        content: "\f00d" !important;
      }
    }
    
    #cboxLoadedContent img {
      max-width:100% !important;
      height:auto !important;
    }
    
  • URL: /components/raw/photo_gallery/photo_gallery.scss
  • Filesystem Path: bits/05-sections/photo_gallery/photo_gallery.scss
  • Size: 1.4 KB

Display photo gallery section.