Embedding one web page inside another has been a persistent headache since the early days of the web. The root cause is deceptively simple: when you embed a page in an iframe, the browser creates a separate window for it. That inner window has no awareness of its surroundings — it behaves as if it is the full browser window, or the full device screen on mobile. The result is that any responsive layout inside it collapses, because the media queries fire against the wrong dimensions.
That’s already a serious problem, but there’s more. An embedded frame introduces a second scrollable area nested inside the first, making the outer page nearly impossible to scroll on touch devices. And any URL shown in the address bar belongs to the outer page — there’s no way to share or bookmark the embedded content directly.
The only real solution is to load the gallery content using JavaScript directly into the host page, rather than inside a separate window. That way, the gallery becomes a genuine part of the page: it scrolls with it, responds to the actual viewport size, and stays out of the way of everything else. What about something like this?
(This is not a WordPress-made gallery. It was made with jAlbum and added using only two lines of code.)
Why the obvious fix doesn’t work
The most common way to embed one web page inside another is called an iframe — essentially a rectangular hole cut into your page, with another page loaded inside it. Iframes are easy to use, and for simple things like embedding a YouTube video or a map, they work fine. Those embeds are designed specifically to live inside an iframe, at a fixed size, with no need to talk to the outside world.
A photo gallery is a different matter. It has its own layout, its own navigation, its own 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 that box, not to your page or your visitor’s screen. Various workarounds exist — scripts that try to measure the iframe content and resize the frame to match — but they’re fragile, they break on cross-domain setups, and they never fully solve the scrolling or sharing problems.
The JavaScript approach — and why it’s different
The solution we built into the Embed skin works differently. Instead of opening a window-within-a-window, a small JavaScript snippet fetches the gallery’s content and places it directly into your page — woven into it, as if it had always been there. For non-technical readers, think of it less like inserting a framed picture into a wall, and more like removing the frame entirely and hanging the canvas flush. The gallery becomes part of the page, not a guest in it.
For those who are curious about the technical details: the snippet makes an asynchronous fetch request for the gallery’s HTML, extracts the relevant content, injects it into a target element on your page, then loads the gallery’s CSS and JavaScript into the parent document. No iframes, no postMessage — but it’s worth noting that JavaScript-based loading comes with its own cross-origin constraint: the gallery must be hosted on the same domain as the page embedding it, or on a server configured to explicitly allow cross-origin requests. For most jAlbum users hosting everything under one domain, this is a non-issue. For those hosting their gallery on a separate server, a simple CORS header on the gallery server is all it takes.
Meet Embed
Embed is a new jAlbum skin built from the ground up for one purpose: placing your photo gallery anywhere on the web without sacrificing layout, scrolling, or responsiveness. It’s designed with embedding as its primary use case — though it works equally well as a standalone gallery page if that’s all you need.
Using it is straightforward. You build your album in jAlbum as usual, select the Embed skin, adjust the look to your liking, and publish. Then head to the Share tab — alongside the usual social sharing options, you’ll find an Embed album section with a ready-made code snippet.
The snippet has two small parts: a <script> line that goes once into the <head> of your page, and a single <jalbum-gallery> tag that you place wherever you want the gallery to appear. If those terms mean nothing to you, don’t worry — most website builders and blogging platforms have an “embed” or “insert HTML” option where you can paste both parts. You can also set the desired width and height before copying.
The gallery can also be opened as a direct link — handy for sharing or bookmarking a specific album independently of whatever page it’s embedded in.
It fits and it adapts
Because the gallery is a genuine part of your page rather than a window within it, it naturally fills whatever space you give it — a full-width section, a narrow column in a sidebar, or anything in between. On mobile it reflows accordingly, because it responds to the actual device screen rather than a fixed iframe box.
The number of columns adjusts automatically to the available width. Squeeze the gallery into a narrow container and it shows fewer, wider thumbnails. Give it more room and it spreads out. You never need to configure this manually — it simply does the right thing.
The look is controlled through the skin’s settings panel in jAlbum, where you can dial in colors, typography, spacing, corner radius, and shadow to match your site’s visual style. There are no CSS files to edit or variables to look up.
A few things worth noting about the settings: background, text, accent, and card colors can all be set independently, giving you enough control to match most site designs without overwhelming you with options. Font family and size, thumbnail gap, corner radius, and box shadow round out the essentials. Captions — what gets shown under thumbnails, folders, and in the lightbox — are also configurable here, so the gallery presents exactly as much or as little information as you want.
What this opens up
Once a gallery is no longer confined to its own page, it stops being a destination and becomes an ingredient. A travel blog post can carry the full album from that trip, right inside the article. A portfolio site can embed client galleries without sending visitors off to a separate URL. A product page can showcase photography in context, alongside the text and layout that gives it meaning.
These are things that were technically possible before — with enough duct tape — but never this cleanly, and never without visible compromises. The Embed skin removes the friction without asking you to become a web developer.
If you’d like to see it in action, here are two views of the same album: one as a standalone gallery and one embedded into an editorial page. The gallery is identical in both — what changes is the context around it.
Ready to try it yourself? The Embed skin requires jAlbum v34 or later (released January 8, 2024). Find it in the skin selector on jalbum.net, or open the skin selector in an existing project and look for Embed in the list. Questions and feedback are welcome in the Embed skin forum.
Technical notes
The gallery is implemented as a Custom Element (<jalbum-gallery>) using the Web Components standard, operating in Light DOM rather than Shadow DOM — this ensures that third-party scripts on the host page, including the lightbox library, can traverse and interact with the gallery’s DOM without restrictions.
Lightbox functionality is provided by GLightbox by Biati Digital, licensed under MIT — free for both personal and commercial use.
Cross-origin note: the JavaScript loader requires either same-domain hosting or a CORS-permissive server configuration on the gallery host. A single Access-Control-Allow-Origin response header is sufficient.
Until the WordPress plugin gets approved by the WP team, you can download the plugin’s 1.0 version from here, and use the Plugins / Add plugin / Upload plugin option in WordPress.
/Laza