FancyBox Light-box embedded in iframe
This is an example of an embedded slide show made with the jAlbum FancyBox skin. It is a FancyBox album where the index page is skipped.
The index page is skipped, because on the General settings tab check-mark 'Open first slide automatically' has been set.
With the next css code it is also possible to embed this slide page in a website.
<style type="text/css">
.iframe-container {
position: relative;
height: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
/* 16x9 Aspect Ratio */
.iframe-container-1920x1080 {
padding-bottom:69.53125%; /* 100*(h/w) h= 356 w= 512 */
}
.iframe-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
The album is displayed in a responsive iframe:
<div class="iframe-container iframe-container-1920x1080">
<iframe src="http://andrewolff.jalbum.net/NoIndexSlideShow_FB/" allowfullscreen> </iframe>
</div>
Click on the image to stop/continue the slide show.
With the next code it is also possible to embed the index page in a website.
<div class="iframe-container iframe-container-index">
<iframe src="https://andrewolff.jalbum.net/Sprengenberg/" allowfullscreen> </iframe>
</div>
More info about the used CSS code on the blog of Ben Marshall