Hallo an alle!
Auf meiner Seite habe ich mit einem Marker ein Hintergrundbild eingebunden, die der spätere Benutzer einfach über die Seiteneigenschaften bei Ressourcen hochladen kann. Hier mal mein TS, funktioniert auch einwandfrei.
IMG = COA
IMG {
# HTML-Objekt
5 = HTML
5.value = style="background: url(
# Bild
10 = IMG_RESOURCE
10 {
#file.maxH = 200
#file.maxW = 760
file.import=uploads/media/
file.import.data = levelmedia: -1,slide
file.import.listNum = 0
file.import.override.field = media
}
# HTML-Objekt
15 = HTML
15.value = ) no-repeat; background-color: black;"
}
Nun hätte der Nutzer aber gern, dass das Hintergrundbild nicht einfach erscheint, sondern hübsch einfaded, wenn es geladen ist.
Nach einigem Suchen habe ich auch ein Javascrip Snippet gefunden, dass ich wenigestens einigermaßen durchschaue - noch habe ich nämlich keine Ahnung von JS...
Nämlich dieses hier (hier gefunden: http://www.emanuel-kluge.de/tutorial/bilder-mit-jquery-einblenden-wenn-sie-fertig-geladen-sind/):
var loader = "<img src=\"load.gif\" class=\"load\" alt=\"Lädt…\" />";
$(document).ready(function() {
$('.image').hide();
$('.image_frame').append(loader);
$(window).load( function() {
$('.load').hide();
$('.image').fadeIn('slow');
});
});
Nun kommt meine Frage: Wie kriege ich diese beiden Ansätze zusammen? Wie kann ich das JS so umschreiben, dass meine unterschiedlichen Hintergrundbilder (die ja immer verschiedene Namen haben werden) in der Variable loader landen?
Wenn ich das hinbekäme, würde dann jede Seite ihr eigenes Hintergrundbild hünsch einlbenden, oder? Ich hoffe, ihr könnt mir bei dieser punktuellen Frage helfen. Ich werde mich natürlich auch mal von grundauf und intensiv mit JS beschäftigen, aber jetzt brauche ich erstmal nur zeitnah eine Lösung, die funktioniert.
Oder gäbe es ganz und gar keine Lösung nur mit Typoscript (die würde ich dann auch eher verstehen, weil ja Vorkenntnisse da sind)? Das wäre noch besser!
Vielen Dank schonmal im Voraus an alle, die den Text durchlesen und mir helfen!
Nekomancer