How to get a 'zoomable' image?

[jttraverse]

I've been working on an ePub format ebook, and I want to have a number of illustrations that the reader can enlarge using pinch-to-zoom.

The problem I have is that I can't seem to get the illustrations embedded in the book to display in full-screen and be scalable with the pinch/zoom feature. Images in magazines (i.e. National Geographic) are easily scalable, so why won't pictures embedded in books work the same way?

If I copy an image to my device and view it directly, it -is- scalable with the pinch/zoom functionality. But it seems that when it's called from within an xhtml or xml page..no go. The image appears to lock to screen size, or be so oversized you only see a corner.

Is this not possible with images embedded inside a book ePub file? Maybe it's a CSS issue, but I'm at a loss to figure this one out.

[Jellby]

Zooming on images is a function of the reader, not of the format. I mean, you cannot design an ePUB to have an image zoomable in any reader, because each reader will behave differently, some will zoom on any image, some will zoom on no image, and on some others it might depend on the code.

In your case, since you say you can zoom on some images with your Nook, you'd have to see what's different in the code for those images. Try unzipping the sample magazines and have a look at the code, or open them in Sigil...

[jttraverse]

I should have clarified that I realize zooming is a function of the reader. What I'm trying to understand is what makes one image zoomable when, in the same reader, another image is not zoomable.

I know that opening a regular plain-vanilla image (jpeg, png, etc.) yields a fully zoomable photo, but when I insert the image into an ePub book and then open the book, the image does not scale. So there must be something in the way it is being handled in the ePub format that makes it zoomable or not depending on the circumstances.

Thanks

[Jellby]

