如何更改Twenty Twenty插件中的前后标签？

Question

如果您不熟悉TwentyTwenty插件，它是一个视觉差异工具，可以让您突出显示两个图像之间的差异。

我在wordpress上使用他们的插件，因为我需要在两个图像之间滑动的功能。但是，当您将鼠标悬停在默认情况下之前和之后的图像上时。

Before and after labels

基本上我想要做的是改变标签之前和之后的标签，这样他们就可以说别的了。怎么会这样做呢？

Answer 1

要维护twentytwenty.css，请更改你的html，为每个div容器提供一个唯一的ID：

<div id="set_1" class="twentytwenty-container">    
    <img src="img/1_1.jpg" />
    <img src="img/1_2.jpg" />
</div>

...并提供css为set_1提供唯一的文本：

#set_1 .twentytwenty-before-label:before {
    content: "new before" }
#set_1 .twentytwenty-after-label:before {
    content: "new after" }

这使您可以在需要时保持文本前后的原始文本，并在实现多个图像比较时提供唯一标注。

Answer 2

您可以通过修改文件twentytwenty.css中的以下行来更改这些参数：

.twentytwenty-before-label {
  opacity: 0; }
  .twentytwenty-before-label:before {
    content: "**Before**"; }

.twentytwenty-after-label {
  opacity: 0; }
  .twentytwenty-after-label:before {
    content: "**After**"; }

这部分css出现在第102行

Answer 3

通过插件选项设置标签：

$(".twentytwenty-container").twentytwenty({
    before_label: 'Before',
    after_label: 'After'
});