alternating image layout, overlapping space

[janga]

Hi all,
I have been trying to create an image gallery, without text (so no floating) with alternating left/right images, but where the image space overlaps (damn, this is hard to explain in words!). The image gallery should be scalable, so including the images. I have gotten this far, but I can never get the space between the images to respond correctly, and it keeps looking like a mess. Possibly I’m just looking too far for a solution. Maybe someone has a clue.
Thanks !
Here’s what I have (i have given the images a size, for clarity):

http://codepen.io/anon/pen/WxQZrV

[Paulie_D]

An image of the intended design would be of more help….especially since your local images won’t show up in Codepen.

[janga]

ok, here it is:

[Paulie_D]

Ok….is the order important?

Is the vertical alignment of the right hand side images important?

Such as, do the right hand images need to be aligned exactly with the gap between the left hand images?

Do you have control over the height of the images?

I confess, this is likely to be something javascript should be doing..especially as I doubt CSS would be adequate.

[janga]

hmmmm, sort of, they are random images that I want to puzzle together in this sort of gallery concept, which I managed to do, however, when I scale the browser window, the space between the images never stays put, nor does their position to each other. So what I want is that the whole layout scales together, equally.

[Paulie_D]

Then you’ll definely need javascript.

Probably a version of Masonry.js

http://masonry.desandro.com/

[janga]

Javascript is out of my league, but after sleeping over it yet another night, I found a solution; prehistoric measures to the rescue !
What I did is I created two image with the background color, and used these to fill in the gaps on both side, and then just a margin on the images. As long as the images combined have the same pixel count on both side, it fits like a dream, and scales down perfectly too.

[Author]

Posts