Tag Archives: jQuery

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

jQuery en WordPress deel 1

Opgetekend uit eigen gedachten: “Stafmans, jongen, hoe kom jij in ’s hemelsnaam bij zoiets curieus als ‘jQuery’ terecht?”. Eerlijk antwoord. Ik zou willen dat het niet zo was.

Zo wilde ik ooit al niets weten van HTML, niets van CSS en zeker niets van PHP. Desondanks ben ik in een situatie verzeild geraakt waarin ik me veelvuldig bedien van HTML en CSS. En maak ik inmiddels WordPress templates, functies en widgets in PHP, zij het op absoluut het allerallerlaagste beginnersniveau. Maar het wegblijven bij jQuery en javascript was dan een soort laatste principe dat overeind bleef. Tenminste… .

Dan moet ik natuurlijk niet zo gecharmeerd raken van animaties, ‘sticky’ menu’s, ‘image hover’ effecten, het prachtige ‘masonry’ script en als klap op de vuurpijl het parallax effect. En allemaal zijn ze gebaseerd op javascript en jQuery.

Dit artikel is nog lang niet af. Het is slechts een inleiding voor één of meerdere artikelen waarin ik vooral voor mezelf het gebruik van jQuery binnen WordPress wil uitleggen.

Een aantal vragen passeren daarbij de revue:

  • Op welke manieren kan je jQuery en javascript opnemen in WordPress?
  • Wat zijn voor- en nadelen van de verschillende manieren?
  • jQuery in de header of in de footer?
  • Wat zijn manieren om scripts te laden en weer te ‘ont’-laden?
  • Wat zijn mogelijkheden om scripts te bundelen en te comprimeren?

Een aantal zaken heb ik al uitgezocht en ook al wel aan het werk gekregen. Als ik op de belangrijkste vragen een goed antwoord weet te formuleren, dan kan ik namelijk ook demonstratiepagina’s aan Stafmans Blog toevoegen, zonder dat ik alle scripts voor de volledige site moet laden en daarmee te site traag, complex en foutgevoelig maak.

Een klein voorproefje voor het ‘masonry’ effect

Op de startpagina laat ik nu 3 artikelen zien als excerpt en naast elkaar. Dat is totaal anders dan het oorspronkelijke ontwerp van dit thema. Op de blogpagina lees je de artikelen op een lange pagina onder elkaar. Ik denk erover om een blogpagina te maken waarin excerpts van artikelen als een metselwerkstructuur (‘masonry’) naast en onder elkaar worden geplaatst. Volledig ‘responsive’, zodat de verdeling zich automatisch aanpast bij het groter of kleiner maken van het browservenster. Ik ben er nog niet helemaal, maar hier heb je al een aardige ‘proof of concept’, maar met vooral op de iPad nog geen goede weergave van het effect. Gebaseerd op het bekende jQuery Masonry script van Desandro.

Oh ja, zou ik bijna nog de achtergrond afbeelding met de boom van Stafmans Blog vergeten. Die past zich ook volledig aan het browserscherm aan en is gebaseerd op het jQuery Backstretch script. Zonder dit script werkte het niet goed met iPhones en iPads.