Nijmegen Component Library
You are viewing version 2 of the library, the latest version is

Lightbox 

<div id="mdb-lightbox-ui"></div>

<div class="row">
    <div class="col-md-12">
        <p>Multiple images</p>

        <div class="mdb-lightbox">

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van een boot in een meer.">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(42).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(42).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van een ondergaande zon in de bergen">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(43).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(43).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van een ondergaande zon gezien vanuit het vliegtuig">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(45).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(45).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van water scheppen">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(46).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(46).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van een zee gezien vanaf een klif">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(47).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(47).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van een spiegel meer">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(48).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(48).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van een waterval in een kloof">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(49).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(49).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van een ondergaande zon op een strand">
                </a>
            </figure>

            <figure class="col-md-4">
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(51).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(51).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van een zonsondergang">
                </a>
            </figure>

        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <p>Single landscape image</p>
        <div class="mdb-lightbox">
            <figure>
                <a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(114).jpg" data-size="1600x1067">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg" class="img-fluid"
                        alt="Bekijk vergrote afbeelding van een boot in een meer.">
                </a>
            </figure>
        </div>

    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <p>Single portrait image</p>
        <div class="mdb-lightbox">
            <figure>
                <a href="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" data-size="472x708">
                    <img src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" class="img-fluid" alt="Bekijk vergrote afbeelding van een meer tussen de bergen">
                </a>
            </figure>
        </div>

    </div>
</div>

Based on the version from MDB:
https://mdbootstrap.com/javascript/lightbox/#lightbox-margins

Accessibility

Regarding the alt attribute on the images, please follow the decision tree as can be seen here https://www.w3.org/WAI/tutorials/images/decision-tree/

Use the alt attribute to communicate the destination of the link or action taken.

This lightbox use-case follows the Functional Images guideline.

Using

To start using this component, some JavaScript is needed to initialize it.

<script>
    $("#mdb-lightbox-ui").load("/v2/mdb-addons/mdb-lightbox-ui.html");
</script>