Question

我正在使用timeline.js。我是timeline.js的新手。我想在标志中添加图像，该标志显示在时间轴上，具有不同点的不同图像图标。我在文档或其他任何方面都没有得到任何解决方案。我想要添加图像的图像显示在附加的图像中。 flag_image 请在以下链接中找到演示。 Codepen

＆＃13;

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
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

在根据事件类型（标志）使用每个标志的图像方面，您可能需要使用事件中的文本在div中识别它（就像之后的.each方法中的jquery一样）你应用选择器）。

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

顺便说一句，我采用这种方法是为了不改变源代码（后处理DOM）。

希望这有助于一些

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

1 个答案: