Skip to content

lightbox ¤

Wraps content into featherlight lightboxes.

click on an image below
mountainlake mountainlake

Syntax¤

At the bottom of your page add an lp stanza like this

 `lp:lightbox [outer_match=... match=... target=...]`

or the normal form:

 ```sth lp:lightbox match=img target=src ...
 ```

The library works not only on markdown images but also on html images or other content.

You may specify jquery element matchers and featherlight targets also in the body (then with more than one), like this:

 ```b lp:lightbox addsrc
 [{'match': 'img', 'target': 'src'}, # the default (you may omit this)
  ...
 ]
 ```

Default Parameters:

lb_dflt_params = lambda: {'outer_match': '.md-content ', 'match': 'img', 'target': 'src'}

https://github.com/AXGKl/docutools/blob/master/src/lcdoc/mkdocs/lp/plugs/lightbox/__init__.py#L69

Adding a colon behind the mode lightbox will return a button, which will lift the following element into a lightbox:

`lp:lightbox:`
*Example element with the lightbox button to the right*

Renders:

Example element with the lightbox button to the right

The next element may also be html.

You may even use the tag witin html - then wrapped into an outer tag and on a single line, so that we detect the statement while parsing the source markdown page:

Source:

<div style="color:blue"> Not in box
<p>
`lp:lightbox:`
</p>
<div style="color:red"> In lightbox </div></div>

Renders:

Not in box

In lightbox

Any such lp expression within a page automatically triggers the inclusion of the lightbox and jquery libs into the page.

All javascript in the element should work:

 `lp:lightbox:`
 
 !!! note "Example"
 
     ```python lp:python
     show([['Joe', 42], ['Jane', 32]], columns=['name', 'age'])
     ```

Result:

Example

Tech

All javascript in the element should work, since we set persist to true, i.e. content is moved, not copied. Before close we move the content back, in order to address this bug.