Beiträge von Sempervivum

    Zitat

    Soweit ich weiß wird der Audiotrack ja vor dem abspielen komplett gedownloadet.

    Da sind meine Informationen und meine Erfahrungen beim Abspielen solcher Audio-Dateien entgegen gesetzt:

    Der Browser lädt soweit vor, dass zu erwarten ist, dass die Datei ohne Hänger abgespielt werden kann und beginnt dann das Abspielen. Im weiteren Verlauf wird dann gleichzeitig abgespielt und weitere Daten herunter geladen. Müsste man mit einer größeren Audio-Datei mal testen.

    Du musst die Überschrift "Ausstellungserfolge" und die folgende Galerie aus dem Container .beschreibung-slideshow herausnehmen:

    Und das CSS für die Slideshow so ändern, dass nur noch die figure-Elemente absolut positioniert sind:

    Und zum Schluss Beschreibung und Slideshow nebeneinander anordnen:

    Code
    1. .beschreibung-slideshow {
    2. /* Beschreibung und Slideshow nebeneinander anordnen */
    3. display: flex;
    4. }

    Erste, schlechteste Lösung:

    Den .pic-wrapper für Mausklicks durchlässig machen durch pointer-events: none;


    Zweite Lösung, auch nicht so gut:

    Wie Du schon geschrieben hast, Höhe und Breite auf 350px ändern. Dann musst Du zusätzlich:

    1. position: relative; für den umgebenden Container, d. h. div.slideshow setzen

    2. top: 0; und right: 0; für .pic-wrapper setzen (oder einen gewissen Versatz, damit der Container nicht ganz an den Rändern klebt).

    3. Den Versatz für die figure-Element der Slideshow heraus nehmen:

    Dritte und beste Lösung: Die Beschreibung links in einen Container packen, in einem weiteren Container den ersten mit der Beschreibung links und die Slideshow rechts mit Flexlayout anordnen:

    Hier wirst Du mit einem Nachteil von Hintergrundbildern konfrontiert: Man muss die Größe des Containers vorgeben, damit die Grafik sichtbar ist und das macht es schwierig, das Ganze responsiv zu machen. Da Du ja nur die Bilder anzeigst, kannst Du genau so gut img-Tags verwenden, dann kannst Du das CSS so einrichten, dass sich die Höhe des Containers anpasst:

    https://jsfiddle.net/Sempervivum/8q7zkx51/12/

    Zu dem zweiten Problem:

    Du kannst CSS-Anweisungen auch als Inlinestyle im HTML-Text notieren:

    Code
    1. <figure class="pic-4" style="background-image: url(http://cdn.morguefile.com/imageData/public/files/i/Isbiliani/05/p/8787b7ac34a8de4c4aad6fe8a5d7e925.jpg)"></figure>

    Die Slideshow auf der Jugenchampion- Seite funktioniert bei mir nicht und zwar aus folgendem Grund:

    Die Basiseinstellungen für die Animation werden ab Zeile 234 so gemacht:

    Anschließend setzt Du für jedes figure-Tag ein spezifisches animation-delay, z. B. so für .pic-4 ab Zeile 289:

    Das Problem ist jetzt, dass der Selektor .pic-4 weniger spezifisch ist als .slideshow figure. Daher wird animation-delay nicht überschrieben obwohl die Regel nach der allgemeinen ab Zeile 234 notiert ist. Wenn ich es in

    ändere (für die anderen beiden Bilder auch), wird es spezifischer als die allgemeine Regel und die Slideshow funktioniert.

    Hier wird die Sache mit der Spezifizität gut erklärt:

    https://medium.com/@dte/unders…-specificity-a02238a02a59

    Eine wesentliche Veränderung durch die Änderung der Erweiterung ist ja, dass das PHP jetzt geparst wird. Kann es sein, dass dieses die Struktur der Seite verändert, HTML-Elemente und/oder inline-Styles einfügt?

    In jedem Fall wäre es gut, wenn Du eine Demo-Seite hättest, wo man das Ganze live sehen kann. Dort kann man zwar nicht das PHP einsehen, aber HTML, CSS und JS. Hast Du überhaupt noch keinen Webspace?

    Ich glaube, jetzt verstehe ich, was Du vor hast: Auf der Jugendchampion-Seite gibt es oben rechts solch eine Slideshow mit Überblenden. Und solch eine möchtest Du ganz unten auf der C-Wurf-Seite auch haben, wo "Bildergalerie:" steht? Nur wenn Du das CSS auf der C-Wurf-Seite einfügst, zerlegt es dir oben die Bilder mit den Eltern.

    Ich habe es getestet und was ich zunächst vermutet hatte, hat sich bestätigt: Durch touchstart wird der Tooltipp geöffnet und durch touchleave geschlossen. Außerdem ist eine Verzögerung für das Öffnen drin. D. h. man muss das Element berühren und halten, um den Tooltipp zu Gesicht zu bekommen. Dann entsteht jedoch die Komplikation, dass durch langes Berühren auch das Kontextmenü geöffnet wird. Man müsste mal in den Optionen suchen, ob man das unterdrücken kann.

    Wenn man für Öffnen und Schließen beide Male tap verwendet, geht es.

    Weiß nicht, ob es so etwas fertig gibt, aber man kann es relativ leicht selbst implementieren:

    Hier wird beschrieben, wie man die Mausposition relativ zu einem Element ermittelt, in deinem Fall wäre das der Container der Slideshow:

    https://stackoverflow.com/ques…ative-to-element/25870569

    Dann würde ich empfehlen, die Automatik aus zu lassen und mit der API das Weiterschalten zu veranlassen. Die API von Cycle 2 ermöglicht das. Das Intervall dabei kann man aus der Mausposition berechnen.

    Würde ich auch erwarten, dass es dann geht. Um den Fehler einzugrenzen, würde ich mir $_FILES["uploaded_music"]["error"] ansehen.