Back

Embedded FancyBox Light-Box

This is an example of an embedded light-box made with the jAlbum FancyBox skin. It is a FancyBox album where on the 'General' tab check-marks 'Open first slide automatically', 'Use fancybox-placeholder 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 thumbnails below the slide image. The middle button is used to start/stop the slide show and the left button can be used 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 fancybox lightbox library.

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

#fancybox-placeholder { float: left; width: 600px; margin-right: 1em; }

.fancybox-container { position: relative; width: 100%; height: 30vh; min-height: 300px; }

.fancybox-slide--image { padding: 0; } /* To remove space around image */

.fancybox-slide--image .fancybox-content { margin: 0; }

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

<h1>Embedded FancyBox Light-Box</h1>
<p>This is an example of ...</p>
<div id="fancybox-placeholder"></div>
<p>It is a Fancy album where ...</p>

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

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 FancyBox gallery via an iframe into your web page, see this example page.

Finally you can embed a FancyBox album 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.

Help   Close
Font size:
Button size:
Viewing time:
Transition effect: in
 Use full screen for a picture:

Embedded

Embedded
Vecht_121027_1156
Vecht_121027_1205-2
Vecht_121027_1205-2_130930_1334
Vecht_121027_1205-2_130930_1335
Vecht_121027_1205-2_130930_1336
Vecht_121027_1205-2_130930_1355
Vecht_121027_1209
Vecht_121027_1212-3
Vecht_121027_1212-3_130930_1255
Vecht_121027_1216-5
Vecht_121027_1218-2
Vecht_121027_1221
Vecht_121027_1222-2
Vecht_121027_1225-2
Vecht_121027_1225-2_130930_1324-3
Vecht_121027_1238-2
Vecht_121027_1242-7
Vecht_121027_1251-4
Vecht_121027_1253-3
Vecht_121027_1259-2
Vecht_121027_1300-4
Vecht_121027_1306-2
Vecht_121027_1309-2
Vecht_121027_1313
Vecht_121027_1323-4
Vecht_121027_1334-5
Vecht_121027_1342
Vecht_121027_1350
Close
Previous slide (left arrow key)
Close window and show index (up arrow key)
Next slide (right arrow key)
Previous slide (left arrow key)
Close window and show index (up arrow key)
Next slide (right arrow key)