如何在图像底部添加带有“x”按钮的横幅以在 React/HTML 中关闭它？

Question

Here is my mock-up. 我在我正在开发的网站上使用 react，我只想为网站上呈现的每个图像添加一个横幅（可关闭）。我是 css 新手，所以我不确定要使用什么类，或者我是否必须自己制作，或者人们通常如何在 css 上实现这种模型。

背景信息：我这样做是因为我想让视障人士更容易访问该网站。所以描述将基本上存储为图像的替代文本。

用户将上传图片，因此他们需要能够为图片自己添加替代文本，而不是编码人员。所以我想实现某种机制让 UI 接受每个图像的输入，输入是图像描述。问题是我不知道如何编码。我需要一些帮助，从哪里/何时开始。

Answer 1

ReactJS API 可以在这里找到 - https://facebook.github.io/react/（参见 An Application 示例）有一个示例，您可以在其中动态地将文本添加到页面。我会推荐使用相同的概念。您必须逐步分解该过程。

第 1 步：声明一个变量，该变量将在用户输入（键入/粘贴）任何内容时捕获文本字段中的内容。

第 2 步：当用户按下“添加”时，使用存储的名称调用该变量并将其应用为图像的 alt 属性。

第三步：使用jQuery添加一个<div>，它位于图片的底部，与图片的alt属性值相同。

如果您需要实际代码，请告诉我。

Answer 2

考虑一个轻量级、易于使用的工具，它致力于使与图像相关的所有内容更易于在网页上实现（尽管它也可以与其他 DOM 元素一起使用，即视频、iframe、PDF）。

FancyBox

这里是一个简单的例子，一个图片的alt属性被用来优雅地给图片一个标题。

Alt Image FancyBox

最后，使用相同的工具，您可以使用 jQuery 构建 alt 名称并自动呈现，因此您不必手动进行。

// fancyBox v2.0 Next of X Solution, Auto assign title to all images on page.
//www.craigwasselphotoart.com/portrait_and_event_photography/main_test.htm
//http://stackoverflow.com/questions/3216013/get-the-last-item-in-an-array
//All credit goes to JFK of fancybox.net
//Alexander Dixon 07-06-2015

$("a").each(function(index) {
  var titleName = $(this).closest("a").find("img").attr("src").toString().split('/').splice(-1, 1);
  var anchorIndex = "a:eq(" + index + ")";
  $(anchorIndex).attr("title", titleName).attr("rel", "img_gallery");
});

$("a[rel=img_gallery]").fancybox({
  helpers: {
    title: {
      type: 'over'
    }
  },
  // helpers
  beforeShow: function() {
      this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    } // beforeShow
}); // fancybox

<link href="http://www.alexldixon.com/fancybox/jquery.fancybox.css" rel="stylesheet" />
<script src="http://www.alexldixon.com/fancybox/jquery.fancybox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://fancyapps.com/fancybox/demo/1_b.jpg">
  <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" />
</a>

<a href="http://fancyapps.com/fancybox/demo/2_b.jpg">
  <img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" />
</a>

jsFiddle of auto alt Names