Ad

Adding Nivo Lightbox Automatically

I'm using Nivo Lightbox in my site and all my images have integrated with this plugin this way:

<div class="portfolio-item">
<div class="portfolio-thumb ">
<a class="lightbox" data-lightbox-type="ajax" title="Strategic Planning Tahun Buku 2016 - 2020" target="_blank" rel="nofollow noreferrer" 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>

With this i also add some CSS style making image masking to give the user a clue that this image can be viewed in Nivo Lightbox.

My question is:

I have a text editor using summernote in my article view and there is an image in there. So how to add it automatically with this html/styling? Adding <div class="portfolio-item"> etc just like that?

Because I want some consistency on my site, that all image can viewed using Nivo Lightbox

Ad

Answer

Being a wordpress plugin I think you are supposed to make wordpress galleries and then call those galleries by there name, eg

And I quote from the link you provided:

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 target="_blank" rel="nofollow noreferrer" href="image1_large.jpg" data-lightbox-gallery="gallery1">
    <img src="image1_thumb.jpg" alt="" /> </a> <a target="_blank" rel="nofollow noreferrer" href="image2_large.jpg" data-lightbox-gallery="gallery1">
    <img src="image2_thumb.jpg" alt="" /> </a> <a target="_blank" rel="nofollow noreferrer" href="image3_large.jpg" data-lightbox-gallery="gallery1">
    <img src="image3_thumb.jpg" alt="" /> </a>
Ad
source: stackoverflow.com
Ad