Ankündigung

Einklappen
Keine Ankündigung bisher.

PHP-Inhalte einblenden und als Dauerschleifen wiederholen lassen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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

  • #2
    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 is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
    Zuletzt geändert von Sempervivum; 24.11.2022, 17:06.
    Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
    (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

    Kommentar


    • #3
      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 ?​
      Erreichbar in mein Javascript-Forum und in ?Facebook-Chat

      Kommentar


      • #4
        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

        Kommentar


        • #5
          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, 08:23.
          Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
          (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

          Kommentar


          • #6
            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.
            Erreichbar in mein Javascript-Forum und in ?Facebook-Chat

            Kommentar


            • #7
              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.
              https://arnego2.com <Marketing, Webseiten, deren Umbau ab €80, Server Umzug, SEO und mehr>

              Kommentar


              • #8
                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

                Kommentar


                • #9
                  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>​
                  Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                  (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                  Kommentar


                  • #10
                    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

                    Kommentar


                    • #11
                      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, 12:49.
                      Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                      (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                      Kommentar

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

                      Einklappen

                      Themen: 57.170   Beiträge: 432.160   Mitglieder: 29.550   Aktive Mitglieder: 41
                      Willkommen an unser neuestes Mitglied, [email protected].

                      Online-Benutzer

                      Einklappen

                      195 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 191.

                      Mit 4.707 Benutzern waren am 12.01.2023 um 04:07 die meisten Benutzer gleichzeitig online.

                      Die neuesten Themen

                      Einklappen

                      Die neuesten Beiträge

                      Einklappen

                      Lädt...
                      X