Runde, sich überlappende Vorschaubilder wie realisieren?

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
User avatar
Uwe367
Posts: 889
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Runde, sich überlappende Vorschaubilder wie realisieren?

Post by Uwe367 » Fri 13. Apr 2018, 19:20

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?

User avatar
top
Posts: 432
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Post by top » Fri 13. Apr 2018, 22:01

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.

User avatar
Uwe367
Posts: 889
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Post by Uwe367 » Sat 14. Apr 2018, 07:25

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 :)

User avatar
Uwe367
Posts: 889
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Post by Uwe367 » Sun 15. Apr 2018, 14:04

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.

User avatar
update
Moderator
Posts: 6370
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Post by update » Sun 15. Apr 2018, 15:05

Zeig bitte mal, vielleicht interessiert mich das ja :)
Gerne auch per PN
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
top
Posts: 432
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Post by top » Sun 15. Apr 2018, 23:42

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:

User avatar
Uwe367
Posts: 889
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Runde, sich überlappende Vorschaubilder wie realisieren?

Post by Uwe367 » Mon 16. Apr 2018, 05:41

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.

Post Reply