All fullscreen album listing layouts are placed directly into the main class="anita-main"/ tag without the div class="anita-container"/ wrapper. The only exception is the Classic Grid layout, which we'll cover in detail at the end.

WebGL Carousel Gallery

 Page Main 
main class="anita-main"
     WebGL Carousel Gallery 
    div class="anita-gl-container-wrap anita-albums-listing anita-gl-carousel-gallery-wrap anita-scrollEW"
        div class="anita-gl-container anita-gl-carousel-gallery" data-prev-label="Previous Work" data-next-label="Next Work"
             Gallery Item (Video Example) 
            div class="anita-gl-gallery-item is-video" data-src="video/album01_cover.mp4" data-size="1280x720"
                div class="anita-gl-gallery-item__content"
                    span class="anita-meta anita-gl-gallery__meta"Category/span
                    h2 class="anita-gl-gallery__caption"
                        sup01./supGallery Title
                    /h2
                    span class="anita-gl-gallery__explore"Explore/span
                    a href="album-name.html" class="anita-album-link"/a
                /div
            /div
             Gallery Item (Image Example) 
            div class="anita-gl-gallery-item is-image" data-src="img/album02_cover.jpg" data-size="1440x1080"
                div class="anita-gl-gallery-item__content"
                    span class="anita-meta anita-gl-gallery__meta"Category/span
                    h2 class="anita-gl-gallery__caption"
                        sup02./supGallery Title
                    /h2
                    span class="anita-gl-gallery__explore"Explore/span
                    a href="album-name.html" class="anita-album-link"/a
                /div
            /div
             Gallery Item 
            ...
        /div
    /div
/main

Inside the gallery tag, data-prev-label and data-next-label attributes are used to specify labels that show after hovering the navigation buttons.

In the gallery item tag div class="anita-gl-gallery-item"/, you should specify the slide type using the class is-video or is-image for video or image slide type. In the data-src attribute, you should define the URL to the slide's image or video file. And finally, in the data-size attribute, you should specify the original image (or video) size in pixels, in the way "width x height".

Roll WebGL Carousel

 Page Main 
main class="anita-main"
     WebGL Roll Carousel 
    div class="anita-gl-container-wrap anita-albums-listing anita-gl-roll-gallery-wrap anita-scrollNS"
        div class="anita-gl-container anita-gl-roll-gallery" data-prev-label="Previous Work" data-next-label="Next Work"
             Gallery Item (Video Example) 
            div class="anita-gl-gallery-item is-video" data-src="video/album01_cover.mp4" data-size="1280x720"
                div class="anita-gl-gallery-item__content"
                    span class="anita-meta anita-gl-gallery__meta"Category/span
                    h2 class="anita-gl-gallery__caption"
                        sup01./supGallery Title
                    /h2
                    span class="anita-gl-gallery__explore"Explore/span
                    a href="album-name.html" class="anita-album-link"/a
                /div
            /div
             Gallery Item (Image Example) 
            div class="anita-gl-gallery-item is-image" data-src="img/album02_cover.jpg" data-size="1440x1080"
                div class="anita-gl-gallery-item__content"
                    span class="anita-meta anita-gl-gallery__meta"Category/span
                    h2 class="anita-gl-gallery__caption"
                        sup02./supGallery Title
                    /h2
                    span class="anita-gl-gallery__explore"Explore/span
                    a href="album-name.html" class="anita-album-link"/a
                /div
            /div
             Gallery Item 
            ...
        /div
    /div
/main

As you can see, the main differences between this and previous galleries are only in wrapper classes. The slide HTML is all the same with the same rules and options.

WebGL Slider Gallery

 Page Main 
