I want to convert HTML5 to magazine app on iPad/Android/Amazon. I need to develop a Thumbnail slider preview for each page, so that people can pre-view and jump to other pages in the magazine. Similar to the slider used in Newstand magazines.
Requirement:
1. A lightbox with thumbnails inside.
2. Lightbox should appear on the bottom of each page if the user taps the bottom half of the page. (is double tap functionality possible?)
3. Lightbox disappears if user drags it down, or taps again on magazine page.
4. User can scroll thumbnails accross left and right when lightbox is in [banner mode].
5. The thumbnails inside the lightbox are links to other pages: If user clicks on thumbnail the lightbox closes, and the current page changes to the selected page.
6. Lighbox may contain 100+ thumbnails. It should only load when the user taps on the webpage (I worry if it's permanently loaded into memory that it will slow down the App.)
6b. If lightbox in banner mode. The magazine must know the current page, and start by showing the equivalent thumbnail in the middle. The user can then scroll to any thumbnail they want.
Full screen Mode:
7. The user can expand the lightbox banner by dragging up the page to make a full screen mode. In full screen mode as many thumbnails are displayed on the page as possible.
When in full screen mode user has 3 options
a. Shrinks the lightbox down to a banner size by dragging down the page to [banner mode]
b. Scroll across to reveal more thumbnails (if all don't fit)
c. Close lightbox by clicking [x] button
d. If user selects a thumbnail, then lightbox should close and current page navigates to the page corresponding the chosen thumbnail.
8. Navigation bar must adjust if orientation on ipad is changed to landscape or portrait
Considerations
1. This solution doesn't have to be a light box. Do you have a better idea for a chapter slider ?
2. I'm worried that the app. will be slow if the thumbnail slider is pre-loaded into memory at all times. It should only be in memory when opened by the user.
3. We need an easy way to be able to add / remove thumbnails to the lightbox relatively easily.
IMPORTANT
1. This solution will be used for many different magazines which use the HTML format like the file attached.
2. The solution needs to be easily adaptable to other sites with similar file structures to the one attached.
Once create solution, and we are happy with the way it functions we need you to show us how to apply it to any website made in the structure attached.
3. Lightbox must automatically adjust to fit pages designed in different sizes. Eg the page dimensions of the magazine may vary sometimes. Some are specifically designed for ipad, others are designed in traditional magazine dimensions.
The exact dimensions of the banner and size of the thumbnails to be determined.
I've attached examples of what the thumbnail slider should look like when in banner mode.