Looking for a 'zoom'-function

Simbul / baker

The HTML5 ebook framework to publish interactive books & magazines on iPad & iPhone using simply open web standards

http://bakerframework.com

1.53k stars 378 forks source link

Looking for a 'zoom'-function #162

Closed danielbenjamins closed 12 years ago

danielbenjamins commented 13 years ago

I'm looking for a 'zoom'-function which can be used in Baker, preferred without JavaScript.

At the moment I'm experimenting with the zoomed content on it's own HTML-page in a subfolder called 'zoom'. It's working nice and quick to display content full screen but it messes up the pagination/swiping.

For example:

HTML-file 000.html (book/root folder) shows a thumbnail which links to HTML-file zoom.html (book/zoom/zoom.html)
After zoom.html is displayed, you can swipe forward to 001.html (should not as it's not in the zoom-folder)
When you swipe back, a black page is displayed and you can't go back to 001.html

I tried Fancybox before, but it's full of JS and support for older and other browsers then Safari Mobile. This makes it very complicated to implement and slow as well.

folletto commented 13 years ago

Uhm could you explain a little better the kind of behaviour you're looking for? :)

danielbenjamins commented 13 years ago

Yeah sure: I'm looking for a simple way to create a zoom/enlarge function. I'd like to put a thumbnail on a page and when you click it, the larger image will be displayed. That's all :)

folletto commented 13 years ago

Ahhh I was confused by "preferred without JavaScript"... because well, without JavaScript I think we have a problem. :P

However I think that you might try all the alternative Lightbox and Thickbox and such you can find around, they should do the job... I think it's mostly a matter to try finding the one that is good enough for use on Mobile Safari. :)

danielbenjamins commented 13 years ago

Yeah I tried a lot of lightboxes and none of them seemed to work good in both portrait and landscape mode. Also some of them conflicted with jQuery (used in Laker). The best until now is Fancybox (as mentioned before), but it's quite heavy and doesn't display full screen.

After trying a lot of lightboxes I thought about using a separate HTLM-page and this is working great, especially when you want to display an image full screen. The only problem is, it's messing up the pagination because (I think) you have to use subfolders. When you put the HTML-pages with enlarged content in the root folder, they become part of the normal pages which is not good :)

folletto commented 13 years ago

I think it's because Baker still keeps the sequence of pages, so if you try to change by hand the page you're still in that sequence. :)

Did you try also native jQuery tools like:

danielbenjamins commented 13 years ago

Haha, yeah I almost tried them all :) Most of them don't work properly in a book with both portrait and landscape mode and conflict with the JS used in Laker. But the most disappointing is that none of them support full bleed/screen :) Well, let's look further and hopefully I can find a better solution. Otherwise I'll stick to Fancybox...

Virtualsweden commented 13 years ago

Adobe and several other magazines like the Zinio has doubleclick and pinch to zoom in on text. Is this diffucult to accomplish? Also if it is possible to add a button to bring up the Index instead of DoubleClick?

folletto commented 13 years ago

Nope: having zoom off is a default behavior to create easier to use experiences for the reader (Adobe doesn't do that by default either, like many of good books and magazines. Zinio does that but it's because its magazines aren't made for iPad, they are just scans).

If you really need it and you understand the consequences, just turn on the zoomable flag in book.json. :) https://github.com/Simbul/baker/wiki/hpub-specification

danielbenjamins commented 13 years ago

I found an awesome jQuery plugin which is very light and very quick: o3Enlargebox. Just click on a thumbnail and a bigger image appears without fancy (and useless :)) shadows, close buttons, etc. Click again and it disappears.

The only problem at the moment is, that when you read in portrait mode, enlarged the image and then rotate the iPad to landscape, the box keeps its portrait dimensions. When you close the box and reopen it, the dimensions are OK.

Simbul commented 12 years ago

Have you managed to solve the issue with the orientation change? If you did, a comment explaining how you did that would be very welcome :)

danielbenjamins commented 12 years ago

No, I asked the programmer of the plugin about it, and he didn't look into it yet :)