Image gallery

[azimuth]

Has anyone made an image gallery that works well in epub (that works well for the more popular eReaders)?

We tried refining a gallery for our epub needs, and our goal is to have dual side by side images in an epub with a pagebreak immediately after the two dual images.
Results link.
JS Fiddle

Tested on ADE, Pocketbook, Aldiko, Moon+, Kobo, (all on Android). ReadEra, and Eboox renders each image full size. Only Moon+ was a puzzle. No other platform (iOS, linux, etc) is tested.
The fallback for lesser eReaders is to: 1. either render a full page image, 2. or two images per page (one below the other). Some lower quality eReaders fail. I don't know how well it does on iOS eReaders or Linux eReaders.

I realize there are valid points as to why a gallery of this type may be of little use in an epub, but I see value to go a step beyond with epub creativity (i.e. CSS frameworks, color theme, etc) whenever possible.

[azimuth]

Another type of image gallery I thought might be useful in an epub:
Codepen link
Though getting the code to work well in an epub is another challenge.

[azimuth]

Originally Posted by azimuth

Another type of image gallery I thought might be useful in an epub:
Codepen link
Though getting the code to work well in an epub is another challenge.

Our goal was to add something like this to a modern outdoor sports related informational Epub, but until we can resolve the code factors that limit its use in ADE (etc) it will be on hold.
The refined 5-image gallery so far:
Refined JSFiddle
-Works only on: Aldiko (Android OS).
-Keeps design shape: ADE, Pocketbook (but non-functional).
-Fallback: Moon+, ReadEra (images are full screen).

[Hitch]

Originally Posted by azimuth

Our goal was to add something like this to a modern outdoor sports related informational Epub, but until we can resolve the code factors that limit its use in ADE (etc) it will be on hold.
The refined 5-image gallery so far:
Refined JSFiddle
-Works only on: Aldiko (Android OS).
-Keeps design shape: ADE, Pocketbook (but non-functional).
-Fallback: Moon+, ReadEra (images are full screen).

I think you'll find that the entire "getting it to work in all ePUB readers" is the huge stumbling block. Yup, works great on browsers and any other environment in which you have some modicum of control, but not so fantastic in those environs where one factor OR ANOTHER can be changed. IOW, in a browser, typically, people tend to zoom or change devices, right? The font and the layout change at the same time. in Ebooks, not so much--the primary altered factor is font size and despite the fact that that should not affect image sizes, it almost invariably does. NOPE, don't ask me why. It's frustrating.

When we have to do s-b-si images (side by side) we used tables, period. Yup, old-fashioned, but it works pretty much everywhere. The coding that you're using--nyet. Does not seem to work more than it doesn't and that's a deal-breaker for us. FWIW.

I would not, at this point, even try the two tabular columns (I mean, visually) with varied numbers of images of varying sizes. Not like that. looks great when it works, but that's so rarely that it's not worth doing.

Hitch

[azimuth]

As suggested I tested an image gallery based on the 'old fashioned' <table> method. It works ok in the top main eReaders. It has challenges in ReadEra (on Android) that we could not solve. For some reason that particular eReader on Android places thin borders around the text and image (cellpadding won't remove it - no CSS would remove it), and it adds a non-removable list-style too. The ReadEra eReader software code is taking precedence over inserted CSS. The software also places an unusually wide gap around the images in a table (something that cannot be overridden). We successfully wrapped the table in a DIV to center it on the page screen plus a breakpoint. This test gallery only works on Epub3 format.

Our <table> images test that works (with limitations on ReadEra via Android):
JSFiddle 1

Our DIV images test which works on a broad number of eReaders (all without hiccups so far [ADE, Pocketbook, Aldiko, Kobo, ReadEra, Moon+]) as either dual images or a single large screen image (there are 4 test examples, each a slightly different arrangement):
JSFiddle 2