Featherlight open text in lightbox

Archive
1

I am wanting to use featherlight to open a lightbox to show some text. The featherlight docs use:

Open element in lightbox

This div will be opened in a lightbox

If I use this, I get the link and it opens the text inside the div, but the div contents show on the page as well as the link, not hidden until clicked with the link.

Is there some markdown to use that will only show the link to open the div in a lightbox?

2

Are you using this with Grav 1.0 or 1.1? That’s going to help things a little. Also, can you give paste a copy of the entire .md page’s contents where you have setup your featherlight sections?

3

Grav version 1.0.10

Not sure exactly what you are after as I am still learning (I only installed it yesterday for a specific intranet site)

From admin plugin, Edit Columns module, Content, Expert:

Frontmatter
title: 'Columns part 2’
styles: 'sg-center sg-color-blue column-color-light-gray’
column_number: ‘2’

WYSIWYG content

First Block



Open element in lightbox

This div will be opened in a lightbox
### Second Block

![](lion.mp3)
![](sunny_mountains.JPG?lightbox=1024,768)   
<a href="#" data-featherlight="#box2">Open element in lightbox</a>
<div id="box2">This div will be opened in a lightbox</div>

Third Block

This is the third column in the set


### Fourth Block

This is the fourth column in the set

From 04.kitchen-display folder modular.md:

title: 'Kitchen Display’
body_classes: modular
foundation_util_triggers_js: use_global
foundation_util_touch_js: use_global
foundation_util_timerAndImageLoader_js: use_global
foundation_util_nest_js: use_global
foundation_util_motion_js: use_global
foundation_util_mediaQuery_js: use_global
foundation_util_keyboard_js: use_global
foundation_util_box_js: use_global
foundation_tooltip_js: use_global
foundation_toggler_js: use_global
foundation_tabs_js: use_global
foundation_sticky_js: enabled
foundation_slider_js: use_global
foundation_reveal_js: use_global
foundation_responsiveToggle_js: use_global
foundation_responsiveMenu_js: use_global
foundation_orbit_js: use_global
foundation_offcanvas_js: use_global
foundation_magellan_js: enabled
foundation_interchange_js: use_global
foundation_equalizer_js: use_global
foundation_dropdownMenu_js: use_global
foundation_dropdown_js: use_global
foundation_drilldown_js: use_global
foundation_accordionMenu_js: use_global
foundation_accordion_js: use_global
foundation_abide_js: use_global
google_prettify: use_global
wow_js: use_global
animate_css: use_global
fontawesome: use_global
featherlight:
enabled: true
active: true
content:
items: '@self.modular’
order:
dir: asc
by: default
custom:
- _showcase
- _in-page-navigation
- _backgrounds
- _text
- _gallery
- _buttons
- _columns
- _text-image-right
- _row-image-left


I hope this is what you are after
regards
4

That would be what i was after if it output correctly. Can you just paste the file into a GitHub Gist and give me the URL?