Simple Photoshop-style layers using JavaScript


Today I wrote a small JavaScript class to display images layered on top of each other, in a similar manner as layers are shown in editors like Photoshop.

I wanted to show my Dwarf Fortress to someone, but I didn’t just want to stack screenshots below each other like you’d usually do. Since dwarf forts can span multiple depth levels, it would be pretty neat to be able to show the levels on top of each other, with transparency too.

See it in action here.

It’s relatively simple. You point it at a div which contains the images you want to make layers of, and a div where it should display the controls, and it does the rest.

If you want to use it, feel free. Just copy the script file and write some similar CSS and HTML as shown in the example page. You probably won’t need all of the CSS styles, just take note of the #controls .selected one, as “selected” is the class used for highlighting the selected layer. Note that you will need to link to the Yahoo UI libraries, as it is used in some places in the code.

You could probably use that for a JS based image editor, to name other uses than fortress showcases. :D