6.29 Media Gallery View in a new window
A component for displaying images as a carousel with lightbox.
Twig: components/media-gallery/media-gallery.twig
Example
Facilities and classrooms
Markup
<div class="media-gallery">
<div class="media-gallery__header">
<h3 class="media-gallery__title">
Facilities and classrooms
</h3>
</div>
<div class="media-gallery__slides js-media-gallery">
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 1 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 2 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 3 Lorem ipsum dolor sit amet.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 5 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 6 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg">
</figure>
</div>
</div>