Ankündigung

Einklappen
Keine Ankündigung bisher.

PHP-Inhalte einblenden und als Dauerschleifen wiederholen lassen

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • Sempervivum
    antwortet
    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
    Zuletzt geändert von Sempervivum; 06.12.2022, 11:49.

    Einen Kommentar schreiben:

  • fap
    antwortet
    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

    Einen Kommentar schreiben:

  • Sempervivum
    antwortet
    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>​

    Einen Kommentar schreiben:

  • fap
    antwortet
    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

    Einen Kommentar schreiben:

  • arnego2
    antwortet
    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.

    Einen Kommentar schreiben:

  • basti1012
    antwortet
    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.

    Einen Kommentar schreiben:

  • Sempervivum
    antwortet
    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.
    Zuletzt geändert von Sempervivum; 25.11.2022, 07:23.

    Einen Kommentar schreiben:

  • fap
    antwortet
    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

    Einen Kommentar schreiben:

  • basti1012
    antwortet
    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 ?​

    Einen Kommentar schreiben:

  • Sempervivum
    antwortet
    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:
    1. Ich erwarte, dass sie ein Grundgerüst mit head und body etc. haben. Daran stört sich zwar kein Browser, wäre aber unsauber.
    2. 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.
    Zuletzt geändert von Sempervivum; 24.11.2022, 16:06.

    Einen Kommentar schreiben:

  • fap
    hat ein Thema erstellt PHP-Inhalte einblenden und als Dauerschleifen wiederholen lassen.

    PHP-Inhalte einblenden und als Dauerschleifen wiederholen lassen

    Hallo zusammen,

    ich habe mich angemeldet, weil ich mit einem "etwas speziellen" Problem nicht weiterkomme und hoffe, dass mir hier jemand weiterhelfen kann.

    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.

    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?).


    Kann mit jemand sagen, wie ich dies umsetzen kann? Mit Bildern habe ich das schon häufiger gesehen.
    Ich habe html und css Einsteigerkenntnisse.


    Über einen Tipp würde ich mich sehr freuen.

    Vielen Dank und viele Grüße

    Frank
    Stichworte: -
Vorherige template Weiter

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

Einklappen
Themen: 57.196   Beiträge: 431.993   Mitglieder: 29.634   Aktive Mitglieder: 29
Willkommen an unser neuestes Mitglied, michael50.

Online-Benutzer

Einklappen

757 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 757.

Mit 9.939 Benutzern waren am 17.05.2023 um 21:38 die meisten Benutzer gleichzeitig online.

Die neuesten Themen

Einklappen
Alle anzeigen

Die neuesten Beiträge

Einklappen
Alle anzeigen
Lädt...
X