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:

Quote:

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

Quote:

Originally Posted by Tokage

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!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Linking MS-Word document in epub	surendraps	Writers' Corner	0	11-10-2010 02:42 AM
iBooks - ePub - Linking Bug	lcoleman79	Apple Devices	2	06-30-2010 11:06 AM
Help - epub files too large for Stanza?	Nonstickron	Calibre	2	05-17-2010 10:47 PM
Don't see all pictures in large epub	liryc13	Sigil	1	12-13-2009 04:03 PM
Linking ePub files to eachother	netman49	ePub	2	09-19-2009 05:19 AM

06-29-2011, 09:43 AM	#2
Tokage Junior Member Posts: 2 Karma: 500 Join Date: Jun 2011 Device: iPad, Kindle	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> ..

06-29-2011, 08:31 PM	#4
Tokage Junior Member Posts: 2 Karma: 500 Join Date: Jun 2011 Device: iPad, Kindle	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"/>

06-30-2011, 02:24 PM	#5
SamL I mess around with Epubs Posts: 82 Karma: 1566 Join Date: Mar 2011 Location: Cambridge, MA Device: mac, ipad, nook, kindle	Wow thank you so much! Just tried this and it worked perfectly!

Advert

Advert