Hoe heet dit? En kan dit met jQuery
http://www.tripwiremagazine.com/2012/08/jquery-image-slider.html
Als ik het bekijk, zie ik een voor elke blok
- een rusttoestand. De blocks zijn gestapeld zodat ze goed samen passen in die toestand.
- een actieve toestand. Daarin neemt het meer plaats in.
- een samengedrukte toestand.
Bij de actieve toestand neemt de blok extra plaats in. Dat pakt het af van zijn rechtstreekse buren.
Als een blok breder wordt, neemt het even veel breedte af van de buur links als van de buur rechts.
Je zit met een soort van cellen. 1 cel links, 1 cel rechts. Wat de hoogte betreft, wordt enkel de cel in kwestie aangetast.
Dit valt ook uit te breiden naar meerdere cellen naast mekaar.
Lijkt me doenbaar.
Gewijzigd op 31/10/2012 11:54:04 door Kris Peeters
Vervolgens zou ik mijn HTML zo opbouwen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<figure class="span3">
<img src="slider/ocean.jpg">
<figcaption>
<h4>DSM acquires Ocean Nutrition Canada</h4>
<p>...</p>
</figcaption>
</figure>
<img src="slider/ocean.jpg">
<figcaption>
<h4>DSM acquires Ocean Nutrition Canada</h4>
<p>...</p>
</figcaption>
</figure>
Dan kun je bij een hover over de figure de span met 1 verhogen waardoor hij wat groter wordt, je maakt zo'n grid systeem ook verticaal en die verhoog je ook met 1, en de rest verlaag je met 1. Ook toon je de figcaption nu.
Vervolgens kun je nog plugins als Masonry gebruiken om alles mooi te laten passen.
Omdat <picture> dat nog niet is, namelijk. En dat volg ik wel, als opvolger van de <img> ivm het responsive-design-spul.
Maar het ziet er wel sematisch goed uit.