entire page image gallery load/resize technique

Question

i'm curious about an effect i've seen on a lot of different wordpress powered sites. i think it might be a plugin, but i'm not entirely sure.

it's basically a page of images of different sizes, and they fit together based on how wide your window is. they also rearrange very stylishly when you resize your window.

the images also load as you scroll down, in sort of an infitie scroll way.

here is a perfect example of what i'm talking about... http://www.someoddpilot.com/work/projects/

how are they doing that? i would like to achieve a similiar effect, but i'm not sure where to begin. any insight would be super helpful, i'm somewhat new at this. thanks!

score 1 · Accepted Answer · answered Oct 11 '12 at 22:56

1

There are several techniques... I didn't look to see what they are using specifically, but since you mention jQuery, there is a plugin you should check out: Isotope

enter image description here

answered Oct 11 '12 at 22:56

Brad

159,648
54
349
530

oh wow, this is cool thanks. is there a separate method to only load images that are in the window? and load the rest as you scroll to them? – patricko Oct 11 '12 at 22:57
@patricko, You would have to code it separately, but yes, that would be possible. – Brad Oct 11 '12 at 22:58
oh no, isotope even has an infinite scroll option. this is perfect thank you. i had no idea this existed. – patricko Oct 11 '12 at 23:01
You mention several techniques. If you elaborate, you will earn my upvote. – Just Thomas Misund Oct 11 '12 at 23:04
You could try Masonry plugin, Isotope plugin (small license fee), Wookmarks plugin, jQuery Tiles plugin, Metro JS plugin... – Systembolaget Oct 15 '12 at 09:43

entire page image gallery load/resize technique

1 Answers1