Menu icon Foundation
How to use Clearing Lightbox with Featured Image and small-block-grid?

I would like to use Clearing Lightbox with the Featured Image and small-block-grid at the same time but once small-block-grid get involved Featured Image functionality is gone.

How to use all the features at the same time?

Here is how my code looks like:

<div class="row">
    <div class="small-12 medium-12 large-12 columns">
        <h3>Clearing Lightbox</h3>
        <ul class="clearing-thumbs clearing-feature small-block-grid-4" data-clearing>
            <li class="clearing-featured-img"><a class="th" href="[% $request.uri_base %]/images/img-400x240.gif"><img data-caption="400 by 240 pixels" src="[% $request.uri_base %]/images/img-400x240.gif"></a></li>
            <li class="clearing-featured-img"><a class="th" href="[% $request.uri_base %]/images/img-800x600.gif"><img data-caption="800 by 600 pixels" src="[% $request.uri_base %]/images/img-800x600.gif"></a></li>
            <li><a class="th" href="[% $request.uri_base %]/images/img-1280x720.gif"><img data-caption="1280 by 720 pixels" src="[% $request.uri_base %]/images/img-1280x720.gif"></a></li>
            <li><a class="th" href="[% $request.uri_base %]/images/img-1920x1080.gif"><img data-caption="1920 by 1080 pixels" src="[% $request.uri_base %]/images/img-1920x1080.gif"></a></li>
        </ul>
    </div>
</div>

Here is the rendered result:

Clearing lightbox problem

The result should be showing only the very first and second image.

Foundation 5clearingFeatured Imagesmall-block-gridlightboxclearing lightbox

I would like to use Clearing Lightbox with the Featured Image and small-block-grid at the same time but once small-block-grid get involved Featured Image functionality is gone.

How to use all the features at the same time?

Here is how my code looks like:

<div class="row">
    <div class="small-12 medium-12 large-12 columns">
        <h3>Clearing Lightbox</h3>
        <ul class="clearing-thumbs clearing-feature small-block-grid-4" data-clearing>
            <li class="clearing-featured-img"><a class="th" href="[% $request.uri_base %]/images/img-400x240.gif"><img data-caption="400 by 240 pixels" src="[% $request.uri_base %]/images/img-400x240.gif"></a></li>
            <li class="clearing-featured-img"><a class="th" href="[% $request.uri_base %]/images/img-800x600.gif"><img data-caption="800 by 600 pixels" src="[% $request.uri_base %]/images/img-800x600.gif"></a></li>
            <li><a class="th" href="[% $request.uri_base %]/images/img-1280x720.gif"><img data-caption="1280 by 720 pixels" src="[% $request.uri_base %]/images/img-1280x720.gif"></a></li>
            <li><a class="th" href="[% $request.uri_base %]/images/img-1920x1080.gif"><img data-caption="1920 by 1080 pixels" src="[% $request.uri_base %]/images/img-1920x1080.gif"></a></li>
        </ul>
    </div>
</div>

Here is the rendered result:

Clearing lightbox problem

The result should be showing only the very first and second image.