Expandable Photo Blocks in iBooks on iPad

I am working on a project for a photographer that has a lot of beautiful photographs set up in tables. I've been trying to figure out how to get them to display all on the same iBooks page, AND shrink to a smaller width page, AND expand when I double-click them, all while not messing up the surrounding flowable text, so that the book can still be read.

I thought about using non-linear objects, and it almost works. And I also copied the use of maps and areas from the Discover travel series, but I realized that they only work when the iPad is held vertically. The map rectangles don't work when held horizontally. So that, while clever, was out.

But a combination of iBooks' new appreciation for page breaks along with the display:inline-block property, and a careful application of image sizing did the trick. If I do say so myself, it's quite lovely and I think would be an asset to any image-heavy ebook on the iPad, iPhone, or iTouch.

Here's what a block of photos looks like, both in vertical, and horizontal orientations of the iPad:




Then, the reader just has to double-click a photo to view the full size:


A second double-click returns them to the regular page.

The cool thing is that thanks to iBooks' support for page-break-inside, the photos stay together, and form a coherent and attractive block.

There are a number of things to keep in mind while coding.

1. Because iBooks doesn't support changing the size of an image directly, you have to enclose each img tag in a separate div. I gave each of these divs the class of "imgshrinker" since that's what they do.

The HTML code looks like this:
<div class="tablephoto">
    <div class="imgshrinker"><img src="images/sign.jpg" alt="" /></div><div class="imgshrinker"><img src="images/sitemarkers.jpg" alt="" /></div><br /><div class="imgshrinker"><img src="images/moreview.jpg" alt="" /></div><div class="imgshrinker"><img src="images/stones.jpg" alt="" /></div><br /><div class="imgshrinker"><img src="images/stone.jpg" alt="" /></div><div class="imgshrinker"><img src="images/housesite.jpg" alt="" /></div><br /><div class="imgshrinker"><img src="images/viewfromsite.jpg" alt=""/></div><div class="imgshrinker"><img src="images/wenttowoods.jpg" alt="" /></div>
</div>

Note that because I'm creating a grid of two columns and four rows I have nothing between the first two divs and a line break between the second and third. Nothing between photos three and four. Line break between four and five. And so on.

There is also a wrapper div for the entire table, with a class of "tablephoto". I'll use this to keep the photos together on the same page. (See step 3.)

2. Next, I use CSS to reduce the size of each img-containing div (the ones with class imgshrinker) to 47% of the width of the page (so that two photos will fit on each row). I add !important just in case. I then set the width of the img tags themselves to be 100% (of their parent element, which is the div set to 47%. The code looks like this:
 .imgshrinker {width:46% !important;
display:inline-block;padding: 1px}
.imgshrinker img {width: 100% !important}

3. I then add a bit of code to the CSS to keep the table together. I'll use the page-break-inside property, which iBooks 1.2 supports, despite its omission from Apple's guidelines.

.tablephoto {page-break-inside: avoid}

4. Also note that I cropped the photos to 1600 x 1200.This might seem excessive since in a table of two by four in a screen area about 600 pixels x 860 the largest width the image might need is about 300 pixels (half of 600) by 215 pixels (a quarter of 860). However, you want to use a larger image so that when the reader double-clicks it, it will fill the iPad screen. It's also important to choose a proportion that fits nicely in the table you create. For example, if you crop your photos to a portrait orientation, they won't work as well in a table shaped like mine.

Finally, Apple's guidelines suggest that photos be no larger than 2 million pixels (multiply height times width to get this figure).1600 x 1200 = 1,920,000 so I'm OK on that account. I also compressed them with JPEG low for this example so they wouldn't take up so much space, but that's up to you. (Apple suggests no more than 10mb of uncompressed image data per chapter.)

You can download the EPUB file to see the code for yourself. The photos are in chapter 2 on the third or fourth page. I have not epubchecked the file, so don't expect it to be totally clean!