Embedded LightGallery Light-Box

This is an example of an embedded light-box made with the jAlbum LightGallery skin. It is a LightGallery album where on the 'General' tab check-marks 'Skip thumbnails pages', 'Use LightGallery-container in an embedded album, 'Disable viewer settings', 'Hide close button' and on the Slide page / Options tab 'Enable slide show' are set.

Click on the Thumbnails button in the tool-bar in the upper right corner to show/hide the caption and the thumbnails below the slide image. The middle button is used to start/stop the slide show and the right button can be used maximize the lightbox. Use double click to zoom/unzoom the image.

No JSON data is used and no iframe is used as a container for a the album, it is all done in the excellent lightGallery library.

The extra required css code is entered in the css textbox on the LightGallery 'Web page' settings tab:

#lg-container {
   position: relative;
   height: 40vh;
   min-height: 300px;
   float: left;
   width: 50%;
   margin-right: 1em;
}

The extra required html code is in include file 'page-header_embed.inc' in the image directory:

<h1>Embedded LightGallery Light-Box</h1>
<p>This is an example of ...</p>
<div id="lg-container"></div>
<p>It is a LightGallery album where ...</p>

It is obliged to insert in the html code LightGallery container <div id="lg-container" > < /div >
at the place you like to see the album with the images.

Download page-header_embed.inc file

If the you like to embed a light-box in the root of your website you should not use jAlbum to upload the index page of your web-root, because it will start uploading all the files in your web-root. Use an FTP-program like FileZilla, to up-load the sub-directories slides, thumbs and res and files slidePage.js and index.html.

If the index file of your website is large, the method described above might not be very practical and you can better edit your original index page of your web-page manually. Start making a minimal album in a sibling directory of your web-page: Check both check-marks 'Skip thumbnails pages' and 'Use LightGallery-placeholder' and un-check slide Page options ' Show location button' and 'Show Share window button'. This will remove most unused code from the album index page.

Make a file 'page-header_embed.inc' the image directory with only only one line of code:

<div id="lg-container"></div>

Make the album and move the sub-directories slides, thumbs and res and file slidePage.js to your webpage folder. Edit the index.html file of your webpage: add code from the album index file, In the head section copy after your style-sheet statements these type of lines from the album index file:

<link rel="stylesheet" href="res/css/lightgallery-bundle.css" />
<link rel="stylesheet" href="res/css/lg-transitions.css" />
<link href="res/common.css" rel="stylesheet" >
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" >
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet" >

The last two type of statements may be different for your album or they may be absent. Copy only the lines you see in your album index file.

Copy statement

<div id="lg-container"></div>

to the place in the body section where you like to see the embedded light-box.

Copy just above the </body> statement the code from the end of the album index file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="res/jquery-3.6.0.min.js"><\/script>');</script>
<script src="res/lightgallery.min.js"></script>
<script src="res/lg-zoom.min.js"></script>
<script src="res/lg-autoplay.min.js"></script>
<script src="res/lg-hash.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="res/lg-video.min.js"></script>
<script src="res/tippy.min.js"></script>
<script src="slidePage.js"></script>
<script src="res/indexPage.js"></script>

Upload your web-page folder to your server with an FTP-program like FileZilla.

If required, edit in common.css the css code for the container, for example:

#lg-container {
position: relative;
height: 40vh;
min-height: 300px;
width: 600px;
margin: auto;
}

I used this code and procedure for my own home page www.andrewolff.nl.

You can also embed a LightGallery thumbnails page into your web page, see this example page.

Notice that in this implementation the album code and the rest of the website code should be saved in the same html page. This is not required if you embed a LightGallery gallery via an iframe into your web page. You can embed a LightGallery album in an iframe into your web page via the jAlbum embedded template: select in jAlbum menu item Album / Embed Album and copy the code to your webpage, see this example page.