Turn_JS-ToolbarResponsibility v3

##now its reflect and mousewheel include

Turn_js extension

I use the very great turn.js script to show my pdf files. It look's great! But i'm missing some features.

it includes:
• Toolbar(optional)
• Responsibility(optional)
• since v2 you can scroll with mousewheel to change sites, when the mouse is over the pdf book(optional)
• since v3 you can insert a reflect. It needs to include html2canvas!

Please let me know it, if you use it.

So i wrote a script to easily create a toolbar and make the pdf-book responsibility.

Toolbar includes:

• Home-Button: go to first page
• Download-Button: download the pdf file
• Preview: go one site back
• Next: go to next site
• Zoom in: zoom into site
• Zoom out: zoom out of site
• Zoom default: set the pdf-book zoom default
• Fullscreen: change view to fullscreen
• Move: move the pdf. It's a really good possibility to move the site, during zoom-in
• Move-default: set the pdf-book to default position, if you loos controll of move.

I use the great turn_js function/events/methods. Really greate work!

Responsibility: The function change the pdf-book size.

How it works:
• The parent div can be set with a percentage value, like css. So it's full responibility. You can create it easy via html. see the example on the bottom of the page
• The function get the WIDTH of the parent div.
• Set the pdf-book width to the parent WIDTH size
• Load the first pdf-site (in the background) in a object and get the size(width, height).
• Calculate the Site aspect-ratio
• Calculate the pdf-book size HEIGHT in ratio to the pdf-book WIDTH(which is the same Width like the parent div)
• Set pdf-book Width and Height.

Use it:

use the code from turn.js to basically inject the pdf-function. You can get more infos in the turn.js Documentation

jQuery("#yourID").turn({
     width: 400,
height: 300,
autoCenter: true,
});

Now it would turn your html dom Element to a pdf-book view. Now it's time to creeate a toolbar and fit it to the parent div.

You can use two different methods:

###Method 1- To search the full site for all PDF-Books and create the same toolbar and more: All parameters can be set to true or false. BUT: display can only be set to "single" or "double". To get more infos look at the turn.js documentation "display"

controlls_for_all_books(resposive_ratio, mousewheel_scroll, display, slider, bt_options, home, download, prev, next, zoom_in, zoom_out, zoom_default, fullscreen, reflection, tooltip, color, color_hover )

###Method 2- Set the pdf-book. Use the ID to select the book. All parameters can be set to true or false. BUT: display can only be set to "single" or "double". To get more infos look at the turn.js documentation "display"

controlls_for_book(ID, responsive_ratio, mousewheel_scroll, display, slider, bt_options, home, download, prev, next, zoom_in, zoom_out, zoom_default, fullscreen, reflection, tooltip, color, color_hover)

###Example

<div style="width:90%; //Your responsive width of the parent"><div id="yourID" class="turn_js ui-flipbook" data-pdf-src="path_to_the_pdf_file">
   <div class="pdf_site"  style="background-image:url(path_to_site_1_jpg);"></div>
   <div class="pdf_site"  style="background-image:url(path_to_site_2_jpg);"></div>
   <div class="pdf_site"  style="background-image:url(path_to_site_3_jpg);"></div>
   <div class="pdf_site"  style="background-image:url(path_to_site_1_jpg);"></div>
</div> 
jQuery(document).ready(function() {
//controlls_for_all_books(resposive_ratio, mousewheel_scroll, display, slider, bt_options, home, download, prev, next, zoom_in, zoom_out, zoom_default, fullscreen, reflection, tooltip, color, color_hover ){    
ID = "your id" 
display = "singel" or "double"
color = rgb, or something else (string)
all other parameters can be: true ord false

Style it easy with css, for example:

.bt-options {
	width: 90% !important;
	border-radius: 20px;
	background-color:#f4f4f4;
	padding-bottom:1%;
	box-shadow: 0px 0px 8px 0px #414141;
} 
   
.bt-options i{
	color:#80ba33;
	font-size: 2em;
	margin:1%;
	text-shadow: 1px 1px 1px black;
}
.bt-options i:hover{
	color:black;
}
.bt-options a:hover {
	text-decoration:none;
}

I use some js libraries/scripts:
jquery.min.js
jquery.ui.touch-punch.js
jquery-ui.min.js
html2canvas.js

TURN_JS FILES:
hash.js
scissor.js
turn.html4.js
turn.js
zoom.js

MY script:
my_turn_js.js

and the following script from another github user, to make draggable on smartphones jquery.ui.touch-punch.js

A big thank to the developer from turn.js and to all Github users who made their script available

Demo: Demo