Hallo,
kann mir jemand Helfen? Ich möchte einen Selbsterstellten "Preloader" in ein Contao-Theme einbauen. Weiß jemand wie ich das mache?
Danke im Voraus.
Druckbare Version
Hallo,
kann mir jemand Helfen? Ich möchte einen Selbsterstellten "Preloader" in ein Contao-Theme einbauen. Weiß jemand wie ich das mache?
Danke im Voraus.
Habe ich gerade gemacht. Bin aber erst ab 22 Uhr zuhause. Vielleicht ist jemand schneller...Zitat:
Zitat von jo94
Gesendet von meinem L52 mit Tapatalk
Googel hilft dir ;)
https://codepen.io/rovalx/pen/aOEXPG...ow_forks=false
https://codepen.io/mauritiusdsilva/p...ow_forks=false
Aufbau.
1. Neues Modul erstellen - Eigner HTML Code
2. HTML Code deiner Wahl platzieren. CSS kannst du dort auch InLine zwischen <style></style> oder in deine standard CSS eintragen.
3. Neues Template erstellen - verwende hier ein j_.......html5
5. Umbennen auf j_preload.html5
6. Java Script Code deiner Wahl darin platzieren das <script></script> nicht vergessen.
7. Seitenlayout bearbeiten Modul in den Head bereich
8. j_preloader bei jqueyr wählen.
lg Matthias
Mein Aufbau:
Template fe_page.html5 direkt unter <body>:
In einer eigenen JS-Datei im JQuery-Bereich eingefügt:HTML-Code:<div class="preloader"><div class="loaded"> </div></div>
Und das CSS dazu:Code:$(window).load(function ()
{
$('.loaded').fadeOut();
$('.preloader').delay(1000).fadeOut('slow');
});
Ist identisch mit diesem Template, das ich für Contao nachbaue.HTML-Code:/* ########################################################################################## */
/* Ladeanzeige */
/* ########################################################################################## */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fefefe;
z-index: 99999;
height: 100%;
width: 100%;
overflow: hidden !important;
}
.loaded {
width: 60px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(images/loading.gif);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
background-size: cover;
margin: -20px 0 0 -20px;
}
Danke für Eure Hilfe :)Zitat:
Zitat von Messa
Ich bin den Schritten gefolgt, hat auch alles super geklappt, bis auf einen Punkt.. "Punkt 7" Wenn ich das Modul im Headerbereich einbinde ist nur der Preloader zu sehen, die eigentliche Seite aber leider nicht mehr?
Wenn ich das Modul in der Header-Navigation einbinde, dann rutscht meine Webseite nach links und der Preloader nach rechts?
Weiß vielleicht jemand was ich da falsch gemacht habe?
Sorry ich war an der falschen Stelle, jetzt habe ich das Modul bei "Eingebundene Module" in den Seitenlayouts eingebunden.
Jetzt funktioniert er aber die Seite öffnen sich nicht (also der Preloader lädt die ganze Zeit neu)?
hat jemand eine Lösung für mich? Warum der Preloader nicht aufhört zu laden? Vielen Dank.
Hast Du einen Link zur Seite?
die Seite ist leider noch nicht Online.
Ich hab den Preloader (siehe Anhang) unter Eingebundene Module eingebunden. Sobald ich diesen Online schalte, lädt nur noch der Preloader die eigentliche Seite ist nicht mehr sichtbar :/
Schon ein bisschen älter, aber vielleicht hilft es ja jemand der es auch verwenden will. Hab etwas kämpfen müssen, aber jetzt läuft die tolle Lösung von Samson1964 bei mir mit contao 4.9
Bei jQuery heißt es mittlerweile:
$(window).on('load', function ()
{
$('.loaded').fadeOut();
$('.preloader').delay(1000).fadeOut('slow');
});
denn die Load function gibt es ja nicht mehr.
Und sicherstellen, dass der JS Code auch ausgeführt wird und nicht ganz am Ende eingebunden ist. console.log("komme ich hier vorbei") Ausgabe hat mir geholfen den Fehler zu finden.
Bei meinem Seitenlayout (oneo Theme) musste ich es als externe JS-Datei einbinden; in den JS-Eingabebereich vom Seitenlayout packen oder dort includen hat nicht gereicht.
Gruß
Michel