如何在timeline.js的标志中添加图像

Question

我正在使用timeline.js。我是timeline.js的新手。我想添加在标志中的图像，这是在时间线上显示不同的图像图标为不同的点。我在文档或任何东西中都没有得到任何解决方案。图像的地方，我想添加图像显示在所附图像。flag_image请在下面的链接中找到演示。Codepen

​

var dataObject = {
  "timeline": {
    "headline": "Welcome to TimelineJS",
    "startDate": "2011,12,10",
    "type": "default",
    "text": "<p>TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.</p><p>You're looking at an example of one right now.</p><p>Click on the arrow to the right to learn more.</p>",
    "asset": {
      "media": "https://2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg",
      "credit": "",
      "caption": ""
    },
    "date": [{
      "startDate": "2011,12,10",
      "headline": "Exception initiated by XYZ",

      "asset": {
        "media": "/static/welcome/step3.png",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }, {
      "startDate": "2012,12,10",
      "headline": "Exception initiated by XYZ",

      "asset": {
        "media": "/static/welcome/step3.png",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }, {
      "startDate": "2011,12,11",
      "headline": "Tech review approved by ABC",
      "text": "Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
      "asset": {
        "media": "",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }, {
      "startDate": "2011,12,12",
      "headline": "Approved by all",
      "text": "Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
      "asset": {
        "media": "",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }, {
      "startDate": "2011,12,13",
      "headline": "Closure requested",

      "text": "Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.",
      "asset": {
        "media": "https://image.ibb.co/eMGfya/episodic_failed.png",
        "credit": "",
        "caption": "Screenshot from TimelineJS Embed Generator tool (see below)"
      }
    }],
    "era": [{
        "startDate": "2011,12,10",
        "endDate": "2011,12,11",
        "headline": "Revision1",
        "tag": "This is Optional"
      }, {
        "startDate": "2011,12,13",
        "endDate": "2011,12,14",
        "headline": "Revision2",
        "tag": "This is Optional"
      }

    ]
  }
}

createStoryJS({
  type: 'timeline',
  width: '800',
  height: '600',
  source: dataObject,
  embed_id: 'my-timeline',
  hash_bookmark: true
});

.classRed
{
  background-color:red;
}
/*  .vco-slider .slider-container-mask {
    display: none;
}  */

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
<link href="https://cdn.knightlab.com/libs/timeline/latest/css/timeline.css" rel="stylesheet"/>
<div id="my-timeline"></div>

​

Answer 1

您需要将图像添加到表示标志的div元素中。

一种简单的方法是在打开的时间轴上使用浏览器开发工具，使用元素单击工具选择一个标志，确定标志使用的类(以及使唯一路径成为标志的CSS类名的一组类)，并使用jquery/javascript在所标识的div元素(即标志)内定位图像元素。

对于基于事件类型(标志的)的每个标志使用图像，您可能需要在div中使用来自事件的文本来标识它(就像在应用选择器之后在jquery的.each方法中一样)。

我之所以建议这样做，是因为我根据定义的事件类型更改了标志的颜色，并在标题字段中使用了事件类型，解析了事件名称的文本(该类型被添加为第一个单词，因此我从位置0开始解析字符串)，然后更改了背景色CSS属性(带有!important)。

顺便说一句，我采用这种方法是为了不改变源代码(对DOM进行后处理)。

希望这对你有所帮助