Lightgallery vertical

In der Detailansicht der Artikelbilder per lightgallery werden die Vorschaubilder unten angezeigt.
Die Vorschaubilder können auch links angeordent werden.
Fügen Sie dazu in der stylesheet.css Ihres Templates folgenden css-Code ein (Stand xt 6.5.3 / August 2023)

.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
    bottom: 115px;
}

.lg-outer .lg .lg-icon, .lg-outer .lg .lg-toolbar, .lg-outer .lg .lg-thumb-outer, .lg-outer .lg .lg-toogle-thumb {
    background-color: transparent;
}

@media screen and (min-width: 1024px) {
    .lg-outer {
        width: auto;
        right: 125px;
        left: 10px;
    }

    .lg-outer .lg-thumb-outer {
        left: 0;
        top: 70px;
        width: 125px;
        bottom: 0;
        position: fixed;
        right: auto;
        max-height: none;
        overflow-y: scroll;
    }

    .lg-outer .lg-thumb {
        padding: 5px 0;
        height: 100%;
        margin-bottom: -5px;
        display: inline-block;
        vertical-align: middle;
    }

    .lg-thumb-outer.lg-grab, .lg-thumb-outer.lg-grabbing {
        height: unset !important;
    }

    .lg-thumb-item {
        height: unset !important;
    }

    .lg-outer .lg-thumb-item {
        float: unset !important;
    }

    .lg-prev.lg-icon {
        left: 125px;
    }

    .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
        bottom: 0px;
    }
}

xt:Commerce Handbuch (DE)

Lightgallery vertical

Related content