Zufälliger Bild-Wechsel beim Neuladen der Seite

Hallo,

ich habe auf meiner Startseite 12 Produkt-Bild-Kacheln (Danke noch mal an Achim für den CSS-Code )
mit Hover-Effekt.

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

 

Also, wenn du das nicht weißt, wer dann?

 

Tja, ich weiß zwar viel, aber eben doch nicht alles
Ich hoffe, dass einer der Programmierer vielleicht eine Idee dazu hat.

 

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.

 

Da stelle ich mir doch mal eine Tasse Kaffee hin (Barbara weiss, warum )

 

Hast du schon auf codepen.io vorbeigeschaut? Was du da nicht findest, gib es wahrscheinlich auch nicht...

 

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

 

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.

 

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.

 

Das sieht gut aus.....

 

@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.

 

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.

 

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.

 

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.

 

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

 

Du musst das Widget nur in einen Bereich einbinden, der weiter unten liegt, dann kommt die Anzeige dort.

 

Nein leider nicht, ich habe ein neues Widget ganz unten erstellt. Die Bilder erscheinen immer ganz oben

 

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.

 

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

 

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