Embedded PhotoSwipe album

This is an example of an embedded album made with the jAlbum PhotoSwipe skin. It is a PhotoSwipe album where the index page is embedded in a web page.

It uses the next css code in the head section:

.iframe-container { position: relative; height: 0; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; padding-bottom:69.53125%; /* 100*(h/w) h= 356 w= 512 for 4 columns and 2 rows and thumbsize 120x120 with margin 8 */ }
.iframe-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

The album is displayed in a responsive iframe with this code in the body section:

<div class="iframe-container">
<iframe src="https://andrewolff.jalbum.net/EmbeddedIndexPage_PS/" allowfullscreen> </iframe>

You can generate this code in version 1.6.1 with jAlbum menu item Album / Embed album.
The system will propose as default Album width and height, values based on the Thumbnail layout given on the jAlbum settings page and the Thumbnails image bounds specified (it assumes two rows if Rows is set to 0) on the jAlbum Images page and the margins set on the skin Slide Page tab.
You can of course select other values, for instance if you like to show both the theme image and the thumbnails table without scrolling. If it is important that the slides do fit well in the album frame, you should enter the image bounds of the slides, as given on the jAlbum Images / General settings tab.
If you use Thumbnails table type 'Table with variable # thumbnails / row', the the Thumbnail layout is not used, but you can still enter values which are in that case used to calculate the default Album width and height.

If you make an embedded gallery (slide page) by setting check-mark "Open first slide automatically", you can replace in the css code " -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto;" by "overflow: hidden;", because the slide page requires no scroll-bars.
See here the embedded slide page of this album and see here another example with justified images.

This method works fine on a PC and on an Android device. The iOS system shows some problems: for an iPad you should not use this for albums with > 30 images; choose the padding-bottom property so that initially all thumbnails are visible in the iframe on the iPad. If you use this method for an album made with the Slide Show 4 skin, there are no problems on an iPad, see here the Slide Show 4 skin example with > 250 photos with justified images.

More info about the used CSS code on the blog of Ben Marshall