Hallo

Gibt es (Nicht-Flash-)Websites, auf denen auf einer dynamisch großen Fläche eine Anzahl X an Bildern/Thumbs mit einem fixen Abstand zueinander platziert sind, sodass die Fläche zur Darstellung optimal genutzt wird? Die Thumbs würden sich beim Verkleinern und Vergrößern der Fläche also neu anordnen und/oder ihre Darstellungsgröße verändern (so, dass alle darauf befindlichen Thumbs gleichgross sind).





Geht das überhaupt? Hat jemand Beispiele?

Danke schon mal.

also generell kannst du das mit einfachem html/css machen. div container, der alle imgs enthält. die images bekommen dann css „float: left;“ verpasst und rutschen dann automatisch in die nächste reiche, wenn man den container verkleinert/vergrößert.

1. <div>
2. <img class="thumb"/>
3. <img class="thumb"/>
4. <img class="thumb"/>
5. <img class="thumb"/>
6. …
7. </div>

Quelltext in Zwischenablage kopieren

css:

1. .thumb { float: left; } /* punkt vor thumb bedeuted: class */

Quelltext in Zwischenablage kopieren

mit zusätzlichem javascript (jquery) kann sicherlich das noch so machen, dass die containergröße gecheckt wird, bzw. wieviel lücke nach dem letzten bild vorhanden ist, dass dann durch die anzahl der bilder in der reihe teilt und zu den bildern jeweils addiert… 

1. round(div-width / thumb-width) = anzahl der möglichen thumbs (abstände aussen vor)
2. div-width – (num_thumbs × thumb-width) = freier verfügbarer platz
3. thumb-width + (freier-platz / num_thumbs) = neue, optimale thumbgrösse

Quelltext in Zwischenablage kopieren

also es geht irgendwie

aber es ist schon recht oder? also, vor allem, wenn die thumbs verschiedene breiten (aber immerhin die gleiche höhe) haben?

danke jedenfalls schon mal für die antwort.

hat jemand noch beispiele?

Eigentlich so wie hier oder? http://suprb.com/apps/gridalicious/

wenn sie verschiedene größen haben, wird es sehr viel aufwändiger

marx schrieb am 12.01.11, 14:42 Uhr:

Eigentlich so wie hier oder? http://suprb.com/apps/gridalicious/

ja, genau. wobei man immerhin von der gleichen höhe der thumbs ausgehen kann, wie gesagt. trotzdem danke.

Edit: Ah, nein, Moment, marx, in deinem Beispiel bleiben die Textboxen ja gleichgross und ordnen sich „nur“ neu an. Je nach Menge und Proportion sollen die Thumbs auch noch größer oder kleiner werden, je nachdem, wieviel Platz da ist.

Achso. Stimmt.

vielleicht kann tanzaku was für dich tun.

ich bin mir grad echt nicht sicher wie du das meinst, kathi. kannste das mal skizzieren? oder ein Flashbeispiel zeigen?

- die Fläche ist dynamisch breit
- die buttons sind dynamisch breit

- gibt es ne max und min-Breite, sowohl für buttons und fläche?

bogus schrieb am 12.01.11, 15:06 Uhr:

vielleicht kann tanzaku was für dich tun.

danke! - das ist aber doch eigentlich so wie in marxens beispiel, oder hab ich was übersehen?

@ dirk: sorry, es ist ein bisschen brain... skizze folgt. :-9

kathi schrieb am 12.01.11, 15:46 Uhr:

bogus schrieb am 12.01.11, 15:06 Uhr:

vielleicht kann tanzaku was für dich tun.

danke! - das ist aber doch eigentlich so wie in marxens beispiel, oder hab ich was übersehen?

@ dirk: sorry, es ist ein bisschen brain... skizze folgt. :-9

wenn beides dynamisch ist, braucht es irgendeine definition, ab wann (max-width oä) die box umbrechen, bzw in die nächste spalte springen soll. ansonsten, also bei 4 boxen fix pro zeile, kannst du es ja mit 25% breite lösen.

