This is an example of an embedded album made with the jAlbum Slide Show 4 skin. It is a Slide Show 4 album where the index page is embedded in a web page.
It uses the next css code in the head section:
The album is displayed in a responsive iframe with this code in the body section:
You can generate this code in version 4.1.2 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 on the jAlbum Images page (it assumes two rows if Rows is set to 0) 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 slide show by setting check-mark "Start slide show 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 250 justified images.
For the Slide Show 4 skin this method works fine on a PC, on an Android device and on an iOS device like the iPad.
More info about the used CSS code on the blog of Ben Marshall