You can uncompress the magazine ePUB file with any zip program and see the code (provided it's not DRMed, or you remove the DRM).

[jttraverse]

I've already been examining the code used to display the magazine, and while it appears there is one set of page-images displayed when on a mobile device, and fully zoomable, viewing the magazine in Calibre or ADE on a pc gets a whole different set of pages and layout. It's probable that there are two sets in the ePub file for such instances. Haven't figured it out yet but still looking at the coding. However...

For a different approach, it appears that if the image is included in the ePub and a hotlink is made to it, the image opens on screen acting as if it's locked into a page, and it will not zoom. I'm wondering if I can stick the image in the ePub but have it displayed some way that opens it as if it's just a simple image on the reader. If I can get it to display the way the reader normally displays any online picture, then I think it will zoom any way I want. So far though I haven't been able to get this to work since being in the /Images directory inside the ePub seems to force it to be displayed as a page rather than just an image.
-JTT

[Jellby]

Can we see an example of the code? Not the actual pictures, but just the XHTML+CSS code.

[jharker]

I second Jellby's request -- can we see example code? A whole epub file would be even better.

Could you provide a specific example? I'm afraid I'm not entirely following what your problem is. Do you mean that you have a file ("figure.png") which can be zoomed when opened by itself, but which cannot be zoomed when embedded in an ePub that is opened in ADE? Or what?

Put another way, can you give a step-by-step description of opening an image in a context where you can zoom, and then a step-by-step description of opening an image in a context where zooming doesn't work (but you think it should)?

[jttraverse]

I'll see if I can make this simple and clear:
Opening the epub (unzipping it) gives the usual three files/folders..META-INF, OPS, and mimetype.
In the OPS folder are two other folders--/CSS and /images--along with a lot of individual xml files that comprise the articles themselves, including one .ncx and one .opf file, and on file called 'ReplicaMap.xml'.

I pulled one image out of the /images folder and simply copied it to a folder on my EVO cellphone, as well as to my color Nook, and then opened it. On my EVO if I choose simply to 'view the file' it opens and is fully zoomable. (Curiously to me, if I open it using "ES Image Browser" it isn't zoomable..)

Now, if I load the ePub file to my EVO read it with a reader app (Aldiko), it displays the article files which have smaller versions of the images included in each article. The magazine looks and behaves basically like a regular ePub book would as far a changing pages, chapters, etc. But, the images are -not- zoomable...they are static...and look only like thumbnails or small versions embedded with each article.

However, If I open the ePub on the color Nook, it defaults to a version of the magazine that is an image-based version. These images are found under the /images directory in a subfolder called /pages. It seems clear to me that this is all being done using the /OPS/ReplicaMap.xml file since that is the only place with coding that calls these specific images. How the Nook knows to go to ReplicaMap.xml and show that layout first and not the default layout that opens on a PC or on my EVO is beyond me. Maybe there is something in the Nook software as a reader that tells it to always go with ReplicaMap.xml first if it exists.
Anyway, the whole point of this is that when the images are displayed on the Nook (via ReplicaMap.xml) they appear as if you're looking at a two page spread of the actual magazine pages and you can pinch-to-zoom on them and enlarge them, etc.

Somehow, even though everything is buried in the same ePub, if the images are displayed one way (via ReplicaMap) they are zoomable...but displayed as part of the pages of articles they are not. It's frustrating.

Folders:
META-INF
OPS
+CSS
+images
+pages

ReplicaMap.xml looks like this:----------------------------------------------

<?xml version="1.0" encoding="UTF-8"?> <ReplicaMap xmlns="http://www.hp.com/schemas/imaging/ereader/hff">

<Title>Popular Science - Sample Issue</Title>

<Pages>

<Page pageNum="0" file="images/pages/pg-01.jpg"

thumbFile="images/pages/pg-01-thumb.jpg">

<Group ePubTarget="article_1-1.xml"/>

</Page>

<Page pageNum="1" file="images/pages/pg-07.jpg"

thumbFile="images/pages/pg-07-thumb.jpg"/>

<Page pageNum="2" file="images/pages/pg-08.jpg"

thumbFile="images/pages/pg-08-thumb.jpg"/>

<Page pageNum="3" file="images/pages/pg-16.jpg"

thumbFile="images/pages/pg-16-thumb.jpg">

<Group ePubTarget="article_16-1.xml">

----SNIPPED OUT A LOT FROM THE MIDDLE----

<TocEntry title="The Toughest Bike Tire">

<Summary>Better known for making rubber seals for NASA, Hutchinson is the first company to get airless bicycle tires right. The Serenity consists of a solid tube-like core made from a foam-type material, and</Summary>

<Page pagenum="34"/>

<Article refid="a1948316537"/>

</TocEntry>

</TOC> </ReplicaMap>

---------------------------------------------------------------


Still...all I really need to do is to have a link that 'views' an image so it is zoomable. If there's a simple way to do that then I'd be happy.
Thanks,
-JTT

[Jellby]

Hmm... This ReplicaMap stuff is not XHTML, and is not defined anywhere in the ePUB spec. It must be some proprietary extension of Adobe or B&N or HP (and I don't find any reference to it in the web). How does the OPF file look like? It must be defining fallback items for this ReplicaMap (meaning a reader will use the ReplicaMap if it knows what to do with it, otherwise it will use the fallback, which should be normal XHTML content).

[jttraverse]

It occurs to me that if you get zoomable images when they're loaded by this ReplicaMap file, then why can't I have a link in my book that calls a similar file to display my images so they are also zoomable? Sounds like it should work, but I haven't tried hacking it together yet.

[jttraverse]

Sorry for leaving the above URL as an active link if that's not allowed...I forgot to switch it to simple text. My bad..

[Jellby]

The "replicaMap.xml" file is not referred to anywhere, it's not even in the manifest. I guess there's some code in the reader that reads it as a series of pictures, and uses the picture displayer instead of the ePUB renderer. Is the picture-based version searchable (it might be, given that replicaMap.xml has references to the text files)? Does the "classic" Nook work the same?

The ePUB renderer, however, is just Adobe's code, which does not provide image zooming. I'm afraid I can't help further, since I don't have a Nook, and I've never been able to get zoomable pictures with ADE (though I haven't tried too hard).

[jharker]

Thanks for the sample!

Yes, now that I look at it I see what you mean. I note a few things:

1. The images used in normal ePub mode are selected illustrations from the magazine, rendered at lower resolution.
2. The "full page" images contain the same illustrations but usually at much higher resolution.

So all things being equal, you should see more detail in the "full page" versions.

I opened this file in iBooks on my iPad and got the normal ePub version and I was able to zoom all of the illustrations. However, the ePub illustrations have such limited detail that zooming was kind of pointless.

If you view the normal ePub version in any other reader, image zoomability will depend entirely on the features of that reader. As Jellby said, any reader app based on ADE will not support image zooming. Your EVO's reader app presumably also does not support image zoom.

Regarding the ReplicaMap version, this seems to be a special feature specific to the Nook. It's not in the ePub spec, and iBooks does nothing with it. I suspect that the Nook is just opening the images with the image browser rather than the ePub viewer. This would explain the zoomability.

Anyway, the practical upshot of this is that zooming images in normal ePubs is apparently not supported on the Nook. If you want to zoom your own books on Nook, you're going to have to create full-page static layout images and hack ReplicaMap. Simply embedding images in ePub probably won't work.

[jttraverse]

Thanks for all the help. The Nook is a handy little device, but it's frustrating that the designers/developers would use a default reader that doesn't allow zooming. (Jharker, I'm actually very pleased to hear that reading the mag in iBooks -did- allow zooming of the images embedded in it..that's great to know).
I read recently that the next Android update for the Nook (2.2 I think) may well turn it into a full-blown Android tablet and give greater access to the Market. Maybe another reader app will support zooming, or some update will let the default reader support it.

Still, since this ReplicaMap has some coding that does generate zoomable images from inside the ePub file, I'm hoping there is a way to use some of the code in there to fire up zoomable images called from inside the book itself. I'll let you know if I can get it to work (maybe installing a different reader app would resolve the whole mess..duh).
Thanks..
-JTT

[wallcraft]

Liz Castro has a new post on Expandable Photo Blocks in iBooks on iPad. This is similar to what jttraverse was originally looking for, although there is no mention of pinch-to-zoom. This looks really nice, but it is somewhat iBooks specific. This layout does not work well in Windows ADE but it does seem to work with mobile ADE, see the screenshot from Sony Reader Library, except with no click to zoom.