DOM Structure

Galleria builds a rich DOM structure for each Gallery. You can access them in the Theme API using this.get( ID ) or this.$( IDs ). Read more about DOM manipulation in the API Reference.

List of elements

Here is a list of each element in the default Galleria DOM and their layout:

container
    stage
        images
        loader
        counter
            current
            total
        image-nav
            image-nav-right
            image-nav-left
    thumbnails-container
        thumb-nav-left
        thumbnails-list
            thumbnails
        thumb-nav-right
    info
        info-text
            info-title
            info-description
            info-author
    tooltip

HTML structure

The HTML structure is built with a galleria- prefix to all classes to ensure CSS encapsulation. The class .carousel is added to thumbnails-container if a carousel is present. The .disabled class is added to thumb-nav-left and thumb-nav-right if you are at the end/start of the carousel.

The container will also receive a galleria-theme-[name] class depending on the theme that was used.

This presentation of the Galleria HTML structure is good to have when building CSS for your custom theme:

<div class="galleria-container galleria-themeclassic">
    <div class="galleria-stage">
        <div class="galleria-images">
            <div class="galleria-image">
                <div class="galleria-layer"></div>
                <img>
            </div>
            <div class="galleria-image">
                <div class="galleria-layer"></div>
                <img>
            </div>
        </div>
        <div class="galleria-loader"></div>
        <div class="galleria-counter">
            <span class="current"></span>
            <span class="total"></span>
        </div>
        <div class="galleria-image-nav">
            <div class="galleria-image-right-nav"></div>
            <div class="galleria-image-left-nav"></div>
        </div>
    </div>
    <div class="galleria-thumbnails-container [ carousel ]">
        <div class="galleria-thumb-nav-left [ disabled ]"></div>
        <div class="galleria-thumbnails-list">
            <div class="galleria-thumbnails">
                <div class="galleria-image">
                    <img>
                </div>
                [...]
            </div>
        </div>
        <div class="galleria-thumb-nav-right [ disabled ]"></div>
    </div>
    <div class="galleria-info">
        <div class="galleria-info-text">
            <div class="galleria-info-title"></div>
            <div class="galleria-info-description"></div>
            <div class="galleria-info-author"></div>
        </div>
    </div>
    <div class="galleria-tooltip"></div>
</div>