Hallo basti1012,
ich hab die Dateien hier hochgeladen:
https://drive.google.com/file/…f--678hx/view?usp=sharing
Ein Video, das das Problem zeigt, ist auch dabei.
Beiträge von fei12A
-
-
Hey!
Ich arbeite mit jQuery Splitter und Masonry. Hier mein Code:Code
Alles anzeigen$(window).on('load', function(){ $('.grid').masonry({ isAnimated: true, itemSelector: '.grid-item', percentPosition: true, horizontalOrder: false }); }) var splitter = $('#content').split({ orientation: 'vertical', position: '50%', limit: 400, onDrag: function(event) { Splitter(); $('.grid').masonry({ itemSelector: '.grid-item', percentPosition: true, horizontalOrder: false }); } }); Splitter(); function Splitter(){ if ($('#right').width() < 600) { $('.grid-item').css("width", "100%") } else if ($('#right').width() < 800) { $('.grid-item').css("width", "50%") } else { $('.grid-item').css("width", "33.3333%") } } $( window ).resize(function() { $('#main').css('min-height', '100%'); Splitter(); splitter.position('50%') });
Nach langem hin und her habe ich es mit »splitter.position('50%')« geschafft, dass beim Verändern der Fenstergröße die Splitter-Position bei 50% ist.
Allerdings gibt es einen Sonderfall, bei dem dies nicht funktioniert. Dieser tritt ein, wenn man den Splitter bis zum Limit-Punkt auf 400px nach rechts zieht und dann das Browserfenster so klein wie möglich zieht. Dann dominiert der »limit: 400«-Befehl und die Splitter-Position liegt bei ungefähr 80%.
Wie lässt es sich machen, dass der »splitter.position('50%')«-Befehl dominiert?
Danke! -
Hey,
kein Problem! Ich bin dir trotzdem super dankbar für deine Mühe und deine schnellen Antworten!
Außerdem bist du schon eine »helle Birne«, du hast viel mehr Ahnung als ich. Ich studiere seit drei Jahren und hab oft das Gefühl, gar nichts zu können.
Viele Grüße -
Hi Basti,
die Bilder sollen sich oben anordnen. So wie hier zum Beispiel: http://www.kristianhammerstad.com/
Mein zweites Beispiel funktioniert leider nicht wirklich. Aber die Bilder ordnen sich da zumindest oben an und rutschen entsprechend nach. -
Danke basti1012
Wie lassen ich da Breakpoints einbauen?
Zu den Angaben, die euch gefehlt haben:
Das ist das (fast) fertige Template:
https://codepen.io/nicerboy/pen/QRrZQo
Das einzige Problem ist, wie beschrieben, dass die Bilder vertikal nicht nachrutschen. Ein Breakpoint bei <500px ist hier enthalten.
In dieser Version rutschen zwar die Bilder nach, dafür macht das Grid an sich Lücken:
https://codepen.io/nicerboy/pen/MdGZEG
Eine Mischung aus den Beiden wäre perfekt. -
Hier noch mit dem Versuch, ein Grid zu verwenden:
https://codepen.io/nicerboy/pen/MdGZEG
Das Problem hierbei ist ebenfalls das »kleiner ziehen« mit dem Resizer und dass die Spalte nicht vollständig ausgefüllt wird. -
Hallo MrMurphy,
ich denke, dass das Problem klar ist, wenn man das hier betrachtet:
http://codepen.io/nicerboy/pen/QRrZQo
(Mit den »reellen« Texten und Bildern hat das an sich gar nichts zu tun. Die Bilder sollen keinesfalls zugeschnitten werden und sich untereinander anordnen.)
Im Prinzip soll es genau so sein. Ich sitze gerade vor einem 15-Zoll-Monitor und bei mir entsteht zwischen dfkjaslf.jpg und saada.jpg eine große Lücke. Das soll so nicht sein.
Es wäre natürlich möglich, das Masonry Skript zu verwenden, dann würden die Bilder nachrutschen, allerdings, wenn man mit dem Site-Splitter den rechten Bereich kleiner zieht, wüsste ich keine Möglichkeit, nur ein Bild pro Zeile stehen zu lassen. -
Danke. Leider löst das mein Problem nicht
Es geht (noch immer) um das hier:
https://codepen.io/nicerboy/pen/JqvMvg
Die Bildergalerie sollte grundsätzlich genau so sein. Allerdings sollten verschieden große Bilder – wie beschrieben – nachrutschen.
Mit Masonry wüsste ich nicht, wie es möglich ist, nur ein Bild pro Zeile zu haben, wenn man mit dem Schiebeteil den Bildbereich kleiner zieht. Bei allen Beispielen wird dafür »@media ...« verwendet, was aber in diesem Fall nichts bringt, da ja nicht das Browserfenster verändert wird, sondern nur der Bereich innerhalb des Browserfensters.
Hättest du da noch eine andere Idee? -
Danke. Beschreibungen und eine Filterfunktion wären wichtig.
Hast du eine Idee, wie sich das machen lässt? -
[Blockierte Grafik: https://i.stack.imgur.com/w2Gxe.jpg]
Nach diesem Prinzip wäre es super. Es sollte sich oben ausrichten und darunter anordnen ... -
Hallo,
ich arbeite gerade mit dieser Bildergalerie:
https://www.w3schools.com/howt…o_js_portfolio_filter.asp
Wenn hier ein Bild weniger hoch ist, rutscht das nächste Bild nicht auf den selben Abstand nach. So hätte ich es aber gerne.
Weiß von euch jemand, wie sich das machen lässt?
Beste Grüße -
Danke!
Außer CSS-Grid und "minmax" gibt es keine geeignete Lösung?
-
Wow okay! Danke! Wie hast du das jetzt gemacht?
Und wie ist es möglich, dass sich die eine Spalte dann von der Breite in den Raum einpasst? -
Hallo,
ich arbeite gerade daran:
https://codepen.io/nicerboy/pen/BeBmoN
Leider schaffe ich es nicht, dass wenn man den Bereich rechts kleiner zieht, so auf circa 400px breite, (über die Resize-Linie in der Mitte), nur noch ein Bild pro Zeile erscheint.
Mit Media Queries wäre das sehr einfach, aber wie lässt sich das ansonsten machen?
Über Hilfe wäre ich sehr sehr dankbar!
Grüße -
In deinen Fall gibt es auch mehrer möglichkeiten,doch dazu müßte man es auch wissen wie es weiter gehen soll und so weiter.
Wie willst du das den jetzt haben ?
Mit Javascript oder ohne ? Weil es auch ohne JS gehen würde
Inzwischen habe ich es geschafft.
https://codepen.io/nicerboy/pen/vMBPEe
Trotzdem danke! -
Hallo,
ich habe dieses Script gecodet:
https://codepen.io/nicerboy/pen/vMBPEe
Wenn man die Window-Size kleiner als 1000px zieht, lassen sich die Menüpunkte ausklappen.
Nun ist es so, dass wenn man die Menüpunkte einklappt und die Window-Size wieder größer zieht, die Menüpunkte ausgeblendet bleiben.
Leider schaffe ich es nicht, diese dann wieder einzublenden.
Ich denke, dass das sehr einfach ist. Könnt ihr mir helfen? -
Ist doch in Ordnung, solange man es versteht
-
Okay, ich hätte noch eine Frage:
Hat jemand von euch ein MacBook? Wenn man horizontal mit dem Touchpad scrollt, hängt es ziemlich. Ohne dem Script läuft es flüssig. Woran könnte das liegen?googel hilf bei sowas
http://manos.malihu.gr/jquery-custom-content-scroller/
und wenn ich dich richtig verstanden habe muss du das hinzufügen.
Habe das bei dein Codepen getestet und da wird dann nix mehr anniemiert
basti1012 Weißt du das?
-
Geil, danke!
-
Hallo,
ich habe mir dieses Script zusammenkopiert:https://codepen.io/nicerboy/pen/moQajZ
Grundsätzlich funktioniert dieses für den gewünschten Einsatzzweck sehr gut. Wenn man allerdings das horizontale Scroll-Rädchen verwendet, ist dort eine smoothe Animation verankert. Also die Reihe schiebt immer noch sanft ein bisschen nach. Beim Downscrollen ist dies nicht so. Wie lässt sich diese Animation entfernen? Ich versuche seit vielen Stunden, es anzupassen, schaffe es leider aber nicht.
Danke!
Viele Grüße