Page 1 of 1

Runde, sich überlappende Vorschaubilder wie realisieren?

Posted: Fri 13. Apr 2018, 19:20
by Uwe367
Hallo zusammen,

Ich bin durch Zufall auf diese Seite gestoßen:
http://gs-dornum.de/
(Bitte ganz nach unten scrollen)
Dort sieht man Vorschaubilder die in verschieden großen Kreisen angeordnet sind und die sich überlappen. Bei einem Klick darauf vergößern sie sich ganz normal in einer Art Lightbox. Ich finde das sehr schön und mich würde interessieren wie ein Template, z.B. für den CP Images ausehen müßte um das zu realisieren.

Ein möglicher Lösungsansatz könnte so aussehen:
Ich erstelle 2 CP´s HTML, einmal öffnendes DIV, einmal schließendes DIV.
Dazwischen könnte ich meine Bilder in verschiedene CP´s Bilder packen. Die Templates für die CP´s würden verschiedene Größen der Kreise sowie unterschiedliche Positionen beinhalten. Anders wirds wohl nicht klappen oder hat jemand noch ne andere, komfortablere Idee?

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Posted: Fri 13. Apr 2018, 22:01
by top
Ich würde es mit einer einfachem Bilder-Gruppe umsetzen und die einzelnen Vorschaubilder mit unterschiedlichen CSS-Anweisungen positionieren und stylen.
Mit Hilfe von ":nth-child()" bräuchte ich dann den einzelnen Bildern nicht mal unterschiedliche CSS-Klassen verpassen, sondern könnte alles direkt anhand der jeweiligen Position definieren.

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Posted: Sat 14. Apr 2018, 07:25
by Uwe367
Klingt gut, aber ich kann mir momentan nicht vorstellen wie du das meinst, vor allem Bildergruppe? Du meinst damit mehrere Bilder in einem CP oder wie kann ich das verstehen? Sicher.. mehrere Bilder in einem CP Bilder div ist kein Problem, aber wie willst du jedes Bild einzeln triggern?
Es gibt nur ein { IMAGE } Tag.
Hättest du mal ein einfaches Beispiel dafür?

[EDIT]
Hab ein Beispiel dazu gefunden an dem ich mich orientieren werde. Denke das ist dafür brauchbar.
Simulierter Zufall mit CSS
[/EDIT]

Danke für den Tip :)

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Posted: Sun 15. Apr 2018, 14:04
by Uwe367
Nachdem ich dann heute ein paar Stunden mit diversen Versuchen verbrachte klappt das ganze nun endlich mit den CP´s Bilder div und Bilder spezial. Allerdings muß ich für jedes Bild eine separate nth: child Klasse erstellen da ich die Bilder in einem mit dieser Klasse positioniere, aber immer noch besser als für jedes Bild einen eigenen CP mit angepaßtem Template zu erstellen.
War zwar recht nervenaufreibend und fast hätte ich hingeschmissen, aber nun läufts.

Falls es hier noch jemanden gibt den es interessiert.... bitte melden.

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Posted: Sun 15. Apr 2018, 15:05
by update
Zeig bitte mal, vielleicht interessiert mich das ja :)
Gerne auch per PN

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Posted: Sun 15. Apr 2018, 23:42
by top
Wenn du jedes einzelne Bild nachträglich in der Größe oder Position steuern möchtest, kommt man mit meinem Vorschlag nicht zum Ziel.

Wenn man aber jeder dieser Galerien die gleiche "Zufälligkeit" verpassen will, würde ich das in etwa so versuchen:
https://jsfiddle.net/L34mq7cd/42/

Sorry, hatte gerade keine Bildergalerie griffbereit. Andere (auf quadratisch zugeschnittene) Bilder mit verschiedenen Inhalten sollten es natürlich auch tun. :wink:

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Posted: Mon 16. Apr 2018, 05:41
by Uwe367
Doch, das klappt.
Ich habe 11 Bilder und jedem dieser Bilder habe ich eine dieser Klassen verpasst so daß ich jedes Bild separat positionieren und auch noch jedem Bild einen andersfarbigen Rahmen mitgeben kann.
Durch die fortlaufende Nummerierung kann ich jedes Bild einzeln ansteuern und das läuft bestens.

Ich poste heute Abend mal ein Codebeispiel. Bin gleich weg zur Arbeit.