Question

I want to create an image cloud where images are stacked with each other and resize according to the number of times the image has been seen.

The cloud probably takes a predefined space too. Is it possible with javascript or do I need to go for SVG/Canvas??

Something similar to this: hitlantis

Any pointers / references would be nice.

Answer 1

Some things for you to look at:

• javascript Image Resize – You may need to move the element to make it look right, but this can probably be done in CSS
• CSS Transitions
• jQuery mouseenter and mouseleave
• css :hover

Javascript may not even be necessary, provided you use :hover appropriately with the correct transitions/styling.

Edit:

For layering, use z-index. I’m not sure how you want to position your elements, so come up with an algorithm for placing them (random would probably work fine). Once that’s done, just use position: absolute, setting top and right to the positions you generated.

Possible algorithms for placement:

• Random (easy peasy: x = Math.random() * maxWidth - radius + centerX), similar for y
• Fibonacci-based using Vogel’s model– Ensures easy distribution
• Cluster similar images- this is a bit more difficult and depends on your clustering logic

I’m sure there are others. I’d recommend doing a simple one (random), getting everything working, then create a more interesting algorithm later if you want to.