09.05.2023 | TYPO3, Webentwicklung
DIVs nacheinander laden mit JQuery und JS

Manchmal hält man sich an kleinen Spielereien, die im Grunde ganz offensichtlich sind, viel zu lange auf. Die Aufgabenstellung war, eine Bildergalerie mit MitarbeiterInnen nacheinander einzublenden. Das ganze integriert in TYPO3. Als Grundlage dient mir ein neuer Container, der nur für die Ausgabe der Galerie gedacht ist. Dort ergänzt zum Test, nachfolgender Quellcode. Zunächst das Template, was natürlich auch jedes statische (oder dynamische) HTML sein kann.

Container Template

<div class="container vcard-container" id="vcard-container">
    <div class="row">
        <div class="col-12">
            <f:for each="{children_201}" as="record">
                <f:format.raw>
                    {record.renderedContent}
                </f:format.raw>
            </f:for>
        </div>
    </div> <!-- ./row -->
</div> <!-- ./container -->

JavaScript

Um nicht alles selbst machen zu müssen, bediene ich mich an dieser Stelle an JQuery. Durchlaufen werden alle DIVs mit der CSS Klasse .gallery-item. Dort ergänzt ist ein Counter, der in der Timeout Funktion die Timeout Zeit erhöht. Via JQuery wird dann für das aufgerufene Element display:block gesetzt was zunächst global im CSS auf none eingestellt ist. Ein Blick in die Javascript Console lohnt sich hier für die Fehlersuche. Im Beispiel auskommentiert einmal der Counter und das HTML Element was durchlaufen wird.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript">
    $( document ).ready(function() {

        let counter = 0;

        $('.gallery-item').each(function (index, value) {
            counter++;
            // console.log(counter);

            setTimeout(function () {
                // console.dir(value);
                $( value ).css( "display","block" );
            }, 1000 * counter);

        });
    });
</script>

CSS

Ein wenig Kosmetik muss sein und so werden die Bilder nacheinander geladen und eingeblendet.

<style>
    .gallery-item {
        display: none;
    }
    @keyframes vcards {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    .vcard-container .gallery-item {
        animation: vcards 5s;
        animation-fill-mode: vcards backwards;
    }
    .vcard-container .gallery-item img {
        border-radius: 5px;
    }
</style>