Isotope Imagegrid soll den ganzen viewport ausfüllen!!

[SmokeTM]

Hallo Leute,

ich hab jetzt gerade ein Thema geschrieben keine Ahnung wo das jetzt hin ist aber ich versuchs jetzt nochmal. Ich bin ganz neu hier hab zu meinem Thema auch schon die Suche benutzt aber nichts gefunden.
Ich hoffe ihr könnt mir helfen also wie im Titel oben schon geschrieben versuche ich ein Isotope imagegrid umzusetzen so wie hier: Haira | Responsive Multipurpose WP Theme mir gefällt die Seite ziemlich gut Aber ich bekomms einfach nicht hin ich bin den ganzen Tag schon am Docs lesen aber ich schaffe es einfach nicht Ich hoffe es kann mir wer helfen. Quelle: Isotope · fitRows .

Ich bedanke mich schon im voraus

Lg

Smoke

 

[mikdoe]

ich hab jetzt gerade ein Thema geschrieben keine Ahnung wo das jetzt hin ist

Das musste erst freigeschaltet werden.
Allerdings bin ich mir im Moment noch nicht ganz sicher, warum das so ist.
Ich kümmere mich mal darum.

 

[rico2009]

Was hast du denn bisher versucht bzw. wo hängst du fest?

 

[SmokeTM]

Soll ich meine Seite hier einmal posten damit ihr drüber schauen könnt ? Die Seite wie es Ausschauen soll hab ich ja schon gepostet.

<div id="container">
  <div class="item isotope isotope-item transition metal"><img src="http://www.rsstudio.at/wp-content/uploads/isotope1.jpg" alt=""></div>
  <div class="item isotope isotope-item metal transition"><img src="http://www.rsstudio.at/wp-content/uploads/isotope2.jpg" alt=""></div>
  <div class="item isotope isotope-item transition"><img src="http://www.rsstudio.at/wp-content/uploads/isotope1.jpg" alt=""></div>
  <div class="item isotope isotope-item transition"><img src="http://www.rsstudio.at/wp-content/uploads/isotope2.jpg" alt=""></div>
  <div class="item isotope isotope-item transition"><img src="http://www.rsstudio.at/wp-content/uploads/isotope1.jpg" alt=""></div>
</div>

// initialize masonry after all images have loaded
var $container = $('#container').imagesLoaded( function() {
  $container.isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows',
    filter: '.metal',
    filter: '.transition',
  });
});

lg

 

[kkapsner]

Zeig' doch mal einen Testlink, wo wir uns das live ansehen können.

PS: Steht etwas in der Fehlerkonsole?

 

[SmokeTM]

http://smoketm.bplaced.net/

Fehlerkonsole steht nix ich weiß nicht ich glaub ich geb im jquery irgendwelche falschen options ein oder sowas ...
Aja genau das Filtering funktioniert auch nicht ich glaube ich übersehe irgendetwas wesentliches .. ;(

 

[SmokeTM]

Echt keiner eine Idee was ich machen muss ?

 

[mikdoe]

Wo findet man denn die zutreffende Doku zu dem isotope() ?

 

[SmokeTM]

Hab ich ganz oben schon mal gepostet Hier der Link: http://isotope.metafizzy.co/ bin froh das mir wer hilft !!!! Danke !^^
Testlink hab ich dir oben auch schon gepostet

 

[mikdoe]

Gibt es auf http://isotope.metafizzy.co/#isotope-in-use oder irgendwo anders eine Seite, die genau so ist wie du es haben möchtest wo wir abgucken können?
Denn wenn ich ehrlich bin hab ich jetzt nicht die Zeit, das ganze Teil zu lernen. Denn ich brauch das selbst nicht und das scheint mir ziemlich umfangreich zu sein. Dennoch versuche ich gern, dir zu helfen, wenn es nicht allzu zeitaufwendig ist.

 

[SmokeTM]

Ja hab den in ersten post schon gepostet link: http://demo.hi5place.com/haira/ runterscrollen bis zum Portfolio ich hab auch schon versucht dort abzugucken aber ohne erfolg -.- Danke trozdem!

 

[mikdoe]

Meinst du die 3 x 5 Bilder?

 

[SmokeTM]

Ja genau das

 

[mikdoe]

Sorry, wenn ich nochmal doof fragen muss. Auf der Referenzseite waren 15 div's definiert und es wurden 15 angezeigt. Bei dir sind 5 definiert und es werden 5 angezeigt.
Was genau ist jetzt das Problem?
Achso, die sollen bildschirmfüllend sein? Also vertikal strecken?

 

[SmokeTM]

Das Problem ist bei mir passt das eigentlich so wie es ist nur es gibt keine breakpoints sie werden einfach immer kleiner und kleiner bei der referenzseite sind sozusagen breakpoints und werden dann wieder größe ? Ich hoffe man versteht was ich meine ?

lg

 

[mikdoe]

Also ich verstehe es (noch) nicht.

 

[SmokeTM]

Verkleiner bei meinem Link mal den Browser und schau was passiert und dann mach das mal bei meiner referenzseite und schau was mit den bildern passiert
Ich weiss nicht wie ich dir das besser erklären soll wenn du es siehst fällts dir sicher gleich auf.

 

[mikdoe]

Verstehe, es teilt einer Zeile soviele Items zu, wie die Viewport Breite hergibt.
Hast du dir mal bei der Beispielseite das CSS genau angeschaut? Da muss es doch ein Flag für geben. Nach dem Motto "nicht verkleinern sondern umbrechen".
Oder hast du es mal mit festen Werten für height und width versucht?

 

[SmokeTM]

Also ich habe so gut wie alles versucht. Ich hab die width über javascript angegeben ich hab percentage-werte versucht ich hab im css stylesheet feste werte versucht aber es hat nie so ausgesehen wie auf der referenzseite ich weiss auch nicht wieso ich das nicht hinbekomme hatte noch nie solche probleme wie mit dem isotope -.- also ich weiss nicht mehr was ich noch versuchen könnte ?

 

[mikdoe]

Auf der Beispielseite stehen width und height als Attribute im <img> Tag. Das auch versucht?