Foundation 5 – Opening ‘Clearing’ Using an External Button

Only a quick one this. I wanted to open a foundation 5 ‘Clearing‘ using a button located elsewhere on the page.

It’s simple enough to use jQuery to trigger the click event on the first item in the <ul>, thereby opening the full-screen gallery

<button
  onclick="jQuery('[data-clearing] li img').first().trigger('click');">
    View Gallery
</button>

So now you can open the gallery from anywhere on the page, as well as by clicking the thumbnails in the gallery itself.

[GARD]


COMMENTS