Dynamische Bildergalerie mit zufälliger, sich ändernder Reihenfolge? 
Author: Adrian H.
Visited 354,
Followers 1,
Shared 0
Hallo Community,
ich suche nach einer Möglichkeit, eine Bildergalerie zu erstellen, in der die Bilder dynamisch angeordnet werden (wie z.B. bei dem Objekt Masonry), sich aber mit jedem neuen Klick auf die Seite automatisch neu in zufälliger Reihenfolge anordnen. So würde - auch ohne dass neue Bilder hinzukommen - bei jedem neuen Laden der Webseite eine andere Bilderansicht entstehen. Was aber auch bedeutet, die Seite darf nicht aus dem Cache geladen werden ... gibt es da eine Möglichkeit?
Posted on the
Das normale Galerie-Objekt hat unter "Stil" eine Zufallsanzeige, aber nicht für alle Galerietypen.
Vielleicht kann Incomedia bei den kostenpflichtigen Galerien so eine Option nachrüsten.
-----
Author
Hallo Daniel,
Danke für den Hinweis - aber diese Zufallsanzeige bezieht sich dann ja immer nur auf die Reihenfolge in der Galerie an sich, wo ja immer nur ein Bild zur Zeit erscheint.
Ich hingegen suche eine "bildschirmfüllende" Anzeige mehrerer Bilder, diezufällig dynamisch angeordnet werden.
Dennoch Danke für Deine Anregung.
VG Adrian
Ich habe jetzt eine Bildergalerie mit zufälliger Anordnung der Bilder mit PHP-Code* gebastelt.
A) Testseite >>http://finde-links.de/123blogkommentare/gallery-test-2.php
Der PHP-Code ist im HTML-Objekt. Die Seite erhält die Endung ".php", siehe Screenshot unten
B) Verwendeter PHP-Code:
<?php
$images = array
(
'./gallery/large-3735180.jpg',
'./gallery/large-3094035.jpg',
'./gallery/large-2955582.jpg',
'./gallery/large-2247395.jpg',
'./gallery/large-2213259.jpg',
'./gallery/large-1845884.jpg',
'./gallery/large-1622066.jpg',
'./gallery/large-1547302.jpg',
'./gallery/large-1034901.jpg',
'./gallery/large-210230.jpg',
);
shuffle($images); // the magic
echo '<div class="image-entry">';
foreach ($images as $image)
{
echo "\t" . '<a href="' . $image . '"><img src="' . $image . '" style="width: 25%; margin: 5px" /></a>';
}
echo '</div>';
?>
*PHP-Code:https://stackoverflow.com/questions/5841834/shuffle-order-of-images-in-php
C) Kurze Infos zum Code:
Bilderadressen sind nur einmal im PHP-Code vorhanden, sie werden für Bildanzeige (img src) und Links (a href) genutzt. Den Code für die Showbox musste ich weggelassen, da Probleme mit einfachen und doppelten Anführungszeichen (" und ') die Showbox-Funktion verhinderten.
Vielleicht können die Javascript-Experten eine Javscript-Versionen zur Verfügung stellen.
-----
(It < De) ... wenn Sie Masonry oder Justified Gallery verwenden möchten, gibt es eine einfache Erfindung von mir, die die Bilder zufällig anordnet...
...aber ich muss sagen, dass das beste Ergebnis erzielt wird, wenn die Bilder alle die gleichen Maße haben oder untereinander deckungsgleich sind...
... wenn Sie daran interessiert sind, meinen Code in JS ohne PHP auszuprobieren, müssen Sie den LINK Ihrer Beispielseite mit einer dieser Galerien posten...
.
ciao
.
Nachtrag:
Jetzt habe ich noch den Code für die Showbox innerhalb des PHP-Codes zum Laufen gebracht, so dass beim Klick auf die kleinen Bilder das große Bild in der Showbox angezeigt wird.
Den Hochkommata ' im Showbox-Code wurde das Escape-Zeichen (Backslash) \' vorangestellt.
Testseite >> http://finde-links.de/123blogkommentare/gallery-test-2.php
----- Verwendeter PHP-Code inklusive Showbox -----
<?php
$images = array
(
'./gallery/large-3735180.jpg',
'./gallery/large-3094035.jpg',
'./gallery/large-2955582.jpg',
'./gallery/large-2247395.jpg',
'./gallery/large-2213259.jpg',
'./gallery/large-1845884.jpg',
'./gallery/large-1622066.jpg',
'./gallery/large-1547302.jpg',
'./gallery/large-1034901.jpg',
'./gallery/large-210230.jpg',
);
shuffle($images); // the magic
echo '<div class="image-entry">';
foreach ($images as $image)
{
echo "\t" . '<a href="' . $image . '"><img src="' . $image . '" style="width: 23%; margin: 5px" onclick ="return x5engine.imShowBox({ media:[{type: \'iframe\', url: \'' . $image . '\', width: 1920, height: 1080 }]}, 0, this);" /></a>';
}
echo '</div>';
?>
----------
User Adrian H. kann den Javascript-Code von KolAsim verwenden, wenn er einen Link zu seinen Seiten mit den kostenpflichtigen Objekten Masonry oder Justified Gallery hier postet.
Nachtrag 2:
Für Alle, die in der PHP-Bildergalerie auch noch ...
... unterbringen wollen, siehe geänderte Testseite
>> http://finde-links.de/123blogkommentare/gallery-test-2.php
Der PHP-Code ein brauchbarer Ersatz für eine Bildergalerie, wenn die zufällige Anordnung der Bilder gewünscht ist und Incomedia noch kein Galerie-Objekt mit dieser Funktion anbietet.
Und hier noch einige Erklärungen zu den verwendeten Zeichen:
A) Das Trennzeichen ist // und trennt die Eingaben ...
Bildadresse//Beschreibung//Alt-Tag//Title-Tag
... voneinander. Es kann bei Bedarf auch geändert werden, dann aber auch bei explode ändern.
B) Formatierung der Beschreibung für die Showbox - Beispiele:
<b>Fett</b>
<i>Kursiv</i>
<u>unterstrichen</u>
<br> Einfacher
Zeilenumbruch
<br><br> Doppelter
Zeilenumbruch (z.B. für Überschriften)
C) Geänderter PHP-Code für Beschreibung in der Showbox, Alt- und Title-Tag (Tooltip)
-----
<?php
$images = array
(
'./gallery/large-3735180.jpg//Beschreibung 1//Alt für Sehbehinderte 1//Title 1',
'./gallery/large-3094035.jpg//<b>Fette</> Beschreibung 2//Alt für Sehbehinderte 2//Title 2',
'./gallery/large-2955582.jpg//<i>Kursive</i> Beschreibung 3//Alt für Sehbehinderte 3//Title 3',
'./gallery/large-2247395.jpg//<u>Unterstrichene</u> Beschreibung 4//Alt für Sehbehinderte 4//Title 4',
'./gallery/large-2213259.jpg//Beschreibung mit<br>Zeilenumbruch 5//Alt für Sehbehinderte 5//Title 5',
'./gallery/large-1845884.jpg//<b>Beschreibung fett 6</b><br><br>mit doppelten Zeilenumbruch 6//Alt für Sehbehinderte 6//Title 6',
'./gallery/large-1622066.jpg//Beschreibung 7//Alt für Sehbehinderte 7//Tooltip 7 bei Mouseover',
'./gallery/large-1547302.jpg//Beschreibung 8//Alt für Sehbehinderte 8//Tooltip 8 bei Mouseover',
'./gallery/large-1034901.jpg//Beschreibung 9//Alt für Sehbehinderte 9//Tooltip 9 bei Mouseover',
'./gallery/large-210230.jpg//Beschreibung 10//Alt für Sehbehinderte 10//Tooltip 10 bei Mouseover',
);
shuffle($images); // the magic
echo '<div class="image-entry">';
foreach ($images as $image)
{
$pieces = explode("//", $image);
echo "\t" . '<a href="' . $pieces[0] . '"><img src="' . $pieces[0] . '" alt="'. $pieces[2] .'" title="'. $pieces[3] . '" style="width: 23%; margin: 5px" onclick ="return x5engine.imShowBox({ media:[{type: \'iframe\', url: \'' . $pieces[0] . '\', width: 1920, height: 1080, description: \''. $pieces[1] .'\'}]}, 0, this);" /></a>';
}
echo '</div>';
?>
---------------
... zufällig bin ich hierher zurückgekommen, um zu sehen, was es Neues gibt, ... und als zusätzliche IDEE kam mir die Idee, dass man auf Wunsch auch das bereits im Programm integrierte Portfolio-Objekt, sehr elegant und funktional, verwenden könnte wodurch es möglich ist, meine Erfindung mit EXTRA-Code anzuwenden, der die Karten zufällig präsentieren kann...
.
Author
@Daniel W.,
wow - das ist es, was ich gesucht habe. Danke!
Dann werde ich mal versuchen, den PHP-Code entsprechend zu transformieren, so dass es auch bei mir funktioniert. Tue mich da spontan aber etwas schwer mit, da mir hier einfach die Erfahrung fehlt ... Daher noch zwei Fragen:
(1) binde ich den Code direkt unter den Eigenschaften der Seite/Erweitert ein? Und wo genau dort?
(2) im Code schreibst du "./gallery/large123.jpg'," - wie darf ich mir das vorstellen: ist "gallery" ein Ordner oder ein Pfad, wo die jpg-Datei liegt? Und wo finde ich diesen Ort - denn wenn ich unter Masonry/Liste/hinzufügen Fotos einbinde, weiß ich ja nicht, wo die liegen und am Speicherort meiner Projekte gibt es keinen Ordner "gallery" mit den Fotos, die ich eingebunden habe.
Besten Dank
Adrian
Author
@KolAsim: auch dir herzlichen Dank. Ich fürchte aber, dass deine Lösungsvariante mich noch mehr überfordert, als der Weg von Daniel W. ... Insofern schaue ich erst einmal, ob ich mit dem PHP-Code klarkomme.
Mein PHP-Code wird einfach in ein HTML-Objekt eingefügt und kann dann wie die anderen Objekte im Raster der gewünschten Seite platziert werden.
Testseiten:
A) Auf der oben verlinkten Testseite ist oben ein Text-Objekt und darunter das HTML-Objekt.
B) Hier eine (kopierte) Testseite, bei der ich die beiden Objekte nebeneinander gesetzt habe. Links ist das HTML-Objekt 3 Raster breit und rechts das Text-Objekt 1 Raster breit, siehe
>> http://finde-links.de/123blogkommentare/gallery-test-3.php (links 3 Raster / rechts 1 Raster)
Erklärungen zur Bildadresse im PHP-Code:
1) Das ./ bedeutet vom Verzeichnis ausgehend, in dem die Seite mit dem HTML-Objekt liegt.
2) Da die Bilder jedoch im Unterverzeichnis gallery sind, kommt diese Angabe dazu.
3) Und da die Bilder den Dateinamen 123.jpg haben kommt noch ein / und der Dateinamen dazu.
Alles zusammen ergibt dann als Bildadresse ./gallery/123.jpg
Da ich kein Objekt "Masonry" habe, weiß ich nicht wo die Bilder abgelegt werden, normalerweise sind die Bilder bei WebSite X5 im Unterverzeichnis gallery oder images zu finden.
-----
Author
@Daniel W.: ahhhhh - jetzt verstehe ich. Danke! Werd's asap ausprobieren und mich dann zurückmelden - wird aber wohl erst nächste Woche was werden ..
... ok, ... machen Sie Ihre Tests und Bewertungen
, ... Daniel Beispiel ist gültig...
................................................. ........
... möglicherweise und darüber hinaus gibt es für eine einfache dynamische Galerie auch eine alte exklusive und einzigartige Erfindung von mir für Bildvorschauen im COVER-Modus, die durch das Hinzufügen einer Zeile meines Codes „zufällig“ und ohne PHP-Code auf dem wird serverseitig ...
...wenn Sie meine Ideen in Zukunft ausprobieren möchten, nehmen Sie Kontakt mit uns auf. und warne mich...
.
ciao
.
@Incomedia:
Warum wird nicht bei der Standard-Galerie bei allen Galerietypen "zufällige Anzeige" angeboten?
Auch bei den kostenpflichtigen Galerie-Objekten sollte eine "zufällige Anzeige" möglich sein.
Wie der PHP-Code oben zeigt, muss nur die Reihenfolge der Bilderliste per Zufallsgenerator geändert werden, das geschieht beim PHP-Code ganz einfach mit dem Befehl ...
shuffle($images);
... mehr ist es nicht, das sollte auch bei der Programmiersprache von WebSite X5 möglich sein.
... da es kein BUG ist, ist es hier träge ...
... um Ihre Idee bewerten zu lassen, müssen Sie im Bereich IDEE posten ...
.
Die "Zufallsanzeige" ist im kostenlosen Galerie-Objekt bei 3 von 7 Galerietypen schon vorhanden.
Incomedia müsste nur die vorhandene Funktion (Bilderliste für die Anzeige per Zufallsgenerator sortieren) bei allen Galerietypen anbieten und bei den Einstellungen anzeigen lassen.
-----
@KolAsim: Ich habe es jetzt als Idee eingestellt.
.
Author
@Daniel W.
Hallo Daniel - habe mich nun damit auseinandergesetzt und es funktioniert. Danke! Werde nun aber meine ganzen Bilder noch ein wenig bearbeiten und neu hochladen müssen, da ich die aktuell alle in unterschiedlichen Größen habe, weshalb ich ja bislang auch das Objekt "Masonry" nutze. Wo ich aber noch nicht mit klarkomme, ist die Größe der Anzeige in der Showbox-Galerie, da nach meinen Tests mit deinem PHP-Code die Fotos in der Showbox-Galerie immer in der Originalgröße angezeigt werden ... lässt sich das irgendwie auf eine "maximale Größe" festlegen?
VG Adrian
Dieser Teil des PHP-Codes ist für die Anzeige zuständig, siehe
----- PHP-Code (Ausschnitt) -----
echo "\t" . '<a href="' . $pieces[0] . '"><img src="' . $pieces[0] . '" alt="'. $pieces[2] .'" title="'. $pieces[3] . '" style="width: 23%; margin: 5px" onclick ="return x5engine.imShowBox({ media:[{type: \'iframe\', url: \'' . $pieces[0] . '\', width: 1920, height: 1080, description: \''. $pieces[1] .'\'}]}, 0, this);" /></a>';
}
----- Erklärungen -----
A) width: 23%; margin: 5px <--- Breite der kleinen Bilder in % und Abstand zu anderen Bilder in px
B) width: 1920, height: 1080 <--- max. Größe der Showbox, abhängig vom vorhandenen Platz
Zu A)
Je kleiner die % Angabe desto mehr Bilder passen in eine Reihe und umgekehrt.
Die px Angabe ist der Abstand zu den anderen kleinen Bildern, damit die nicht zusammenkleben.
Zu B)
Wenn die Bilder in der Showbox zu klein sind, dann sind die Bilder zu klein, denn der PHP-Code unterscheidet nicht zwischen den kleinen Bildern und der großen Bildern in der Showbox.
Bilder werden für die Anzeige als "kleine Bilder" mit der % Angabe auf die gleiche Breite gebracht.
Die Showbox kann auch verkleinert werden, wenn man es will - z.B. width: 640, height: 360
Geänderte Testseite >> http://finde-links.de/123blogkommentare/gallery-test-2.php
... wenn Sie den LINK mit „Mauerwerk“ posten, könnten einige EXTRA-Bewertungen vorgenommen werden...
....................
... alternativ gibt es, wie bereits erwähnt, auch meine exklusive dynamische Galerie...
...
.