View Full Version : Linking large JPGs in an Epub


SamL
06-22-2011, 03:33 PM
For refrence, I am doing this on an iPad.

In my epub I have a display image in the text. I would like the user to be able to click on it, and have it display larger, that you could zoom a little in to. To do this I am using this code:

<a href="images/PictureLarge.jpg" ><img src="images/PictureSmall"/></a>

So the smaller picture (about 600px wide) will display on the page. Even thought its the smaller of the two it still takes up almost the entire page.

When you click the image on the page, the larger image (2000px wide) opens up.

The problem I am having is that my image is wider then it is tall (landscape.) When the image opens it doesn't fit correctly to the screen, so you have to scroll left to right.

I've tried making the image a portrait size, with some white space underneath, but then it shrinks down to about 75% of the screen size. So I can zoom in to it like I want, but the width doesn't fill the screen (only about 3/4 of it.)

Is there something I can put in the code so the image will fit to the screen correctly? It is either too wide, or not wide enough. I really don't understand why it is doing this.

Any help is greatly appreciated.

Thanks

Tokage
06-29-2011, 09:43 AM
Hi,

Instead of linking directly to the large picture:
<a href="images/PictureLarge.jpg" ><img src="images/PictureSmall"/></a>

perhaps you could link another xhtml page containing the large image:

<a href="PictureLarge.xhtml"><img src="images/PictureSmall"/></a>

Then PictureLarge.xhtml would be something like:
..
<body>
<img src="images/PictureLarge.jpg" width="100%"/>
</body>
..

SamL
06-29-2011, 03:27 PM
Hi,

Instead of linking directly to the large picture:
<a href="images/PictureLarge.jpg" ><img src="images/PictureSmall"/></a>

perhaps you could link another xhtml page containing the large image:

<a href="PictureLarge.xhtml"><img src="images/PictureSmall"/></a>

Then PictureLarge.xhtml would be something like:
..
<body>
<img src="images/PictureLarge.jpg" width="100%"/>
</body>
..


That's actually a great idea. Is it possible to have xhtml files that are "hidden"? Is there some way I can not include them in the "spine" part of the opf, so they will only show up when I click the image link?

Tokage
06-29-2011, 08:31 PM
Hi, yes. In the spine, you use the "linear" attribute to indicate that. For example:

In the manifest:
<item id="LargePicture" href="LargePicture.xhtml" media-type="application/xhtml+xml"/>

Then in the spine:
<itemref idref="LargePicture" linear="no"/>

SamL
06-30-2011, 02:24 PM
Wow thank you so much! Just tried this and it worked perfectly!