<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"
}
}
}
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);
.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;
}
Display photo gallery section.