javascript - 自动添加 Nivo Lightbox

Question

我正在使用 Nivo Lightbox在我的网站上，我所有的图片都以这种方式与这个插件集成:

<div class="portfolio-item">
<div class="portfolio-thumb ">
<a class="lightbox" data-lightbox-type="ajax" title="Strategic Planning Tahun Buku 2016 - 2020" href="{{ asset('images/tentang_cu.jpg') }}">
    <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
    <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
         data-src="{{ asset('images/tentang_cu.jpg') }}" width="800" height="450">
</a>
</div>

为此，我还添加了一些 CSS 样式来制作图像 mask ，以便为用户提供可以在 Nivo Lightbox 中查看该图像的线索。

我的问题是:

我的文章 View 中有一个使用 summernote 的文本编辑器，其中有一张图片。那么如何使用此 html/样式自动添加它呢？添加<div class="portfolio-item">就这样吗？

因为我想在我的网站上保持一致，所有图片都可以使用 Nivo Lightbox 查看

Answer 1

作为一个 wordpress 插件，我认为你应该制作 wordpress 画廊，然后用它们的名字来称呼这些画廊，例如

我引用您提供的链接:

Setting up Galleries

By default Nivo Lightbox will only show individual items. To create a gallery of items with prev/next navigation you need to add a data-lightbox-gallery attribute to your links. For example:

<a href="image1_large.jpg" data-lightbox-gallery="gallery1">
    <img src="image1_thumb.jpg" alt="" /> </a> <a href="image2_large.jpg" data-lightbox-gallery="gallery1">
    <img src="image2_thumb.jpg" alt="" /> </a> <a href="image3_large.jpg" data-lightbox-gallery="gallery1">
    <img src="image3_thumb.jpg" alt="" /> </a>