Установка
Скачиваем файлы.
Загружаем файлы в файловый менеджер.
И вставляем этот код в конструктор, или отделённую страницу сайта.
Code
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<style>
.js #features {
margin-left: -12000px; width: 100%;
}
</style>
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="http://3.s3.envato.com/files/20765626/css/style.css?v=2">
<link rel="stylesheet" href="/css/wow_book.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/css/preview.css">
<script src="/js/less-1.0.41.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li><a id='first' href="#" title='Назад на 2 листа' >Назад на 2 листа</a></li>
<li><a id='back' href="#" title='Назад' >Назад</a></li>
<li><a id='next' href="#" title='Вперед'>Вперед</a></li>
<li><a id='last' href="#" title='Вперед на 2 странице' >Вперед на 2 странице</a></li>
<li><a id='zoomin' href="#" title='Приблизить' >Приблизить</a></li>
<li><a id='zoomout' href="#" title='Уменьшить' >Уменьшить</a></li>
<li><a id='slideshow' href="#" title='Авто перелистывание' > Авто перелистывание </a></li>
</ul>
</nav>
<div id="main">
<img id='click_to_open' src="/images/click_to_open.png" alt='click to open' />
<div id='features'>
<div id='cover'>
</div>
<div class='feature pagefx hardpage'>
<p class='subtitle'>Листать страницы эффективно</p>
<h1>Легко и проста</h1>
<p>Этот эффект переворачивает страницу, как в твердом переплете.</p>
<p> Вы можете сделать свою страницу...книгу
</p>
<br/><br/>
<h1>Основное!</h1>
<p>В одном модуле используется разные скрипты.</p>
<p>Так как он не использует CSS преобразований, он используется на странице со вспышкой или в качестве запасного варианта на старых браузерах.</p>
</div>
<div class='feature pagefx softpage'>
<p class='subtitle'>Покадрового эффекта</p>
<h1>Softpage</h1>
<p>
Этот эффект Softpages складки, как обычный лист бумаги.
</p>
<p>
Перетащите край страницы и посмотреть, как она складывается хорошо.
</p>
</div>
<div class='feature easy'>
<h1>EASY</h1>
<p>
Create your content with the skills and tools you already know,
like HTML, Javascript and CSS.
</p>
</div>
<div class='feature easy'>
<div class='doc js'>{js}</div>
<div class='doc html'><html></div>
<div class='doc css'>CSS</div>
</div>
<div class='feature design'>
<h1>DESIGN</h1>
<div class='subtitle'>так, как вы привыкли</div>
</div>
<div class='feature design'>
<p>
Пусть книга вписывается в дизайн вашего сайта, а не наоборот.
</p>
</div>
<div id='zoom-feature' class='feature'>
<h1>Увеличить</h1>
</div>
<div id='zoom-feature2' class='feature'>
<p>Функция масштабирования позволяет пользователям увеличивать содержание в восхищаются все минимумом деталей.</p>
<p>Настраиваемый, несколько уровней масштабирования.</p>
<p>Дизайн среды: контролировать размер и положение книги при увеличении масштаба.</p>
</div>
<div class='deeplinking feature'>
<h1>Глубокая связь</h1>
<p>
Создать ссылку на любой странице, и они будут работать, как ожидается, как и <a href='http://zthemes.3dn.ru/' target="_blank" >этого</a> (открывается в новом окне).
</p>
<p>
wowBook ??обновления адресной строке браузера, чтобы указать на текущей странице, что позволяет пользователю закладки, что он видит и вернуться позже.
</p>
</div>
<div class='deeplinking feature'>
<h1>Задняя опора кнопку</h1>
<p>
wowBook ??не нарушает кнопку назад вашего браузера.
</p>
<p style="text-align: center">
<img src="/images/back.png" />
</p>
</div>
<div class='feature numbering'>
<h1>Автоматическая нумерация страниц</h1>
<p>
Нумерация страниц вашей книги скучно
, Особенно в процессе разработки. Давайте wowBook ??сделает это за вас.
</p>
<p>
Выберите, где начинаются и где заканчивается.
</p>
<p>
Настроить внешний вид и положение с помощью CSS.
</p>
</div>
<div class='feature slideshow'>
<h1>Слайд-шоу</h1>
<p>Поверните вашу книгу в режиме слайд-шоу.</p>
<p>Вы можете выбрать, если вы хотите паузу при наведении курсора мыши тоже.</p>
<a href='http://mediadesign.deviantart.com'><img src='/images/projector.png' alt='projector' /></a>
</div>
<div class='feature flash'>
<h1>FLASH</h1>
<p>Это можно использовать флэш в ваших книгах, но вы будете ограничены в "основной эффект переворота" на странице, которые имеют объект вспышкой (и только на этой странице).</p>
<p>В настоящее время большинство браузеров не поддерживают и CSS преобразования используется wowbook применительно к объекту флэш-памяти.</p>
</div>
<div class='feature wowbook-basic-page flash-demo'>
<object width="350" height="180" type="application/x-shockwave-flash" data="http://3.s3.envato.com/files/18725871/preview.swf" id="large_item_preview_container">
<param name="base" value="http://3.s3.envato.com/files/18725871/">
<param name="wmode" value="opaque">
</object>
</div>
<div class='feature more'>
<h1>and MORE</h1>
</div>
<div class='feature more'>
<ul>
<li>поддержка браузеров : <img src='/images/browser_logos-32.png' alt='browser logos'/></li>
<li>навигация с помощью клавиатуры</li>
<li>Колесико навигации / зумом</li>
<li>Играть переворота звук</li>
<li>документация</li>
<li>исходный код</li>
<li>Примеры</li>
<li>Богатые API</li>
</ul>
</div>
</div> <!-- features -->
</div>
<footer>
</footer>
</div> <!--! end of #container -->
</div>
<script type="text/javascript" src="http://3.s3.envato.com/files/20765626/./js/libs/jquery-1.7.1.min.js"></script>
<sscript src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></sscript>
<script>// !window.jQuery && document.write(unescape('%3Cscript src="http://3.s3.envato.com/files/20765626/js/libs/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="http://3.s3.envato.com/files/20765626/./wow_book/wow_book.min.js"></script>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#features').wowBook({
height : 500
,width : 800
,centeredWhenClosed : true
,hardcovers : true
,turnPageDuration : 1000
,numberedPages : [1,-2]
,transparentPages : true
,controls : {
zoomIn : '#zoomin',
zoomOut : '#zoomout',
next : '#next',
back : '#back',
first : '#first',
last : '#last',
slideShow : '#slideshow'
},
}).css({'display':'none', 'margin':'auto'}).fadeIn(1000);
$("#cover").click(function(){
$.wowBook("#features").advance();
});
});
</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="http://3.s3.envato.com/files/20765626/js/plugins.js"></script>
<script src="http://3.s3.envato.com/files/20765626/js/script.js"></script>
<!-- end concatenated and minified scripts-->
<!--[if lt IE 7 ]>
<script src="/js/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images </script>
<![endif]-->
<!-- <footer> -->
<br/>
<table border="0" cellpadding="4" cellspacing="0" width="100%" style="border:1px solid #A9B8C2;">
<tr><td align="center" style="background:#F4F4F4;">[COPYRIGHT]</td></tr>
<tr><td align="center" style="background:#F4F4F4;">$POWERED_BY$</td></tr>
</table>
<!-- </footer> -->
</body>
</html>
<!-- <popup> -->
<table border="0" cellpadding="2" cellspacing="1" style="background:#A9B8C2;" width="100%">
<tr><td style="background:#D4DFF7;" align="center"><b>[TITLE]</b></td></tr>
<tr><td align="center" style="background:#F4F4F4;padding:5px;">[BODY]</td></tr>
</table>
<!-- </popup> -->