Backstretch unter Typo3

Zuerst müssen die js Dateien im Setup des Seitentemplates eingebunden werden. Das jquery.backstretch.min.js finden Sie hier

page.includeJS.file1 = fileadmin/ihrPfad/jquery.custom.js
page.includeJS.file2 = fileadmin/ihrPfad/jquery.backstretch.min.js

 


Nun wird folgende Anweisung benötigt.

<script type="text/javascript">
        $.backstretch([
          "fileadmin/ihrPfad/hintergrund.jpg",
          "fileadmin/ihrPfad/hintergrund2.jpg",
          "fileadmin/ihrPfad/hintergrund3.jpg",
          "fileadmin/ihrPfad/hintergrund4.jpg",
        ],
        {duration: 5000, fade: 2000}
        );
</script>



Diese am Besten in das Seitenlayout integrieren. Es muss im BODY-Tag aufscheinen.

<body>
    <script type="text/javascript">
        $.backstretch([
          "fileadmin/ihrPfad/hintergrund.jpg",
          "fileadmin/ihrPfad/hintergrund2.jpg",
          "fileadmin/ihrPfad/hintergrund3.jpg",
          "fileadmin/ihrPfad/hintergrund4.jpg",
        ],
        {duration: 5000, fade: 2000}
        );
    </script>

    <div id="container_header_bg">
        <div id="container_header_top">
            <f:render partial="header_top" arguments="{_all}" />
        </div><!-- container_header_top -->
        <div id="header_mobile">....


In der CSS-Datei beim BODY-Tag den Eintrag background: löschen oder auskommentieren. Das Script erstellt einen eigenen Eintrag.

body {
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
    font-size: 1em;
    letter-spacing: 1px;
    /*     background-image: url("hintergrund.jpg"); */
}

 

 

 

Zuerst müssen die js Dateien im Setup des...

Weiterlesen

Um ein Eingabefeld auf einer bestimmten Stelle der...

Weiterlesen

 

Ein einfaches horizontales Menü in Typo3 kann...

Weiterlesen

Zur besseren Bearbeitung macht es oft Sinn die...

Weiterlesen