Image zoom problem in iBooks

jharker · 09-13-2010, 06:16 PM

This topic was originally posted by whbenson in the Apple Devices forum, but I thought it might be a better fit here. I also wrote a short blog post about this issue.

In iBooks, you are supposed to be able to double-tap on an image in order to zoom in on it. This works for images that are simply embedded.

If you want to set images to float left or right so that text wraps around them, and at the same time control the size of the image, this is possible by wrapping the image in a div and controlling the properties of the div:

Code:

<div style="float: left; width: 42%">
<img style="width: 100%" src="image.png" />
</div>

But if you do this, you can't zoom in on the image any more. Instead, double-clicking on an image simply selects a short chunk of nearby text.

Any ideas on how to get around this problem?

Toxaris · 09-14-2010, 05:44 AM

Ask Apple for an update? Apparently they don't support this feature when an image is inside a <div> or perhaps the 'float' is the culprit.

whbenson · 09-20-2010, 07:51 PM

I appreciate your confirming and following up on this issue. The zoom is an especially nice feature because it effortlessly centers and fills the screen and lets you enlarge still further. I was hoping to put photos, notes, diagrams, etc. in a sidebar-like region and let readers zoom if they wanted to see them more clearly.

After trying various ideas without success, I've settled on interrupting the text with what could be called an image bar: a narrow horizontal strip the width of the screen via a div with height 10%, say, and placing the images inside - which scrunches the images way down, but leaves just enough of a target to double tap on.

This does work in iBooks, though there's no scrunching in Sigil. Haven't tried it elsewhere.

Adjust · 09-21-2010, 12:54 AM

It works ok for me.
I have floating images with textwrap and can double tap on it to zoom in and back out. No problem.

xhtml code:

Code:

<p class="imageright"><img src="images/Imagename_fmt.jpeg" alt="Imagename.jpg" /></p>

CSS code

Code:

