<h3 class="gallery__title">An image gallery</h3>
<p class="gallery__text">Mollit tempor dolor fugiat ut.</p>
<p class="gallery-hint" tabindex="0">
<b>Keyboard controls</b>: Once you have tabbed to a gallery item, you can select the previous and next items using up and down arrow keys. Use the enter key on a selected item to view it.</p>
<div class="gallery">
<h2 class="gallery-image__title gamma">
<span class="gallery-image__title--text">A beautiful image</span>
</h2>
<div class="gallery-image__landscape">
<img class=" gallery-image adaptive lazyloaded" src="../../assets/images/sample/history-burroughs-2.jpg" alt="image" title="image">
<div class="gallery-image__caption">
<p class="gallery-image__credit">Image credit</p>
<p class="gallery-image__description">Ut incididunt aute enim sint est sit ullamco cupidatat ut commodo ullamco.</p>
</div>
</div>
<h2 class="gallery-image__title gamma">
<span class="gallery-image__title--text">Another beautiful image</span>
</h2>
<div class="gallery-image__landscape">
<img class=" gallery-image adaptive lazyloaded" src="../../assets/images/sample/home-col-test-3-aspect-16to9.jpg" alt="image" title="image">
<div class="gallery-image__caption">
<p class="gallery-image__credit">Image credit</p>
<p class="gallery-image__description">Ut incididunt aute enim sint est sit ullamco cupidatat ut commodo ullamco.</p>
</div>
</div>
<h2 class="gallery-image__title gamma">
<span class="gallery-image__title--text">The last image</span>
</h2>
<div class="gallery-image__landscape">
<img class=" gallery-image adaptive lazyloaded" src="../../assets/images/sample/home-sc149-aspect-16to9.jpg" alt="image" title="image">
<div class="gallery-image__caption">
<p class="gallery-image__credit">Image credit</p>
<p class="gallery-image__description">Ut incididunt aute enim sint est sit ullamco cupidatat ut commodo ullamco.</p>
</div>
</div>
</div>
.gallery-hint,
.keyboard-hint {
background: $keyboardHintBackgroundColour;
display: none;
height: 0;
margin: 0;
opacity: 0;
overflow: hidden;
transition: opacity 0.5s;
.enhanced & {
display: block;
}
&:focus {
@include rem(margin-bottom, $verticalSpaceUnit);
@include rem(padding, $verticalSpaceUnit $gutterWidth);
height: auto;
opacity: 1;
}
}
.gallery {
@include rem(margin, $grid-typo-spacing-xxs 0 $verticalSpaceUnit 0);
.ui-accordion-content {
margin: 0;
}
}
.gallery-image {
display: block;
margin: 0 auto;
max-width: auto;
width: 100%;
}
.gallery-image__title {
@include rem(padding-top, $verticalSpaceUnit);
@include rem(padding-bottom, $verticalSpaceUnit);
background: $galleryImagetitleRGBA;
background-position: center center;
background-size: cover;
border-bottom: 0;
border-top: 1px solid $galleryImagetitleBorderColour;
margin: 0;
outline: none;
position: relative;
z-index: 2;
@include interaction-styles {
border-top: 1px solid $galleryImagetitleBorderColour;
cursor: pointer;
}
.enhanced & {
@include rem(padding-left, 20px);
@include rem(padding-right, 20px);
&.gamma {
color: $galleryImagetitleEnhancedGammaColour;
}
}
&.gamma {
color: $galleryImagetitleGammaColour;
}
&.disabled {
background-color: $galleryImagetitleDisabledBackgroundColour;
color: $galleryImagetitleDisabledColour;
@include interaction-styles {
cursor: default;
}
}
&[aria-selected='true'] {
background: $gallerytitleBackgroundColourActive;
color: $gallerytitleTextColourActive;
cursor: default;
.gallery-image__title--shade {
background: $gallerytitleBackgroundColourActive;
}
}
&:hover .gallery-image__title--shade,
&:focus .gallery-image__title--shade,
&:active .gallery-image__title--shade {
background: $galleryImagetitleHoverShadeRGBA;
transition: none;
}
&.ui-state-focus,
&.ui-state-active {
&:hover .gallery-image__title--shade,
&:focus .gallery-image__title--shade,
&:active .gallery-image__title--shade {
background-color: $gallerytitleBackgroundColourActive;
}
&.gallery-image__title.gamma {
color: $gallerytitleTextColourActive;
}
}
}
.gallery-image__title--shade {
background: $galleryImagetitleShadeRGBA;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: 0.5s;
width: 100%;
z-index: 1;
}
.gallery-image__title--text {
position: relative;
z-index: 2;
}
.gallery-image__caption {
@include rem(padding, $grid-typo-spacing-xs 0 $grid-typo-spacing-m);
background: $galleryImageCaptionBackgroundColour;
}
.gallery-image__credit {
@include rem(margin-bottom, 5px);
@include rem(margin-top, -7px);
@include rem(font-size, 12px);
a {
font-weight: normal;
}
}
A gallery showing a series of expandable images with titles, credits and descriptions.
As seen on https://wellcome.ac.uk/about-us/contact-us
The images can be expanded by clicking on the image title. The window then scrolls to the top of the title.
Implemented using jQuery UI. Writing a custom solution or abolishing the component would improve performance and decrease JS payload size.
{
"title": "An image gallery",
"standfirst": "Mollit tempor dolor fugiat ut.",
"hint": {
"label": "Keyboard controls",
"text": "Once you have tabbed to a gallery item, you can select the previous and next items using up and down arrow keys. Use the enter key on a selected item to view it."
},
"items": [
{
"title": "A beautiful image",
"image": "<img class=\" gallery-image adaptive lazyloaded\" src=\"{{ path /assets/images/sample/history-burroughs-2.jpg }}\" alt=\"image\" title=\"image\">",
"credit": "Image credit",
"caption": "Ut incididunt aute enim sint est sit ullamco cupidatat ut commodo ullamco."
},
{
"title": "Another beautiful image",
"image": "<img class=\" gallery-image adaptive lazyloaded\" src=\"{{ path /assets/images/sample/home-col-test-3-aspect-16to9.jpg }}\" alt=\"image\" title=\"image\">",
"credit": "Image credit",
"caption": "Ut incididunt aute enim sint est sit ullamco cupidatat ut commodo ullamco."
},
{
"title": "The last image",
"image": "<img class=\" gallery-image adaptive lazyloaded\" src=\"{{ path /assets/images/sample/home-sc149-aspect-16to9.jpg }}\" alt=\"image\" title=\"image\">",
"credit": "Image credit",
"caption": "Ut incididunt aute enim sint est sit ullamco cupidatat ut commodo ullamco."
}
]
}