Een afbeelding in Masonry plaatsen

Status
Niet open voor verdere reacties.

pufstyler

Nieuwe gebruiker
Lid geworden
5 feb 2014
Berichten
3
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! :)
 
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
}
});
});
});
 
Laatst bewerkt:
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?
 
Laatst bewerkt:
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.

Screen shot 2014-02-05 at 12.10.48.jpg
 
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.
 
Laatst bewerkt:
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.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan