View Full Version : Image slider in iBooks (NOT iBooks Author)


stevenc
06-29-2013, 03:59 PM
Hi, all,

Has anyone seen an image slider (or slideshow... where you can flip through images, such as via next/previous buttons) in an iBooks ePub file? I am specifically asking about iBooks not an iBooks Author made file.

I've been trying all morning to get this working. I have tried several different sliders out there. They work in Safari, but they do not fully work in iBooks. They will slide, but the other images won't show up. The first image is the only one that will load. If I use text instead of or in addition to images, then the text will show up on the subsequent slides.

As near as I can tell, there is an image loading issue.

I'd usually post my code in cases like this, but I've tried so many and none have worked that I figured it wasn't worth it.

Thanks in advance,
Steven

PageLab
06-30-2013, 01:51 PM
An "flowing ePUB" is not the best medium to do this, but you can can create an image slider inside a XTHML file with the linear="no" attribute, using CSS3.

See this example (http://www.pagelab.com.br/dropbox/image-slider-iBooks.epub).

mzmm
06-30-2013, 04:01 PM
i'd also not recommend doing this in a flowing layout, but with a fixed layout it would probably work fine.

i think a lot of the sliders you'll find online are probably over-engineered for use in an epub, and may have incompatibilities with the epub format. if you're familiar with javascript or jquery you could go through the core structures of the plugins you've already downloaded and then write your own based on that. the basics would be about 10 lines of code animating the visibility and css transitions.

stevenc
07-01-2013, 09:34 AM
Thank you, PageLab and mzmm, for the comments. And thank you, PageLab, for the sample. Unfortunately, I need to figure out how to do this inside a flowable e-book without needing to specify linear="no". PageLab, do you know if there is a technical limitation to doing this? As near as I can tell, iBooks is choosing not to load the additional images and as of yet I've found no way to force it to do so. mzmm, I certainly agree that using a slider found online would be over-engineered/over-kill, at this point I've merely been trying various ones just to see if there is one that will work inside iBooks. Again, my thanks to the both of you.

mzmm
07-01-2013, 12:10 PM
i was just playing around with this in jQuery and iBooks does (with flowing books anyway) have a quirky way of handling the .hide() and .show() methods. the initial states of elements appear to be enforced somehow (or iBooks is interfering with jQuery's data cache), so toggling display:none/display:block, for example, i couldn't get to work.

i did get the hide/show working by toggling a class that changes the visibility and position of the images, though.

hope that helps.

stevenc
07-01-2013, 12:15 PM
Thanks, mzmm! I will give the class-based approach a shot. Could you share what you've gotten working? (Completely understandable if that isn't possible, just thought it was worth asking.)

mzmm
07-01-2013, 12:38 PM
here's a link to a jquery tutorial instead: http://www.w3schools.com/jquery/

stevenc
07-01-2013, 12:41 PM
Thanks for the help!

PageLab
07-01-2013, 01:28 PM
Also, look for the iBookstore Asset Guide and example files at iTunes Connect. You will find a Javascript Library and guidance to do interactivity specific to iBooks.