Ankündigung

**Sempervivum** · 24.11.2022, 15:46

Das dürfte kein großes Problem sein. Ich dachte zunächst daran, die PHP-Dateien direkt mit PHP-include in Container zu laden, aber dann gibt es zwei Probleme:

Ich erwarte, dass sie ein Grundgerüst mit head und body etc. haben. Daran stört sich zwar kein Browser, wäre aber unsauber.
Es würde nur funktionieren, wenn auch das CSS der Begrüßung und der herein geladenen Dateien identisch wäre.

Daher empfehle ich, in diesem Fall auf iFrames zu setzen. Die sind zwar ein wenig verpönt aber man vermeidet dabei die genannten Probleme.

Für das Überblenden selber empfehle ich, das Rad nicht neu zu erfinden, sondern eine bewährte Slideshow einzusetzen. Selber verwende ich Swiper und habe es auch schon häufig empfohlen:

Swiper - The Most Modern Mobile Touch Slider

https://swiperjs.com

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

**basti1012** · 24.11.2022, 21:57

Zitat von fap Beitrag anzeigen

Das ganze ist für einen Begrüßungsbildschirm, der verschiedene Inhalte einer Intranetseite darstellen soll. Der Effekt soll beim Seitenaufruf starten und auf Touch-Geräte muss keine Rücksicht genommen werden.

Also quasi eine Art Powerpoint, nur mit html, php und css (und Javascript?).

Sollte das nicht mit Ajax lösbar sein ?

**fap** · 25.11.2022, 06:50

Sempervivum und basti1012: Vielen Dank für eure Antworten!

Genau, ich habe ein Grundgerüst mit <html> und <body> etc. und dachte auich daran den Inhalt der "Unterseiten" per Include in das div zu laden.
Es wird allerdings so sein, dass auch die Unterseiten verschiedene divs enthalten können, um Elemente darin zu positionieren.

Ich schaue mir Swiper mal genauer an. Mit Ajax kenne ich mich leider garnicht aus.

Vielen Dank nochmal und viele Grüße

Frank

**Sempervivum** · 25.11.2022, 07:16

Mit Ajax erwarte ich die selben Probleme wie beim Einbinden mit PHP, nur dass es clientseitig und asychron erfolgt. Braucht z. B. nur eine ID in beiden Seiten gleich zu sein.

**basti1012** · 25.11.2022, 21:09

Die Seiten die du einblendest in Sekundentakt , müssten die Funktionieren ?
Ich meine anklickbar sein , oder Geräusche machen oder sonst was?

Du könntest auch Vorschaubilder der Seiten erstellen und dann die ganz normal einblenden mit ein Slider.
Vorteil wäre das es aussieht wie die Seite auch aussieht.
Keine Ladeprobleme.
Usw..
Nachteil ist das die einzelnen Bilder keine beweglichen Inhalte haben und so weiter.
Auch wenn der Inhalt der Seiten täglich anderen Inhalt haben , kann man das so bauen, dass die Bilder automatisch auch den neuen Inhalt anzeigen.

**arnego2** · 26.11.2022, 12:23

Zitat von fap Beitrag anzeigen

Hallo zusammen,

Ich suche eine Möglichkeit mehrere php-Dateien in einem div anzeigen zu lassen.
Sie sollen in einer Endlosschleife jeweils für einige Sekunden angezeigt werden und (bestenfalls weich) überblendet werden.
Es wäre gut, wenn der Dateipfad und die jeweilige Darstellungsdauer einzeln angegeben werden könnte.

Was willst du damit erreichen? Ist die Seite online kannst deine Energien besser darauf verwenden sie weiter zu verbreiten und bekannt machen. Ich sie nicht online können sich deine Freunde daran erfreuen und wenn der Zauber verflogen ist sind auch die Besucher weg.

**fap** · 28.11.2022, 08:37

Hallo zusammen,

vielen Dank für eure Antworten!

basti1012

Die Seiten die du einblendest in Sekundentakt, müssten die Funktionieren?
Ich meine anklickbar sein , oder Geräusche machen oder sonst was?

