[html]<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<style>
.booklet{
-moz-box-shadow:0px 0px 0px #fff!important;
-webkit-box-shadow:0px 0px 0px #fff!important;
box-shadow:0px 0px 0px #fff!important;
-moz-border-radius:10px!important;
-webkit-border-radius:10px!important;
border-radius:10px!important;
}
.booklet .b-wrap-left {
background:#fff url(https://i.ibb.co/d62jDjN/1.jpg) no-repeat top left!important;
}
.booklet .b-wrap-right {
background:#efefef url(https://i.ibb.co/b7WPpsc/2.jpg) no-repeat top left !important;
}
.booklet .b-counter {
bottom:13px!important;
position:absolute!important;
display:block!important;
width:80%!important;
text-align:center!important;
font-size:12px!important;
color:#000!important;
padding:5px 35px 0!important;
background:transparent!important;
opacity:0.8!important;
}
.book_wrapper{ margin-left: auto;
padding-top:50px!important;
width:860px!important;
height:620px!important;
position:relative!important;
background:transparent url(https://i.ibb.co/ngT2Xjb/2.png) no-repeat 28px 29px!important;
}
.book_wrapper h1{
color:#000 !important;
font-family: Underdog !important;
background:transparent!important;
font-size:18px!important;
}
.book_wrapper p{
line-height:120%!important;
text-indent: 20px!important;
font-size:16px!important;
color:#000!important;
font-family: Underdog!important;
margin:5px 5px 5px 15px!important;
}
r{
text-align:right!important;
}
.book_wrapper img{
margin:10px 170px 5px 15px!important;
padding:4px!important;
}
a#next_page_button,
a#prev_page_button{
display:none;
position:absolute;
width:36px;
height:40px;
cursor:pointer;
margin-top:-20px;
top:50%;
background:transparent url(https://i.ibb.co/4Sd8h8N/image.png) no-repeat 0px -40px;
}
a#prev_page_button{
left:-30px;
}
a#next_page_button{
right: -13px!important;
background-position:-41px -40px;
}
a#next_page_button:hover{
background-position:-41px 0px;
}
a#prev_page_button:hover{
background-position:0px 0px;
}
.loading{
width:160px!important;
height:56px!important;
position: absolute!important;
top:50%!important;
margin-top:-28px!important;
right:135px!important;
line-height:56px!important;
color:#000!important;
padding-left:60px!important;
font-size:15px!important;
background: #000 url(http://ruseller.com/lessons/les809/demo … loader.gif) no-repeat 10px 50%!important;
opacity: 0.7!important;
z-index:9999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Книга раскроется читателю через время...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div>
<h1>Придисловие ат автара</h1>
<p>Любой самый сильный из гоблинав всигда стримица к другой силе! И я, магущиствинный, мудрейший НИПРИВЗАЙДЕНИЙШИЙ чарадей Гуран Рыбашаман, ваистину ставшый сильнейшем магам, и велечайшым из сваих сабратьев нашол свой новый дар! Лучшый повар ва всем мири! В этай рукаписи вы прачитаете фкуснейшыя рецепты ат меня, а так же сможите удаставерится в маей великай мудрасти! </p>
</div>
<div>
<h1>Рыба с камышом</h1>
<p>Как ширако извесна, рыба - лучшая еда как для воинав, так и для магав. рыба вкусный и кишит витаменами, а каторых люди пастаянна ноют. Ваистену глупые существа, если они никак не могут панять, што рыба - самый вкусный! </p>
<p>Для пригатавленея рыбы с камышом, нам панадабица рыба. Взять можна любую, но будте астарожны, патамушта инагда рыба может решить сажрать ваш глупый слуга, если он пападаеца бальшой и зубастый. Аднака, сильный маг может сжеч глупый рыба и мертвый глупый слуга, штобы палучился Фаршырованый рыба! Тоже вкусный, но глупый слуга лучши сначала вымыть, а то патом будет балеть жывот.</p>
<p>Кагда вы паймали рыбу, вам нужин камыш. Кагда вы нашли камыш вам нужна проста абматать рыбу камышом и пажарить. Вкусна, быстра и палезна!</p>
</div>
<div>
<h1>Рыба с грибами</h1>
<p>Вкусный рыба - эта харашо, но лучше кагда еда еще и веселый, паэтаму я научу вас делать вкусный и веселый блюда для связи с духами! Для пригатавления нам нужын гриб! Бальшой и зеленый! Не в коим случаи не красный! Слуги каторые едят красный гриб быстра ламаюца и нада искать новый! А ат зеленый гриб всем весела и все танцуют. А еще духи приходят и гаварят как я харашо гатовлю. </p>
<p>Кагда у вас есть гриб и рыба, вы пихаити гриб в рыбу (не перипутай), и тагда варите рыбу. Можна чистеть чешею, но тагда на зубах не будет чешеи, а эта плоха, патамушта рыба вкусный весь.</p>
</div>
<div>
<h1>Масги рыбы</h1>
<p>Как мы помнем, рыба - лутшая еда. А штобы быть умный лучшая еда эта рыбы мосг. Все, кто ест рыбин мосг становятса умными. Не такими умными как я, но эта и не страшна, патамушта недастижыма. (Слуги умными не становятса, патамушта слуги тупые). Какгда вы ловите рыбу, можна атрубить ей башку и выкавырять масги, штобы сабрать их в кучу и сажрать, но эта для тех, кто любит сырое. Я фсегда беру гору масгов и мешаю в кателке, штобы ума была больше. Туда можна кинуть патраха рыбы, штобы была сытнее и вкуснее. </p>
<p>Жаль у рыб нет рук. Тагда можна была бы жрать рыб мышцы и станавица самый сильный. А так я проста самый умный.</p>
</div>
<div>
<h1>Кастяная мука. Из рыбы.</h1>
<p>В рыбе харашо все. И теперь мы будим гатовить кости! Если выпатрашыть рыба, то можна палучить патраха и кости. Патраха ваняют, но вкусные, а кости можна вешать на сибя и станавица сильный маг, как я! А еще из кастей можна делать мука! Берем кости рыбы и ламаем. Пака ат них не астанетса мука. А кагда астанетса мука можна еще палапать, штобы мука была маленькая! Из нее можна сделать блины, но ани будут твердые. А еще к ним нужны семена пшеницы. Тоже паломаные и падавленые. А еще вада. Можна взять с балота, патамушта ана полна витаминав. А дальше дайте бабе, ана сделает блины. </p>
</div>
<div>
<h1>Глаза рыбы</h1>
<p>Рыбные глаза очень вкусные! Но ани очень маленькие! Патаму я научу вас как найти бальшие и сделать их еще вкуснее!</p>
<p>Итак, вам нужин слуга! Самый глупый и безпалезный. Его можна павешат на веревку, но нада штобы он был жывой. Патом апускайте веревку в ваду и ждите пака приалывет бальшой рыба. А патом сжыгайте ее агнем из рук! Патамушта я маг! Главнае не сжеч глаза!</p>
<p>Кагда у вас ест глаза, их можна жрать так, но я люблю сасать глаза с помащью кастяной трубачки, патамушта ани так вкуснее!</p>
</div>
<div>
<h1>Чешея с жопай рыбы.</h1>
<p>Мае любимае блюда! Как мы помнем, весь рыба харош! Но самае харошее эта жопа! И чешея! Патаму мы атрезаем рыбе жопа и жарим! А чешея тоже жарим! А патом варим! А патом сыпим жопа чешеей!</p>
<p>АКУРАТНА! ТУПОЙ СГУГА ВСЕГДА ХАТЕТЬ САЖРАТЬ ВАШ ЖОПА! БИТЬ СЛУГА ПА БАШКА, ШТОБЫ ТОТ НЕ БЫТЬ ТУПОЙ И ИДТИ РАБОТАТЬ! </p>
</div>
<div>
<h1>КАНЕЦ</h1>
<p>Эта были самыи вкусныи рецепты ат миня! Умнага и страшнага, а еще прекраснага мага Гурана Рабашамана! Помнити, Рыба всиму галава. А галава рыба эта вкусна. А слуга тупой, да.</p>
</div>
<div>
<img src="https://i.ibb.co/yp8JB3M/image.png" alt="" />
</div>
</div>
</div>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
var $mybook = $('#mybook');
var $bttn_next = $('#next_page_button');
var $bttn_prev = $('#prev_page_button');
var $loading = $('#loading');
var $mybook_images = $mybook.find('img');
var cnt_images = $mybook_images.length;
var loaded = 0;
//Предварительно загружаем все страницы в книжке,
//а затем вызываем плагин Booklet
$mybook_images.each(function(){
var $img = $(this);
var source = $img.attr('src');
$('<img/>').load(function(){
++loaded;
if(loaded == cnt_images){
$loading.hide();
$bttn_next.show();
$bttn_prev.show();
$mybook.show().booklet({
name: null, // Имя буклета, которое выводится в заголовке документа
width: 800, // Ширина контейнера
height: 500, // Высота контейнера
speed: 600, // Скорость перехода между страницами
direction: 'LTR', // Направление организации контента, по умолчанию LTR (left to right - слева направо), может быть RTL (справа налево)
startingPage: 0, // Индекс страницы, которая будет выводиться первой
easing: 'easeInOutQuad', // Метод сглаживания для завершения трансформации
easeIn: 'easeInQuad', // Метод сглаживания для первой половины трансформации
easeOut: 'easeOutQuad', // Метод сглаживания для второй половины трансформации
closed: true, // Запускаем книгу "закрытой", будут добавлены пустые страницы в начало и конец
closedFrontTitle: null, // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой начальной старницы
closedFrontChapter: null, // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой начальной страницы
closedBackTitle: null, // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой последней страницы
closedBackChapter: null, // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой конечной страницы
covers: false, // Используется с опцией "closed", делает первую и последнюю страницу обложками, без нумерации страниц (если возможно)
pagePadding: 10, // Отступ для обертки каждой страницы
pageNumbers: true, // Выводит номер на каждой странице
hovers: false, // Разрешает анимацию предварительного просмотра страниц при наведени курсора мыши, выводятся маленькие изображения предыдущей и следующей страницы
overlays: false, // Разрешает навигацию с использованием слоя перекрытия, когда разрешено - ссылки в контексте не будут реагировать на нажатия кнопки мыши
tabs: false, // Добавляет закладки вдоль верха страницы
tabWidth: 60, // Определяем ширину закладок
tabHeight: 20, // Определяем высоту закладок
arrows: false, // Добавляем стрелки поверх кромок книжки
cursor: 'pointer', // Установка css для курсора для боковой области книжки
hash: true, // Разрешает навигацию с использованием хэш строки, например: #/page/1 для страницы 1, будет действовать на все книжки с разрешенной опцией 'hash'
keyboard: true, // Разрешает навигацию с использованием клавиш стрелок(влево: предыдущая страница, вправо: следующая)
next: $bttn_next, // Селектор для элемента, который используется как выключатель перехода к следующей странице
prev: $bttn_prev, // Селектор для элемента, который используется как выключатель перехода к предыдущей странице
menu: null, // Селектор элемента, который используется как область меню, требуется для 'pageSelector'
pageSelector: false, // Разрешает навигацию с помощью выпадающего меню для страниц, требует опции 'menu'
chapterSelector: false, // Разрешает навигацию с помощью выпадающего меню глав, определяется атрибутом "rel", требует опции 'menu'
shadows: true, // Выводить тени при анимации страниц
shadowTopFwdWidth: 166, // Ширина тени для верха анимации вперед
shadowTopBackWidth: 166, // Ширина тени для верха анимации назад
shadowBtmWidth: 50, // Ширина тени для низа анимации
before: function(){}, // Возвратная функция, которая вызывается перед выполенением каждой анимации
after: function(){} // Возвратная функция, которая вызывается после выполнения каждой анимации
});
}
}).attr('src',source);
});
});
</script>[/html]
