Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

[onpoint]

Hallo an die Forengemeinde,

ich hätte eine kleine Frage. Wer kennt ein Skript, welches folgendes ermöglicht?

Link:

Es geht mir dabei um die Elemente (hier die Fotos), die sich beim Verändern des Viewportes automatatisch skalieren und ausrichten. In Meinem Fall habe ich zwei Hintergrundbilder, die ich mit jeweils 50% Breite vollflächig platzieren möchte.

Masonry steht bei solchen Skripten natürlich weit oben, allerdings ist das nicht 100%tig das, was ich suche.

Wäre super, wenn von euch jemand was kennt!

Viele Grüße und nen schönen Abend!

 

[cythux]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Ich denke mal ganz spontan, das dies mittels Mediaqueries erstellt wurde

 

[onpoint]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Hallo cythux,

css mediequeries arbeiten ja mit breakpoints. Das Layout der Beispielseite wurde mit Prozenten aufgebaut und ist flexibel.. deshalb schließe ich an der Stelle den Einsatz von mediaqueries eher aus..

Viele Grüße!

 

[Duddle]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Wenn die beiden Bilder stets die gleichen sind, könntest du nicht ein großes daraus machen und dieses per Vollbild-PlugIn in den Hintergrund packen? Wenn beide gleich breit sind, benutzen sie nebeneinander gestellt (und zentriert) 50% der Breite. Die automatische Anpassung erfolgt dann durch das PlugIn.


Duddle

 

[cythux]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

wurde in diesem Theme genutzt http://isotope.metafizzy.co/ und dieses hier https://github.com/imakewebthings/jquery-waypoints/tree/master ist eventuell interessant

 

[onpoint]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

wurde in diesem Theme genutzt http://isotope.metafizzy.co/ und dieses hier https://github.com/imakewebthings/jquery-waypoints/tree/master ist eventuell interessant

Interessant allemal! Werde ich sicherlich bei einem meiner Projekte verwenden, allerdings macht dieses Skript nichts anderes als Masonry auch...sprich: es ordnet elemente neu an, um sie schön am viewport auszurichten, resized sie aber nicht...mit flexiblen Größenangaben gibts da oft Probleme..

@Duddle:

Die Bilder werden dynamisch erzeugt, es sind also immer andere.

Bis hierhin danke für Eure Posts!

 

[Duddle]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Könntest du etwas näher beschreiben, wie sich die Seite verhalten soll? Dein erster Beitrag sagt, du willst 2 Bilder im Hintergrund als Vollbild.
Zusätzlich sollen sie sich aber anpassen und neu ausrichten. Wann genau soll das passieren? Soll das animiert werden oder willst du schlichtweg ein responsives Umbrechen?

Auf skalieren die Bilder auch und ordnen sich ab bestimmten Größen anders an. Würde das schon reichen?


Duddle

 

[onpoint]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Hallo Duddle,

danke für Deinen Beitrag. Ich möchte, dass die Fotos sich genau wie in der Beispielwebsite oben verhalten. Sprich: Bei Browser-resize skalieren sie sich und ordnen sich animiert wieder ein.

Ich habs auch fast geschafft im eigenen Projekt (danke cythux, Isotope hat mich weitergebracht!)

Nur gibts noch ein kleines Problem:

Die Fotos stellen sich nicht immer nebeneinander. Je nachdem wie man den Browser skaliert brechen sie um und stellen sich wieder untereinander.

Meine erste Befürchtung war eine ungerade Zahl bei der Breite des Elements. Dann kann man natürlich nicht mehr durch 2 teilen und es bleibt immer ein Restpixel von 1. Deshalb hab ich mit einer Abfrage alias "if varelemwidth % 2 == 1, dann zieh 1px vom zweiten Element ab }

Hat so auch funktioniert, die 1px wurden vom zweiten Element abgezogen, wenn der Fall eintrat, allerdings standen die Fotos trotzdem untereinander...es muss also an was anderes liegen.

Hier könnt ihr euch das Projekt anschauen, vielleicht hilft das:


Ich dachte, dass vielleicht die custom scrollbars was damit zu tun haben, allerdings gibts auch keine veränderung, wenn ich diese rausnehme. Komisch ist aber, dass wenn die Scrollbars drin sind, die Fotos beim Aufruf der Seite Abstände zueinander haben, nach dem Resizen aber nicht...

Findet ihr vielleicht den Fehler?

Danke im Voraus!

 

[Duddle]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Das Wordpress-Theme verhält sich an bestimmten Punkten auch so, also nehme ich an das sind schlichtweg Punkte an denen das Script mathematisch es nicht anders hinbekommt, auch mit gerundeten Werten. Das ist jedoch nur Spekulation.
Beim lokalen Test sehe ich auch, dass z.B. "width: 49.8%" für #mainbar li.home-picture seltener umbricht als bei den jetzigen 50%, aber das bringt natürlich unschöne Abstände.


Duddle

 

[onpoint]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Hallo Duddle,

danke für den Hinweis. Selbst mit 49.9% bricht es nur noch selten um, allerdings taucht wie du sagst manchmal ein Abstand von einem Pixel auf, das ist natürlich unschön und nur eine Notlösung.

Was auch seltsam ist: Wenn man die Seite aufruft sind die Scrollbars dafür verantwortlich, dass die bilder abstände von optisch geschätzt mindestens 5 Pixel haben. Nach dem resizen ist alles wieder gut. Woran liegt das? Hast du da vielleicht auch was gefunden?

Grüße und danke!

 

[Duddle]

AW: Skriptsuche: Skalieren und ausrichten von Elementen bei Viewportänderung

Pack die Initialisierung in

$(window).load(function(){
});

dann wartet er bis alle Bilder korrekt geladen wurden.


Duddle