<section class="ecl-gallery" data-ecl-gallery="true">
<ul class="ecl-gallery__list">
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
class="ecl-gallery__item-link" aria-label="Image 1" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-image.jpg">
<figure class="ecl-gallery__image-container"><img class="ecl-gallery__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image 1" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">The EU in brief, institutions
and bodies, countries, symbols, history, facts and figures<span class="ecl-gallery__meta"
data-ecl-gallery-meta="true">Copyright, Author, Licence for image 1</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
class="ecl-gallery__item-link" aria-label="Image 2" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-image2.jpg">
<figure class="ecl-gallery__image-container"><img class="ecl-gallery__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Image 2" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">Information on agriculture,
business, culture, health, etc.<span class="ecl-gallery__meta" data-ecl-gallery-meta="true">Copyright,
Author, Licence for image 2</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg"
class="ecl-gallery__item-link" aria-label="Image 3" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-image3.jpg">
<figure class="ecl-gallery__image-container"><img class="ecl-gallery__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg" alt="Image 3" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">Living, working, travelling
in the EU<span class="ecl-gallery__meta" data-ecl-gallery-meta="true">Copyright, Author, Licence for image
3</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg"
class="ecl-gallery__item-link" aria-label="Image 4" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-image4.jpg">
<figure class="ecl-gallery__image-container"><img class="ecl-gallery__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg" alt="Image 4" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">Information on taxes,
customs, importing and exporting goods, financial support for businesses<span class="ecl-gallery__meta"
data-ecl-gallery-meta="true">Copyright, Author, Licence for image 4</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
class="ecl-gallery__item-link" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-image5.jpg">
<figure class="ecl-gallery__image-container"><video class="ecl-gallery__image"
poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg">
<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<track src="/captions/bunny-en.vtt" kind="captions" srcLang="en" label="English" />
<track src="/captions/bunny-fr.vtt" kind="captions" srcLang="fr" label="français" /></video><svg
focusable="false" aria-hidden="true" class="ecl-gallery__image-icon ecl-icon ecl-icon--l">
<use xlink:href="/dist/media/icons.1dbe9812.svg#general--video"></use>
</svg>
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">EU law<svg focusable="false"
aria-hidden="true" class="ecl-gallery__description-icon ecl-icon ecl-icon--l">
<use xlink:href="/dist/media/icons.1dbe9812.svg#general--video"></use>
</svg><span class="ecl-gallery__meta" data-ecl-gallery-meta="true">Copyright, Author, Licence for image
5</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image6.jpg"
class="ecl-gallery__item-link" aria-label="Image 6" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-image6.jpg">
<figure class="ecl-gallery__image-container"><img class="ecl-gallery__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image6.jpg" alt="Image 6" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">Find official documents,
publications, statistics, open data and more resources<span class="ecl-gallery__meta"
data-ecl-gallery-meta="true">Copyright, Author, Licence for image 6</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image7.jpg"
class="ecl-gallery__item-link" aria-label="Image 7" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-image7.jpg">
<figure class="ecl-gallery__image-container"><img class="ecl-gallery__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image7.jpg" alt="Image 7" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">Teaching material about the
EU, including books and maps<span class="ecl-gallery__meta" data-ecl-gallery-meta="true">Copyright, Author,
Licence for image 7</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a
href="https://download.videvo.net/videvo_files/video/premium/video0038/small_watermarked/millenium_view_night00_preview.mp4"
class="ecl-gallery__item-link" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-image8.jpg">
<figure class="ecl-gallery__image-container"><video class="ecl-gallery__image"
poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg">
<source
src="https://download.videvo.net/videvo_files/video/premium/video0038/small_watermarked/millenium_view_night00_preview.mp4"
type="video/mp4" />
<source
src="https://download.videvo.net/videvo_files/video/premium/video0038/small_watermarked/millenium_view_night00_preview.webm"
type="video/webm" />
<track src="/captions/bunny-en.vtt" kind="captions" srcLang="en" label="English" />
<track src="/captions/bunny-fr.vtt" kind="captions" srcLang="fr" label="français" /></video><svg
focusable="false" aria-hidden="true" class="ecl-gallery__image-icon ecl-icon ecl-icon--l">
<use xlink:href="/dist/media/icons.1dbe9812.svg#general--video"></use>
</svg>
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">Kids' Corner<svg
focusable="false" aria-hidden="true" class="ecl-gallery__description-icon ecl-icon ecl-icon--l">
<use xlink:href="/dist/media/icons.1dbe9812.svg#general--video"></use>
</svg><span class="ecl-gallery__meta" data-ecl-gallery-meta="true">Copyright, Author, Licence for image
8</span></figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image9.jpg"
class="ecl-gallery__item-link" aria-label="Image 9" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-imag9e.jpg">
<figure class="ecl-gallery__image-container"><img class="ecl-gallery__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image9.jpg" alt="Image 9" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">About the EU<span
class="ecl-gallery__meta" data-ecl-gallery-meta="true">Copyright, Author, Licence for image 9</span>
</figcaption>
</figure>
</a></li>
<li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image10.jpg"
class="ecl-gallery__item-link" aria-label="Image 10" data-ecl-gallery-item="true"
data-ecl-gallery-item-share="/share#example-image10.jpg">
<figure class="ecl-gallery__image-container"><img class="ecl-gallery__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image10.jpg" alt="Image 10" />
<figcaption class="ecl-gallery__description" data-ecl-gallery-description="true">EU by topic<span
class="ecl-gallery__meta" data-ecl-gallery-meta="true">Copyright, Author, Licence for image 10</span>
</figcaption>
</figure>
</a></li>
</ul>
<dialog class="ecl-gallery__overlay" data-ecl-gallery-overlay="true">
<header class="ecl-gallery__close" data-ecl-gallery-overlay-header="true"><button data-ecl-gallery-close="true"
type="submit" class="ecl-gallery__close-button ecl-button ecl-button--ghost"><span
class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg
focusable="false" aria-hidden="true" data-ecl-icon="true"
class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--close"></use>
</svg></span></button></header>
<section class="ecl-gallery__slider">
<div class="ecl-gallery__slider-media-container" data-ecl-gallery-overlay-media="true"></div><button
data-ecl-gallery-overlay-previous="true" type="button"
class="ecl-gallery__slider-previous ecl-button ecl-button--ghost"><span class="ecl-button__container"><svg
focusable="false" aria-hidden="true" data-ecl-icon="true"
class="ecl-button__icon ecl-button__icon--before ecl-icon ecl-icon--l ecl-icon--rotate-270">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg><span class="ecl-button__label" data-ecl-label="true">Previous</span></span></button><button
data-ecl-gallery-overlay-next="true" type="button"
class="ecl-gallery__slider-next ecl-button ecl-button--ghost"><span class="ecl-button__container"><span
class="ecl-button__label" data-ecl-label="true">Next</span><svg focusable="false" aria-hidden="true"
data-ecl-icon="true"
class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--l ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></span></button>
</section>
<footer class="ecl-gallery__detail" data-ecl-gallery-overlay-footer="true">
<div class="ecl-gallery__detail-counter"><span data-ecl-gallery-overlay-counter-current="true">0</span> of <span
data-ecl-gallery-overlay-counter-max="true">0</span></div>
<div class="ecl-gallery__detail-actions"><a download="" data-ecl-gallery-overlay-download="true" href=""
class="ecl-gallery__download ecl-link ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Download</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--fluid">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--download"></use>
</svg></a><a data-ecl-gallery-overlay-share="true" href=""
class="ecl-gallery__share ecl-link ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Share</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--fluid">
<use xlink:href="/dist/media/icons.1dbe9812.svg#general--share"></use>
</svg></a></div>
<div class="ecl-gallery__detail-description" data-ecl-gallery-overlay-description="true">The EU in brief,
institutions and bodies, countries, symbols, history, facts and figures</div>
<div class="ecl-gallery__detail-meta" data-ecl-gallery-overlay-meta="true">Copyright, Author, Licence for image 1
</div>
</footer>
</dialog>
</section>Try it yourself on the playground
PlaygroundJS behaviour
Auto initialisation
In order to automatically initalise the JS behaviour, add data-ecl-auto-init="Gallery" to your component's markup:
<section class="ecl-gallery" data-ecl-gallery data-ecl-auto-init="Gallery">
...
</section>
Don't forget to call ECL.autoInit() when your page is ready!
Manual initialisation
When the document is ready, query the element. For example, you can use document.querySelector('[data-ecl-gallery]') if you only have 1 gallery in the page.
Then, instantiate the Gallery component and call init():
var elt = document.querySelector('[data-ecl-gallery]');
var gallery = new ECL.Gallery(elt);
gallery.init();