How to display multiple pictures stacked on top of each other in JavaScript

Question

On a web page, I want to show a list of albums and next to each album name i want to show a stacked list of pictures on top of each other. What is the best way to dynamically take a list of pictures and have them stacked on top of each other

Here is an example:

Answer 1

Why not just build one? it wouldn't be hard. Here is a small rotate prototype i've worked up (took maybe 5 minutes to write)

Element.prototype.rotate = function(d) {     var s = "rotate(" + d + "deg)";     if (this.style) { // regular DOM Object         this.style.MozTransform = s;         this.style.WebkitTransform = s;         this.style.OTransform = s;         this.style.transform = s;     }     this.setAttribute("rotation", d); }; 

then you can use to it rotate a list of images.. see (not very good :P) example here

Better Example Best Example

---

Looks like the OP wants more
How is this for close-to-the-example? i think a few angles may be off...

Or click here

Answer 2

To rotate the images you either need the new CSS3 features or a canvas element, new to HTML5.

Writing some JS functions to aid you in the rotating process it's a matter of minutes.

I would say the best library is the one you write.

Anyway, if I had to choose one I would choose Raphael.

Answer 3

Libraries will just help you out with manipulating the dom and responding to events. The answer lies in the way you see the problem, how you will represent the data, how you will handle the dynamic data that comes to you.

Images are html elements, so they can be manipulated with CSS3 like Jose Faeti said. Now for the dynamic part I would suggest you take a look at backbone.js (http://documentcloud.github.com/backbone/).

In a few words, backbone.js will help you defined albums and pictures as standalone entities, hook views to those data models - views that will automatically adapt when new data comes via ajax from the server - and to top it all of, it uses jQuery for dom selection, so:

1) You get a nice OOP-ish approach to defining your images data
2) You get a nice Model-View View-Model relationship that updates itself easily
3) You get jQuery as a dom selection and manipulation tool