开发者

How can I overlay images on a simile timeline?

开发者 https://www.devze.com 2023-03-28 06:49 出处:网络
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 se

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 开发者_JAVA百科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?


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号