0

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.

Bhavik Ambani
  • 6,557
  • 14
  • 55
  • 86
amit
  • 10,133
  • 22
  • 72
  • 121

1 Answers1

1

Some things for you to look at:

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.

Community
  • 1
  • 1
beatgammit
  • 19,817
  • 19
  • 86
  • 129
  • what i am most concerned with is how I'd stack those images and how those images will take up space where they take up space – amit Nov 24 '12 at 20:13
  • Updated my answer. I'd recommend just randomly distributing our images. That will give you a pretty good effect for the least amount of effort. – beatgammit Nov 24 '12 at 20:22