jquery - 如何更改 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" }

这使您能够在需要时保留原始的之前和之后文本，并在实现多个图像比较时提供唯一的标签。