main class="anita-main"
     WebGL Slider Gallery 
    div class="anita-gl-container-wrap anita-albums-listing anita-gl-slider-gallery-wrap anita-scrollEW"
        div class="anita-gl-container anita-gl-slider-gallery" data-type="fade" data-fit="cover" data-intensity="0.5" 
        data-prev-label="Previous Work" data-next-label="Next Work"
             Gallery Item (Video Example) 
            div class="anita-gl-gallery-item is-video" data-src="video/album01_cover.mp4" data-size="1280x720"
                div class="anita-gl-gallery-item__content"
                    span class="anita-meta anita-gl-gallery__meta"Category/span
                    h2 class="anita-gl-gallery__caption"
                        sup01./supGallery Title
                    /h2
                    span class="anita-gl-gallery__explore"Explore/span
                    a href="album-name.html" class="anita-album-link"/a
                /div
            /div
             Gallery Item (Image Example) 
            div class="anita-gl-gallery-item is-image" data-src="img/album02_cover.jpg" data-size="1440x1080"
                div class="anita-gl-gallery-item__content"
                    span class="anita-meta anita-gl-gallery__meta"Category/span
                    h2 class="anita-gl-gallery__caption"
                        sup02./supGallery Title
                    /h2
                    span class="anita-gl-gallery__explore"Explore/span
                    a href="album-name.html" class="anita-album-link"/a
                /div
            /div
             Gallery Item 
            ...
        /div
    /div
/main

Here we have new attributes. Let's take a look at them. The data-type attribute is responsible for the effect with which the slides will change. It can take one of 4 values: fade for fading slide transition, parallax for parallax transition, pixel for pixel storm transition, and sliced for the diagonally sliced transition.

The data-fit attribute can be used to change the fit type. You can use one of two values: cover to cover the entire screen with the media, and fit to fit the media on the screen in its original proportions.

And finally, the data-intensity attribute is responsible for the intensity of the transition effect. This option is not compatible with the sliced gallery type.

As for the gallery item, it is the same as in previous cases.

Flat Carousel

 Page Main 
main class="anita-main"
     Flat Carousel Gallery 
    div class="anita-carousel-gallery-wrap anita-scrollEW"
        div class="anita-albums-listing anita-flat-carousel anita-carousel-gallery" data-prev-label="Previous Work" data-next-label="Next Work"
             Gallery Item (Video Example) 
            div class="anita-gallery-item is-video" data-type="video"
                video src="video/albums/album01.mp4" playsinline muted loop/video
                div class="anita-gallery-item__content"
                    span class="anita-meta anita-gallery__meta"Category/span
                    h2 class="anita-gallery__caption"
                        sup01./supGallery Title
                    /h2
                    span class="anita-gallery__explore"Explore/span
                    a href="album-name.html" class="anita-album-link"/a
                /div
            /div
             Gallery Item (Image Example) 
            div class="anita-gallery-item is-image" data-type="image"
                img src="img/null.png" class="anita-lazy" data-src="img/album02_cover.jpg" alt="Gallery Title" width="1440" height="1080"
                div class="anita-gallery-item__content"
                    span class="anita-meta anita-gallery__meta"Category/span
                    h2 class="anita-gallery__caption"
                        sup02./supGallery Title
                    /h2
                    span class="anita-gallery__explore"Explore/span
                    a href="album-name.html" class="anita-album-link"/a
                /div
            /div
             Gallery Item 
            ...
        /div
    /div
/main

As you can see, the gallery item part is a little bit different from previous cases. There is no data-src attribute on the gallery item parent. Instead of that, the video/ and the image are placed by itself. The image uses the lazy loading feature and has requirements as in the Grid Gallery element that we have talked about in the Content Elements section.

Classic Grid

 Page Main 
...
section class="anita-section"
     Flat Carousel Gallery 
    div class="anita-albums-listing anita-works-grid anita-grid-gallery anita-grid--3cols anita-zoom-hover anita-item-zoom-hover anita-item-fade-hover"
         Gallery Item 
        div class="anita-grid-gallery-item"
            div class="anita-grid-item__inner"
                div class="anita-grid-item__image"
                    img src="img/null.png" class="anita-lazy" data-src="img/album01_cover.jpg" alt="Gallery Title" width="960" height="720"
                /div
                div class="anita-works-grid-meta anita-meta"
                    span class="anita-grid-item__category"Category/span
                    span class="anita-grid-item__count"10 Photos/span
                /div
                h5
                    Gallery Title
                /h5
                a href="album-name.html"/a
            /div
        /div
         Gallery Item 
        ...
    /div
/section

Here the classes and options are pretty close to the Grid Gallery element that we have talked about in the Content Elements section. But for the parent tag, there is one more hover effect class. Let's take a deep: