The Embed skin was created for users who already have a website and want to place complete photo albums directly into their pages — not as a link to a separate gallery site, but as a native part of the page itself.
See it in action:
Why not just use an iframe?
The most common way to embed one web page inside another is the so-called “iframe” element. For self-contained embeds like a YouTube video or a Google Map, iframes work fine — those are designed to live at a fixed size inside a frame.
A photo gallery has its own layout, navigation, and lightbox, and it needs to know how much space it has to work with. Inside an iframe, it can’t know any of that — it sees a fixed box and adapts to the box, not to your visitor’s screen. The result is a collapsed responsive layout, a second scrollable area nested inside the first (a particular problem on touch devices), and no way to share or bookmark the embedded content directly.
How the Embed skin works
Instead of opening a window within a window, the Embed skin uses JavaScript to fetch the gallery content and places it directly into your page. The gallery becomes a genuine part of the page: it scrolls with it, responds to the actual viewport and container size, and doesn’t interfere with anything around it.
As the content is loaded via JavaScript, the gallery must either be hosted on the same domain as the page embedding it, or the gallery server must be configured to allow cross-origin requests (a single CORS header is sufficient). For most users hosting everything under the same domain, this is a non-issue.
Getting started
Build your album in jAlbum as usual, select the Embed skin, configure the appearance, and upload.
Once uploaded, open the Share tab in jAlbum, and under Embed album you’ll find a ready-made code snippet with two parts:
- A
<script>tag to place once in the<head>of your page - A
<jalbum-gallery>tag to place where the gallery should appear
Most website builders and blogging platforms have an “Embed” or “Insert HTML” option where both parts can be pasted.
Needs jAlbum 34 or later.
Questions and feedback in the Embed skin forum.
Embedding into WordPress
For WordPress users, a dedicated Gutenberg block plugin is available that handles the embed code automatically. (Plugins → Add plugin → Search plugins: “jalbum gallery”) Install the plugin, activate it, then you can insert a jAlbum Gallery block anywhere in your post or page; just copy / paste the gallery URL into the sidebar box — no manual code editing required.
Manual download:
The plugin requires WordPress 6.3 or later.
Technical notes
The Embed skin is built on the Web Components standard. The gallery is implemented as a Custom Element (<jalbum-gallery>) operating in Light DOM rather than Shadow DOM, which ensures that the lightbox library and other scripts on the host page can interact with the gallery’s DOM without restrictions.
Lightbox functionality is provided by GLightbox by Biati Digital (MIT license — free for personal and commercial use).
Responsive column layout uses CSS container queries, so the gallery responds to the width of its container element rather than the browser window width. This is what allows it to behave correctly whether it occupies a full-width section or a narrow column.