Thumbnails that change position/size relative to background

[slaggypops]

Hello,

I have a simple site on Cargo Collective. It is a background image that has clear thumbnails floating on top of it. Each thumbnail opens a project that is related to the area of the background image that it is on top of.

What I cant work out is how to make the thumbnails keep their position and size relative to the background image when opened in different sized browser windows or devices.

I hope that makes sense. I am absolutely clueless about CSS. Please help!

https://gist.github.com/anonymous/f4816b36fa93e128e26a

[Atelierbram]

Will need to see the HTML-markup for this as well.

[slaggypops]

Ok thanks, is this what you need?

https://gist.github.com/anonymous/489242dcb3c532a5606b

[Atelierbram]

Almost there, still need the absolute-url-paths to these files:

• _jsapps/rail/rail.css
• _jsapps/_libs/cargo.rail.package.js
• _jsapps/rail/rail.app.js
• _jsapps/rail/rail.jquery.js

or it’s not going to work …

[slaggypops]

Excuse my ignorance but I’m not sure where to find the absolute-url-paths to those files.

How do I do it?

Thanks

[Atelierbram]

Ok, so there on cargocollective.com. Can you maybe share which template you using, presumably one of these?

[slaggypops]

Ok cool, I’m using this one http://cargocollective.com/montessori as it’s the only one that allows you to freely move the thumbnails outside of a grid.

[Atelierbram]

Now I can see what you are trying to do here.

What I cant work out is how to make the thumbnails keep their position and size relative to the background image when opened in different sized browser windows or devices.

This is allready tricky in itself, it can be kind-of done, but with this template that will be a problem. When you try to resize the browser-window in this demo, (which has your background-image and used template combined, you will see the background-image resizing, when the thumbnails don’t.

What you could do is use the background-image as a model, have it there as long as you are editing, and get rid of it when you are done. Just an idea: one can also slice that big image up in a photo-editing tool, and use those slices as thumbnails.

[slaggypops]

Thanks very much for your help. The example you gave with the footballers seems perfect.

I’m not at all attached to doing it in that template or cargo for that matter so if you have a suggestion for an alternative that would be great.

Also slicing up the image seems like it would be straight forward, could you tell me how I might make that work.

I had originally started building the site in adobe muse, but i found it too complex when i started using the widgets.

Thanks again.

[Atelierbram]

@slaggypops Difficult to make this work, but maybe this can be a start
Works with text on hover, … am not crazy about it myself, but maybe this can be “good enough” for something …

[Atelierbram]

@slaggypops Example above will only get you so far. To take it further, you could try Isotope in Masonry mode.
Basically you slice your big image up in those smaller units with regular grid proportions like: 300px x 200px , 400px x 300px and so on. Images will rearrange themselves depending on browser-viewport-window, so to an extend one has to let go of layout, so that is a consideration too, but this may be a good usecase for that, depending on what you want …( It will also mean more http requests, because of more images … )

[Author]

Posts