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

Posted 2023-05-07

【中文标题】如何在timeline.js的标志中添加图像

【英文标题】：How to add images in flags in timeline.js

【发布时间】：2017-09-18 09:14:34

【问题描述】：

我正在使用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>

【问题讨论】：

不确定这是否有帮助，但在 d3js 中您有类似的图表，例如 timeline-image-chart 您可以使用 bower 安装

【参考方案1】：

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

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

就基于事件类型（标志的）为每个标志使用图像而言，您可能需要使用事件中的文本在 div 中识别它（例如在 jquery 的 .each 方法中你应用选择器）。

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

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

希望对大家有所帮助