p.imageright {
    line-height: 1.42em;
    font-size: 1em;
    margin-bottom: 0.5em;
    margin-top: .5em;
    text-indent: 0em;
    margin-right: 0.5em;
    margin-left: 0em;
    float: right;
    clear: right;
    text-align: right;
    font-weight: normal;
    font-style: normal;
    margin: 0 0.5em 0.5em 0;
    color: rgb(0,0,0);

whbenson · 09-23-2010, 06:52 PM

Thanks for your example. I tried it on the iPad and it does work there, though still no luck in iBooks on the iPod Touch (iOS4.1), where it would be the most useful.

jharker · 09-24-2010, 10:48 AM

Thanks for the example. I noticed that in your example you didn't specify the width of the image -- is this because you want the image to display at its true "natural" size on the screen?

In my case, I want images which have a high resolution but display in a small space, allowing the user who zooms in to truly see more detail.

Unfortunately, (as far as I know) in order to size images in iBooks you must put the <img> inside a <div> or similar wrapper, then size the <div>. Apparently iBooks ignores size specifications in <img>. (See Liz Castro's post here.)

Somehow, in these situations I end up with most of my images not zooming. Not sure why. I haven't worked on this issue for a while, but I'd still appreciate any suggestions or input.

whbenson · 10-02-2010, 07:41 PM

I've now been able to have such images zoom - on both iPod Touch and iPad - with the simple expedient of nesting a simple <div> directly inside the <body>. i.e. <body><div> ... </div></body>. Haven't tested this extensively, but it's worked with everything tried so far.

Another bit of iBooks lore I happened to discover, is that if you do something like
<a href="../Styles/Style0001.css">hit me</a>, touching the link yields a full screen image of the css text file, which you can spread and pan around as usual. This example from Sigil, and presumably works with any ordinary text file. Any ideas how to use this feature?

09-13-2010, 06:16 PM	#1
jharker Developer Posts: 345 Karma: 3473 Join Date: Apr 2007 Location: Brooklyn, NY, USA Device: iRex iLiad v1, Blackberry Tour, Kindle DX, iPad.	Image zoom problem in iBooks This topic was originally posted by whbenson in the Apple Devices forum, but I thought it might be a better fit here. I also wrote a short blog post about this issue. In iBooks, you are supposed to be able to double-tap on an image in order to zoom in on it. This works for images that are simply embedded. If you want to set images to float left or right so that text wraps around them, and at the same time control the size of the image, this is possible by wrapping the image in a div and controlling the properties of the div: Code: <div style="float: left; width: 42%"> <img style="width: 100%" src="image.png" /> </div> But if you do this, you can't zoom in on the image any more. Instead, double-clicking on an image simply selects a short chunk of nearby text. Any ideas on how to get around this problem?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
iPad EPUB for iBooks bckgrnd img problem	Hitch	Apple Devices	8	10-23-2010 09:29 PM
EPUB for iBooks bckgrnd img problem	Hitch	ePub	13	10-23-2010 09:27 PM
image zoom anomaly in iBooks	whbenson	Apple Devices	1	09-13-2010 10:51 AM
Image zoom / rotate with PocketBook 360 ?	spangen	PocketBook	0	06-10-2010 06:34 AM
iBooks, Table of Contents, Missing Cover image.	Daddy Warpig	Apple Devices	2	04-15-2010 10:09 AM

09-14-2010, 05:44 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Ask Apple for an update? Apparently they don't support this feature when an image is inside a <div> or perhaps the 'float' is the culprit.

09-20-2010, 07:51 PM	#3
whbenson Enthusiast Posts: 37 Karma: 493532 Join Date: May 2010 Device: ipad	I appreciate your confirming and following up on this issue. The zoom is an especially nice feature because it effortlessly centers and fills the screen and lets you enlarge still further. I was hoping to put photos, notes, diagrams, etc. in a sidebar-like region and let readers zoom if they wanted to see them more clearly. After trying various ideas without success, I've settled on interrupting the text with what could be called an image bar: a narrow horizontal strip the width of the screen via a div with height 10%, say, and placing the images inside - which scrunches the images way down, but leaves just enough of a target to double tap on. This does work in iBooks, though there's no scrunching in Sigil. Haven't tried it elsewhere.

09-23-2010, 06:52 PM	#5
whbenson Enthusiast Posts: 37 Karma: 493532 Join Date: May 2010 Device: ipad	Thanks for your example. I tried it on the iPad and it does work there, though still no luck in iBooks on the iPod Touch (iOS4.1), where it would be the most useful.

09-24-2010, 10:48 AM	#6
jharker Developer Posts: 345 Karma: 3473 Join Date: Apr 2007 Location: Brooklyn, NY, USA Device: iRex iLiad v1, Blackberry Tour, Kindle DX, iPad.	Thanks for the example. I noticed that in your example you didn't specify the width of the image -- is this because you want the image to display at its true "natural" size on the screen? In my case, I want images which have a high resolution but display in a small space, allowing the user who zooms in to truly see more detail. Unfortunately, (as far as I know) in order to size images in iBooks you must put the <img> inside a <div> or similar wrapper, then size the <div>. Apparently iBooks ignores size specifications in <img>. (See Liz Castro's post here.) Somehow, in these situations I end up with most of my images not zooming. Not sure why. I haven't worked on this issue for a while, but I'd still appreciate any suggestions or input.

10-02-2010, 07:41 PM	#7
whbenson Enthusiast Posts: 37 Karma: 493532 Join Date: May 2010 Device: ipad	I've now been able to have such images zoom - on both iPod Touch and iPad - with the simple expedient of nesting a simple <div> directly inside the <body>. i.e. <body><div> ... </div></body>. Haven't tested this extensively, but it's worked with everything tried so far. Another bit of iBooks lore I happened to discover, is that if you do something like <a href="../Styles/Style0001.css">hit me</a>, touching the link yields a full screen image of the css text file, which you can spread and pan around as usual. This example from Sigil, and presumably works with any ordinary text file. Any ideas how to use this feature?

Advert

Advert