0

I'm using the simile timeline widget to create a timeline and I need to add images to the timeline. The images will probably be positioned at the bottom of a "band" but chances are I'll have to set the "top" and "left" styles per image (we want to put images in some of the empty areas to make it look nicer).

I know I can change the "icon" of an event and that will set an image but it's always at the top of the band and the image gets in the way of other events and since these images are not technically events I don't think they should be a part of the events database (right now it's all in a Google Doc which makes changing the timeline really easy).

I've tried to add new divs to the timeline div by manapulating the DOM (jQuery, appendTo) but that never works . . . not sure if it's a z-index thing or what.

I've explored using a "decorator" and maybe making my own custom decorator but, well, it seems to me someone MUST have wanted this before and I'm missing something easy. Ideas?

tooshel
  • 1,556
  • 3
  • 19
  • 26

1 Answers1

0

I got it! Basically, I created my own "decorator". First, it came in handy to be able to add decorators after the initial render. I found this on the simile google group.

Timeline._Band.prototype.addDecorator = function(decorator) {
    this._decorators.push(decorator);
    decorator.initialize(this,this._timeline);
    decorator.paint();
}

Then, looking at the Timeline source for decorators, I copied the code for Timeline.PointHighlightDecorator and made my own . . called Timeline.PointPicture for now.

tooshel
  • 1,556
  • 3
  • 19
  • 26
  • Could you share your complete code demo? I've been trying to do this and with no success – Hamman Samuel Nov 30 '13 at 05:04
  • 1
    Well, the final result is here so you can check it out for yourself. It's really not much more than the example I gave in my answer. http://sustainability.asu.edu/timeline/ – tooshel Dec 03 '13 at 19:58