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样式，使图像蒙版能够让用户知道这个图像可以在Nivo Lightbox中查看。

我的问题是：

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

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

Answer 1

作为一个wordpress插件，我认为你应该制作wordpress画廊，然后按名称调用这些画廊，例如

我引用您提供的链接：

设置图库

默认情况下，Nivo Lightbox仅显示单个项目。创建一个   您需要添加上一个/下一个导航的项目库   data-lightbox-gallery属性链接。例如：

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

自动添加Nivo Lightbox

1 个答案: