Tag Archives: masonry

jQuery en Masonry met ‘toggle’

OK. In het vorige bericht heb ik aangegeven ideeën te ontwikkelen voor veranderingen aan Stafmans Blog. Toen heb ik geprobeerd of ik het masonry effect werkend kreeg in een enkel bericht of losse pagina. En dat lukte.

Terwijl ik daarmee bezig was zag ik iets nieuws: Een mogelijkheid om het effect interactief te maken. Vanavond daar eens mee zitten stoeien en het juist voor bedtijd aan de praat gekregen. Hieronder zie je een demo. In een losse HTML pagina werkt het zo, maar bij het integreren in WordPress loop je toch altijd tegen eigenaardigheden aan.

Waarom nou dit effect? Nou, vooral omdat het ‘interactief’ is. Dus, een blogbezoeker kan eigenlijk zelf de layout van de pagina bepalen. Nu moet ik nog gaan uitzoeken hoe ik de vakjes gevuld krijg met bijvoorbeeld teksten en foto’s en je kunt je voorstellen dat dat best een leuk effect kan opleveren.

Op naar de volgende stap…

Klik voor het ‘toggle’ effect



jQuery en Masonry

Vandaag weer eens wat verder gepuzzeld met jQuery en het Masonryscript van David DeSandro. Ik wil binnenkort de startpagina van Stafmans Blog veranderen en was benieuwd of ik daarbij het masonry effect zou kunnen gebruiken.

Waar ik nu vooral mee bezig ben geweest is om, tegen alle ontwerprichtlijnen in waarschijnlijk, een werkende opzet te krijgen in één enkel WordPress artikel. Dus, zonder dat ik scripts moet laden in headers of footers. Als dat werkt kan ik het namelijk zonder ingewikkelde trucken overal toepassen waar ik wil, zonder dat er altijd vooraf scripts geladen moeten zijn. En, heb ik nog niet geprobeerd, volgens mij moet ik het ook in een widget kunnen laden, aangezien ik nu alleen HTML gebruik en dat ook in een widget kan. Dat probeer ik echter later wel een keer, voor vandaag is het even voldoende zo.

Ik laat eerst zien hoe het eruit ziet en onderaan dit bericht vindt je de code die ik ervoor gebruik. Op de pagina van David DeSandro zelf vindt je allerlei instellingen en opties.

Het resultaat

Je ziet het effect in werking als je het formaat van je browservenster verandert.

De Code