Een afbeelding in Masonry plaatsen

[pufstyler]

Hoi!

Ik gebruik Wordpress met thema Pinbin om een website van 1 pagina te maken.
Het is nu een grid van posts, en die werken redelijk. Nu is mij gevraagd om in die grid 1 groot plaatje linksboven in de div te plaatsen, waarop informatie etc staat. De posts moeten daar omheen bewegen naar de afmetingen vh scherm.

Website: http://www.bmhdelft.nl

De afbeelding staat nu in dezelfde div als de posts, misschien is dat al fout?

Zoals je ziet worden de posts niet goed geplaatst nu. Ik heb al van alles doorgelezen over masonry etc en op andere forums krijg ik geen goede antwoorden. Enig idee hoe ik dit oplos? Ik heb weinig verstand van js.

Bedankt voor je reactie!

 

[Kvothe]

Kan je een schets maken van wat je wilt?

 

[pufstyler]

Het is precies de website http://www.bmhdelft.nl, alleen dan dat de posts alles netjes rechts en onder opvullen.
http://www.bmhdelft.nl is de website waar het om gaat.


Functions.js:

/* General Pinbin Functions
================================================== */

// masonry customization
jQuery(document).ready(function($) {
var post_area = $('#post-area');
post_area.imagesLoaded(function(){
post_area.masonry({
// options…
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false
}
});
});
});

 

[Kvothe]

Je wilt het netjes in een rooster in plaats van een enkele kolom? Hiervoor moet je css gebruiken. Probeer eens voor alle elementen float:left; te definieren.
Eventueel kan je ook een tabel <table> gebruiken, maar dan past het zich niet aan aan venster breedte.

Als dit niet het geval is kan je dan aub even een tekening maken om het te verhelderen?

 

[pufstyler]

Inderdaad niet in kolommen, maar gewoon alles gevuld, netjes naast elkaar. Met css heb ik geprobeerd het met float:left te doen, dan is het alleen maar een wirwar. Als ik dan de position:left en :top weghaal komen ze netjes naast elkaar te staan maar dan over de afbeelding heen. Het moet inderdaad wel aan de schermbreedte aanpassen.

Bij de css forums zeggen ze dat het waarschijnlijk met JS te maken heeft..

Voor uiteindelijke doel, zie afbeelding.

 

[Kvothe]

Tja je zou kunnen proberen om met window.innerWidth de breedte van het scherm te lezen en aan de hand daarvan (met javascript) de pagina onderverdelen in x kolommen (x hangt dan af van de breedte) die je dan evenredig vult met plaatjes. Zolang alles even breed is is dat niet zo moeilijk denk ik.

Ik zal even proberen of ik daar een voorbeeld van kan maken.

Maar ik denk dat als je doorzoekt je wel een elegantere oplossing kan vinden.

 

[Kvothe]

Kijk eens op http://phpfiddle.org/main/code/gqy-yp0

Je kan de hoeveelheid kolommen varieren door n te kiezen, en de hoeveelheid tegels door elements groter te maken.

Je vervangt uiteindelijk het plaatje door de code van je tegel.
Je moet nog wel even n aan window.innerWidth vastbinden zodat de hoeveelheid kolommen automatisch gekozen wordt.

Uiteraard moet je ook een event listener inbouwen zodat als de gebruiker zijn browser window grootte verandert de kolommen meeveranderen.

NB: Het kan zijn dat dit niet (goed) werkt door een van je stylesheets.