Documentation

Current Release: Beta 5.0

documentationFeatures:

  • This open source universal Comic Book viewer is compatible with Google Chrome, Microsoft Explorer, Firefox, Safari and Mobile Safari (iPad). It hasn’t been tested yet on an Android based tablet.
  • Easy to configure and publish to the web. Minimum knowledge of HTML code is needed.
  • Full Screen Mode on the PC
  • The control bar can be hidden by the user. It automatically auto hides (in about 8 seconds) on the iPad when the Comic Book is started. It also auto hides in full screen mode on the PC.
  • Scrollable Thumbnail page index menu.
  • Chapters Main Menu
  • User configurable transitions between pages, the transition duration can be specified by the author. Available transitions: fade, puff, shake, drop, blind, pulsate, pushh, and pushv)
  • About Pop-up – content is configurable by the author.
  • Auto play mode configurable on the fly by the user. The auto play delay can be specified by the user.
  • Preloading Indicator.
  • Page counter.
  • Navigation controls: Previous page, next page, first page and last page. Swipe navigation (previous and next page) on the iPad
  • User friendly help screen.
  • Easy to customize screen buttons.
  • Social Network Sharing. A “Share this Comic Book” button  is located on the navigation bar an allows readers to share the Comic Book on all major Social Networks, including: Facebook, Google+, Twitter, LinkedIn, StumbleUpon, Reddit, Delicious, Digg and My Space.
  • “Add To Home Screen” feature available on the iPad. The iPad WebApp icon can be customized.
The Yanapax Comic Book Viewer on the iPad:

Installation Instructions:

  • Extract the content of the zip file to your hard disk.
  • The ZIP package contains the folder “Yanapax“.
  • Unzip this file on your hard drive and rename the folder according to your preference.
  • File Organization:
    • The ZIP file contains two folders on the root: gui and ComicBook1 and three files: index.html, menu.html and pc_viewer.html
    • If you are going to publish more than one comic book under the same menu, duplicate folder “ComicBook1″ and rename it “ComicBook2. If you need more, follow the same logic.
    • You can customize the main menu of your comic book by modifying the HTML file: menu.html.

Configuration Instructions:

  • You will customize your comic book by modifying some of the files contained in the folder “ComicBook1″ and by adding your own comic book images.
  • The ComicBook1 folder is organized like this:
    • The “about” folder – Contains all the resources for the about page.
    • The “addtohome” folder – Contains the code for the “Add to Home” Feature for the iPad. This code was written by Matteo Spinelli from cubiq.org.
    • The “css” folder – contains all the CSS files from jQuery and the custom mainstyles.css file.
    • The “gui” folder – contains all the custom graphical interface images for the comic book viewer.
    • The”js” folder – contains all the JavaScript code, including jQuery files, the custom functions.js and the settings.js files
    • The “pages” folder – contains all the main images (pages) of the comic book.
    • The “thumbs” folder – contains all the thumbnail images of the comic book.
    • The index.html file – this is the main index file of the comic book viewer.
  • Each page of your comic book is an image file. Size each image to a resolution of 2048 X 1536 pixels. Copy all your image files to the “pages” folder. Make sure to name the first image in the sequence: “cover.jpg
  • Make a thumbnail of each page with a resolution of 134 X 101 pixels and copy them to the “thumbs” folder. The name of each thumbnail needs to have the same name as the corresponding page. If a page is named “relaunch_01_08.jpg”, the corresponding thumbnail file has to be named: “relaunch_01_08.jpg”.
  • Open the “settings.js” file located in the “js” folder using a text editor program.
  • Type your comic book title in the variable ComicBookTitle.
  • Enter the sequence of page filenames in the variable “PageSequence” in the order you want them to show. The first two items in the list need to remain the same: “EMPTY” and “cover.jpg“.
  • If you like to use transitions between your pages, the variable jQuery.fx.off needs to remain false. If you like to disable all the transitions, set this variable to true.
  • You can use transitions for each page and you can choose between: “fade“, “puff“, “shake“, “drop“, “blind“, and “pulsate“. There are two new transition effects starting with Beta 5.0 of the Yanapax Viewer: “pushh” (horizontal push) and “pushv” (vertical push). These two transitions will automatically reverse direction if you navigate in the opposite direction. You specify each transition in the variable “PageTransitions“. Each position corresponds to each page in the “PageSequence” variable. The first position must remain as empty.
  • You can modify the duration of the transition delay between pages by changing the value of the variable “PageDelays“. In the list, each position corresponds to each page in the “PageSequence” variable. The first position must remain as empty.
  • You can customize the duration of each transition by modifying the values in the variable “PageDelays“. 1 second is equal to 1000. Increase the value to increase the duration. For example: 2000 is about 2 seconds. 500 is about half a second.
  • You can also customize the language for the Page counter by modifying the variables “pageintro” and “pagemiddle“.
  • Remember to save the “settings.js” file after you make all the changes.
  • You can also set the comic book to automatically auto play by default by setting the “AutoPlay” variable to true. We recommend to leave this variable set to false and allow the user to set this feature. Turning this feature on is ideal for kiosk setups.

Customizing the iPad icon:

  • Customize the iPad icon: You can customize the icon that appears on the iPad when the user chooses to add the page to the Home Screen. Modify the image “customicon.png” located in the “gui” folder. The icon image has a resolution of 57 X 57 pixels.
Custom Icon on the iPad Home Screen:

Customizing the About page:

  • Customize the about page: Modify the file “index.html” located in the “about” folder.

Customizing the Interface buttons:

  •  Modify the button images located in the “gui” folder. The interface buttons are named: firstbtn.png, fullscreenbtn.png, helpbtn.png, hidebtn.png, infobtn.png, lastbtn.png, mainmenubtn.png, menubtn.png, nextbtn.png, previousbtn.png, restorebtn.png, and settingsbtn.png. A PSD file containing the source interface buttons is provided for your convenience. The file is also located in the “gui folder” and it is named: “yanapax_bar.psd“.

Customizing Multiple Chapters:

  • Create a second chapter: Duplicate the “ComicBook1″ folder and rename it “ComicBook2″.
  • Customize your second chapter the same way you customize the first comic book.
  • Edit the “menu.html” file. Add a new thumbnail and chapter description in a table cell.

How to use the Comic Viewer:

Interface Buttons:

  • Hide Control Bar Button: It is used to hide the “Control Bar”. To show the control bar, click on the bottom of the screen.
  • Information Button: It is used to display information about the comic book.
  • Index Button: It is used to display a scrolling Menu that shows a thumbnail image for each of the pages that makes the Comic Book. Click on a thumbnail to navigate to a specific page.
  • The Menu Button: Allows you to navigate to the Chapters Menu.
  • Help Button: It is used to display the help overlay screen.
  • Back Button: It is used to navigate to the previous page in the sequence. You can also click on the left portion of the page to navigate to the previous page.
  • Next Button: It is used to navigate to the following page in the sequence. You can also click on the right portion of the page to navigate to the following page.
  • First Page Button: It is used to go to the first page in the Comic Book
  • Last page Button: It is used to go to the last page of the Comic Book.
  • Share this Comic Book Button: Allows readers to share the Comic Book on all major Social Networks, including: Facebook, Google+, Twitter, LinkedIn, StumbleUpon, Reddit, Delicious, Digg and My Space.
Example of the Control Bar:

Known Issues:

  • IE7 and IE8 do not support transitions.
  • Reported issues: View here


Share

Open Source Comic Book Viewer