STEP 1
For the lightbox header code, there’s two options of where you can insert it – In the Global Header OR in the Page Header.
If you are only going to have one or two pages using a lightbox, insert the header code into the Page Header. If you are going to have lightboxes on a lot of pages, you would then want to insert the header code into the Global Header.
Page Header Steps
- Click the gear icon for the page you want to have the lightbox on
- Click the Advanced tab
- Paste the lightbox header code (see below) into the Page Header Code Injection code area
Global Header Steps
- Click on Settings
- Click on Advanced (in the Website section)
- Click on Code Injection
- Paste the lightbox header code (see below) into the Header code area
Lightbox Code for the Header
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />
For the latest version of this code, please visit this developer’s Github page – https://github.com/noelboss/featherlight
STEP 2
For the lightbox footer code, there’s two options of where you can insert it – In the Global Footer OR in the Page.
If you are only going to have one or two pages using a lightbox, insert the footer code into the Page. If you are going to have lightboxes on a lot of pages, you would then want to insert the footer code into the Global Footer.
Page Footer Steps
- Click the Edit button to go into Edit mode on the page you want to have the lightbox on
- Scroll to the bottom of the page
- Add a Content Block to the page
- Select the Code Content Block
- Paste the lightbox footer code (see below) into the Code Content Block
Global Footer Steps
- Click on Settings
- Click on Advanced (in the Website section)
- Click on Code Injection
- Paste the lightbox footer code (see below) into the Footer code area
Lightbox Code for the Footer
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
For the latest version of this code, please visit this developer’s Github page – https://github.com/noelboss/featherlight