1

A great resource for an apple-like time machine animation is "space gallery": http://www.eyecon.ro/spacegallery

I would like to place text on top of every image to use the gallery as a banner. I think the best way would be using DIVs and place the IMG and the referring text in it.

Sadly, it's not done by surrounding the "img" by "div"-tags in the .html and changing "img" to "div" in the .js... :(

Do you have an idea to use a DIV or even a better solution?

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Jan J.
  • 11
  • 1

1 Answers1

0

Well it's a nice plugin, hopefully the author will add it some more methods in the future (or put it to place like github), so this could be done more programatically. At the moment maybe you need to tweak spacegallery.js itself.

My minimal solution is using sibling div's for captions, positioned at top left corner of images and borrowing it's CSS styles. Here is copy of plugin, changes are in spacegallery.js. Use some diff tool to see changes.

I did it to use image alt attributes (added them in index.html) as captions. However it can be done many better ways, this is just basic. It also doesn't work after first cycle, and I didn't add any styles :)

cincplug
  • 1,024
  • 5
  • 20
  • 38
  • good start, cincplug! nice idea to create an instant DIV via .js. – Jan J. Mar 21 '12 at 11:59
  • the alternative solution applying a DIV directly in the .html-file (for styling and markup reasons) is a hard job, yeah... but do you or does anyone have an idea how we could manage that via .js? – Jan J. Mar 21 '12 at 12:07
  • If you mean wrapping images with divs, you can use jQuery wrap() method. But that means more serious tweaking of spacegallery.js, because divs' positioning and animation would behave differently. – cincplug Mar 22 '12 at 12:35