Embedded FancyBox album

This is an example of an embedded album 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 '' in the image directory:

<h1>Embedded FancyBox album</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.

You can also embed a FancyBox gallery into your web page, see this example page.

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



Previous slide (left arrow key)
Close window and show index (up arrow key)
Next slide (right arrow key)