Lehigh Clutch Style Guide

Photo Gallery 

<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.