我正在使用 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 查看
最佳答案
作为一个 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>
关于javascript - 自动添加 Nivo Lightbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34835163/