hier wär mal eine grobe skizze:



Die Breite der dynamischen Fläche ist fix, ebenso die Abstände der Thumbs zueinander und zum Rand der Fläche oben und links.

Die Höhe der Thumbs soll innerhalb einer Ansicht gleich bleiben; die Breite der Thumbs sind, wie man sieht, unterschiedlich. Verkleinert sich die dynamische Fläche, sollen die Thumbs neu umbrechen und, wenn die Fläche zu klein wird, kleiner skaliert werden.





edit: ach so: die Anzahl der Thumbs ist natürlich auch variabel.

gibt es eine minimum/maximum höhe?

jo, die könnte man festlegen.

also ich will jetzt eh keine konkrete code-lösung, nicht, dass sich hier jemand dafür in arbeit stürzt. ich wollte nur wissen, ob das irgendwie geht und wenn ja, ob es wohlmöglich so richtig kompliziert ist - denn so kommts mir vor.

also es ist denke ich mal funktionierend in 2 stunden zu bauen. damits dann richtig rund läuft vielleicht nochmal 2.

brauchst halt jemanden, der jquery (o. ähnliches) kann.

Theoretisch brauchst du nur PHP und CSS

Abfragen wieviel Thumbs ausgegeben werden.
Thumbhöhe+Padding / Gesamthöhe des Containers
Dementsprechende CSS Klassen ausgeben.

Floaten tun sie automatisch nebeneinander..

Vielen Dank für eure Einschätzung.

phloo schrieb am 12.01.11, 18:20 Uhr:

Theoretisch brauchst du nur PHP und CSS

Abfragen wieviel Thumbs ausgegeben werden.
Thumbhöhe+Padding / Gesamthöhe des Containers
Dementsprechende CSS Klassen ausgeben.

Floaten tun sie automatisch nebeneinander..

du hast die thumbhöhe nicht. so einfach ist es nicht. um kathis frage zu beantworten: ja es ist recht kompliziert.

Die muss man aber festlegen oder irgendwo herholen, sonst macht die Aufgabe ja kein Sinn.
Entweder man legt die Höhe fest oder wieviele Reihen es geben darf.. dann eben berechnen.

http://www.sohtanaka.com/web-design/smar...ss-jquery/
Demo

uh, ja, krass, danke jan.

Eine reine Css-Lösung, welche den Viewport voll ausnutzt, vertical keine Bilder abschneidet, unterschiedliche Thumbgrößen erlaubt und die Reihen/Spaltenanzahl dynamisch anpasst:

http://martinrack.de/gallery.html

Also mal Browserfenster beliebig resizen und scrollen.

kathi schrieb am 12.01.11, 19:19 Uhr:

uh, ja, krass, danke jan.

achso, ich dachte die höhe sei auf den viewport begrenzt und man duerfte nicht scrollen.

ja, das ist in meinem fall auch so.
trotzdem interessant.

Ich hab eine Idee. Die Profis mögen sagen, ob das Sinn ergibt.

Wenn man für die Größenänderung nur einen leeren Layout-DIV verwendet und drüber einen mit den gefloateten Thumbs positioniert, dann bräuchte man doch nur eine Schleife schreiben, die so lange die Höhe der einzelnen Thumbs reduziert bis der umgebende Thumb-DIV den gewünschten Höhenbereich erreicht hat. Pixelgenau wird das nicht, dafür recht simpel.

JanB schrieb am 12.01.11, 19:11 Uhr:

http://www.sohtanaka.com/web-design/smar...ss-jquery/
Demo

geilo...

Geht das auch in älteren Browsern?

Ich habe das Problem auch schon gelöst, jedoch mit ActionScript für Flash.

Der Algorithmus ist relativ kompliziert. Er berechnet die maximal mögliche Anzahl der Spalten - gegeben eine Liste von beliebig großen Objekten.

Den SIZE-MAX-width-Slider bewegen, der begrenzt die Viewport-Breite: http://sibirjak.com/osflash/projects/as3...6-dyntable