Zufälliger Bild-Wechsel beim Neuladen der Seite

Thema wurde von barbara, 11. April 2021 erstellt.

  1. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.546
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    #1 barbara, 11. April 2021
    Zuletzt bearbeitet: 11. April 2021
    Hallo,

    ich habe auf meiner Startseite 12 Produkt-Bild-Kacheln (Danke noch mal an Achim für den CSS-Code :))
    mit Hover-Effekt.
    upload_2021-4-11_12-32-24.png
    Das würde ich gerne etwas erweitern / ändern, so dass beim Neuladen der Seite 12 andere Bilder, oder eine andere Reihenfolge erscheint.
    Im Netzt habe ich nichts richtiges gefunden.
    Lässt sich das irgendwie machen?

    Nachtrag: es müsste natürlich der ganze Block mit Text und Link geändert werden, nicht nur das Bild
     
  2. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    13. November 2018
    Beiträge:
    28
    Danke erhalten:
    3
    Danke vergeben:
    19
    Also, wenn du das nicht weißt, wer dann?
     
  3. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.546
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Tja, ich weiß zwar viel, aber eben doch nicht alles :D
    Ich hoffe, dass einer der Programmierer vielleicht eine Idee dazu hat.
     
  4. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.422
    Danke erhalten:
    720
    Danke vergeben:
    92
    Ich weiß ja nicht genau, wie Du das gemacht hast, aber wenn ich das richtig verstanden habe hast Du die Anzeige mit dem Produkt-Widget gemacht. Vielleicht kann man das ja auf das Produktliste-Widget übertragen, da gibt es ja schon die zufällige Anzeige, also müsste man ja "nur" noch das CSS vernünftig einbinden.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    6. Juni 2012
    Beiträge:
    433
    Danke erhalten:
    65
    Danke vergeben:
    69
    Da stelle ich mir doch mal eine Tasse Kaffee hin (Barbara weiss, warum ;))
     
  6. FRAGO

    FRAGO Erfahrener Benutzer

    Registriert seit:
    5. Dezember 2019
    Beiträge:
    1.022
    Danke erhalten:
    321
    Danke vergeben:
    192
    Hast du schon auf codepen.io vorbeigeschaut? Was du da nicht findest, gib es wahrscheinlich auch nicht...
     
  7. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.546
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Nein, das war meine erste Idee, aber das hat nciht so funktioniert, wie ich wollte.

    Ich habe einen Code in ein html-Widget eingefügt.

    HTML:
    <div class="row col-xs-12" style="margin-left: auto; margin-right: auto;">
        <div style="overflow-x:auto;">
            <div class="col-xs-6 col-sm-4 col-lg-3 w3-container">
                <div class="w3-display-container w3-opacity-min w3-hover-opacity-off" style="transition:0.5s;width:100%">
                    <a href="/schachteln-klein-sechseck.html"><img alt="schachteln klein, sechseck" class="img-responsive" src="images/product_images/info_images/box-sechseck-21.jpg" />
                    <div class="w3-display-topmiddle w3-display-hover w3-overlay w3-large w3-text-white">
                        <div class="w3-padding w3-animate-opacity w3-large">
                            <span style="text-align: center">Schachteln klein, sechseck</span><br />
                            <br />
                            <span class="top-preis">1,34 EUR</span>
                        </div>
    
                        <div class="w3-display-bottomleft w3-display-hover w3-medium ">
                            <button class="w3-dark-green w3-animate-opacity  w3-btn w3-round" type="button">zum Produkt</button>
                        </div>
                    </div>
                    </a>
                </div>
            </div>
    ....
    </div>
    </div>
    Nein, da war ich glaube ich noch nicht (ich war auf einigen Seiten, habe aber immer nur Slider gefunden)
    Werde ich mir gleich mal anschauen
     
  8. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.422
    Danke erhalten:
    720
    Danke vergeben:
    92
    Man könnte das Ganze in eine PHP-Datei packen und über den Content-Manger ins HTML-Widget bringen.

    In dem PHP-Script würde man am Anfang ein Array mit z. B. 20 Bildern definieren, welches alle Angaben (Texte, Bild-Url usw.) enthält. Dieses Array kann man dann mit "shuffle" oder "array_rand" auf eine zufällige Sortierung bringen. Dann gibt man mit foreach die ersten 12 Bilder aus, die dann immer ein wenig unterschiedlich sind durch die zufällige Sortierung.
     
  9. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.422
    Danke erhalten:
    720
    Danke vergeben:
    92
    Nachtrag, unter https://gambio440.kaistejuhn.de/ habe ich mal ein Beispiel mit der Anzeige von 4 Bildern aus einem Pool von 7 Bildern erstellt. Bei jeder Aktualisierung der Seite werden andere Bilder in einer anderen Reihenfolge angezeigt.
     
  10. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.546
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Das sieht gut aus.....
     
  11. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.422
    Danke erhalten:
    720
    Danke vergeben:
    92
    @barbara Wenn Du damit kein Problem hast, dann kann ich das hier einstellen. Ist ja zum großen Teil Dein Code, ich habe ja nur ein paar Codezeilen drum herum gebaut.
     
  12. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.546
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Der Code kommt ursprünglich von hier:
    (Link nur für registrierte Nutzer sichtbar.)
    (gute Seite zum Lernen und ausprobieren :))

    Ich habe ihn nur für mich und meinen Shop angepasst.
     
  13. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.422
    Danke erhalten:
    720
    Danke vergeben:
    92
    Okay, hier ist das Beispiel als PHP-Datei. Die Datei muss in das Verzeichnis /media/content kopiert werden. Dann im Content-Manager unter "Elemente" eine Skriptdatei anlegen und die PHP-Datei zuweisen. Nun kann man im SE4 ein HTML-Widget einbauen und dort diesen Eintrag aus dem Content-Manger zuweisen.

    Als letzter Hinweis, ich habe das Skript nur kurz getestet, die Benutzung erfolgt auf eigene Gefahr.
     

    Anhänge:

  14. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Mai 2017
    Beiträge:
    762
    Danke erhalten:
    159
    Danke vergeben:
    197
    #14 Anonymous, 14. April 2021
    Zuletzt bearbeitet: 14. April 2021
    Hallo Kai,

    erstmal danke für die Mühe.

    Ich würde das gerne ausprobieren, stehe aber gerade auf dem Schlauch:

    Bis "SE4 HTML Widget einbauen" ist mir alles klar, aber "diesen Eintrag aus dem Content-Manager zuweisen", da hakt es bei mir....

    EDIT:
    Habe es hinbekommen, Tomaten auf den Augen.
     
  15. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    6. Dezember 2016
    Beiträge:
    41
    Danke erhalten:
    0
    Danke vergeben:
    17
    Die Anzeige der Bilder funktioniert. Aber sobald ich den Script über ein Widget im StyleEdit einbinde, erscheinen die Bilder immer am Anfang der Seite, direkt unter dem Slider.

    Wie bekomme ich denn die Bilder weiter nach unten im Content?
    Ich glaub ich steh´ aufm Schlauch:(
     
  16. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.422
    Danke erhalten:
    720
    Danke vergeben:
    92
    Du musst das Widget nur in einen Bereich einbinden, der weiter unten liegt, dann kommt die Anzeige dort.
     
  17. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    6. Dezember 2016
    Beiträge:
    41
    Danke erhalten:
    0
    Danke vergeben:
    17
    Nein leider nicht, ich habe ein neues Widget ganz unten erstellt. Die Bilder erscheinen immer ganz oben
     
  18. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.422
    Danke erhalten:
    720
    Danke vergeben:
    92
    Keine Ahnung warum das bei Dir nicht funktioniert, ich habe das gerade nochmal in meinem Test-Shop eingebaut und nach unten auf die Seite gebracht. Kannst ja mal rein schauen. Link ist noch der gleiche.

    Du musst das alles speichern und dann direkt im Shop schauen, der StyleEditor zeigt das mitunter falsch an.
     
  19. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.546
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Und man darf nicht einmal speichern und dann nachbearbeiten. Das Ding zerpflückt den html-Code.
    Ist mir bei meinem ursprünglichen Code passiert, als ich ein Bild wechseln wollte :(
     
  20. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    6. Dezember 2016
    Beiträge:
    41
    Danke erhalten:
    0
    Danke vergeben:
    17
    Keine Ahnung, woran das liegt. Ich habe jetzt nochmal alle möglichen Varianten getestet. Egal wo ich den Script einfüge, erscheint dieser immer ganz oben. Auch wird mir die Einstellung im Contentmanager jedesmal rausgelöscht ...

    Trotzdem Dank, geile Idee eigentlich