Ja, die Unterseiten müssten"funktionieren". Es werden mit php z.B. aktuelle Nachrichten, ein Zitat des Tages, das Wetter oder eine Besucherbegrüßung angezeigt.
Bisher löse ich das mit Joomla, dort ist jetzt aber ein Upgrade erforderlich und Joomla 4 ist eindeutig ein Overkill. Die Inhalte der Unterseiten liegen bisher auch außerhalb von Joomla und werden in die dortigen Beiträge per php include eingebunden.
Daher wollte ich das direkt ohne Joomla lösen.

arnego2

Was willst du damit erreichen? Ist die Seite online kannst deine Energien besser darauf verwenden sie weiter zu verbreiten und bekannt machen. Ich sie nicht online können sich deine Freunde daran erfreuen und wenn der Zauber verflogen ist sind auch die Besucher weg.

Es geht nicht um eine klassische Internetseite, sondern um einen Begrüßungsbildschirm.
Der Bildschirm wird mit einem Raspberry Pi 3 betrieben, auf dem mit FullPageOS eben diese Intranetseite dargestellt wird.

Vielen Dank nochmal und viele Grüße
Frank

**Sempervivum** · 28.11.2022, 15:13

Das verstehe ich jetzt so, dass diese Unterseiten die Hauptseite vollständig ausfüllen sollen? In dem Fall gestaltet sich das Ganze sehr einfach:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Swiper as a Background</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.css" />
    <style>
        html,
        body,
        .swiper-wrapper {
            height: 100%;
        }
        body {
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .swiper-slide iframe {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.js"></script>
</head>
<body class="swiper">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
            <iframe src="https://ulrichbangert.de/bkk2/index.php"></iframe>
        </div>
        <div class=" swiper-slide">
            <iframe src="https://ulrichbangert.de/ruegen/index.php"></iframe>
        </div>
        <div class="swiper-slide">
            <iframe src="https://ulrichbangert.de/mallorca/index.php"></iframe>
        </div>
    </div>
    <script>
        const swiper = new Swiper('.swiper', {
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            speed: 1000,
            effect: 'fade',
            loop: true
        });
    </script>
</body>
</html>

**fap** · 03.12.2022, 23:00

Sempervivum: Vielen Dank für deine Antwort!

Es wäre gut, wenn die eizelnen Slides unterschiedlich lange eingeblendet werden könnten.

Ich habe daher mal selbst etwas mit Bootstrap erstellt. Grundlage war das Bootstrap 5.2 Carousel

HTML-Code:

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Testslider</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #inhaltsslider {
            background-color: #eee;
            margin: 100px;
            height: 400px;
            width: 400px;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div id="inhaltsslider" class="carousel slide carousel-fade" data-bs-ride="carousel"  data-bs-touch="false" >
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="4000">
                <p>Testtext 1 <br> (4 Sek.)</p>
            </div>
            <div class="carousel-item" data-bs-interval="6000">
                <p>Zweitertext <br> (6 Sek.)</p>
            </div>
            <div class="carousel-item"data-bs-interval="8000">
                <p>Dritter Testtext  <br> (8 Sek.)</p>
            </div>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Das funktioniert schonmal ganz gut. Allerdings bekomme ich es auch nach Stunden nicht hin, dass der Übergang weicher und langsamer überblendet.

Hat jemand noch eine Idee, wie ich das Bootstrap-Css überschreiben muss?

Über einen Tipp würde ich mich sehr freuen

Vielen Dank und viele Grüße

**Sempervivum** · 04.12.2022, 06:42

Es wäre gut, wenn die eizelnen Slides unterschiedlich lange eingeblendet werden könnten.

Mit Swiper überhaupt kein Problem, siehe hier:
https://swiperjs.com/types/interface...utoplayoptions

If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide. example

HTML-Code:

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">

dass der Übergang weicher und langsamer überblendet.

Hat jemand noch eine Idee, wie ich das Bootstrap-Css überschreiben muss?

Bei Bootstrap wird es durch die API nicht direkt unterstützt aber man kann es durch Änderungen in JS/CSS erreichen, siehe hier:
https://stackoverflow.com/questions/...lides-in-items

Ankündigung

PHP-Inhalte einblenden und als Dauerschleifen wiederholen lassen

PHP-Inhalte einblenden und als Dauerschleifen wiederholen lassen

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

homepage-forum.de - Hilfe für Webmaster! Statistiken

Online-Benutzer

Die neuesten Themen

Die neuesten Beiträge