Javascript 自动添加Nivo灯箱

我在我的网站上使用，我的所有图片都以这种方式与此插件集成：

<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样式的图像遮罩，让用户知道这个图像可以在Nivo Lightbox中查看

我的问题是:

我的文章视图中有一个使用summernote的文本编辑器，其中有一个图像。那么，如何使用此html/样式自动添加它呢？像那样添加

等

---

因为我想在我的网站上有一些一致性，所有的图片都可以使用Nivo Lightbox查看，作为wordpress插件，我想你应该制作wordpress图库，然后用它们的名字来命名这些图库，例如

我引用你提供的链接：

设立画廊

默认情况下，Nivo Lightbox将仅显示单个项目。创建 具有上一个/下一个导航的项目库您需要添加 链接的数据灯箱库属性。例如：

---

正如我之前所说，我的文本编辑器（如summernote）正被不知道如何编码的普通用户使用，因此我希望有一种非常方便的方法，使他/她放入summernote的所有图像都可以与nivo lightbox一起使用。。。。

<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>