[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> <i>Данный труд принадлежит вольному зоологу, господину Овердью, пропавшего без вести в лесах Иврита, куда был направлен вместе со своей экспедицией около пяти лет назад. Семья уже не чает найти его, а потому даёт добро на публикацию данных научных трудов, не имея по сему поводу никаких претензий. </i> </p>

<p> <i>Книга входит в серию: «Зверьки Каратады» </i> </p>

<p>Краткая справка </p>

<p>Болотные дракончики есть самые мелкие и безобидные представители отряда Рептилий Огнедышащих, в сравнении со своими старшими собратьями нелепые настолько, что кажется, будто природа создала их в насмешку над страхом людским перед кровожадными вивернами и смертоносными дрейками. </p>

</div>

<div>

<h1>Параметры тела </h1>

<p>Дикие особи размерами не превышают семидесяти сантиметров(<i>Однако я, перемерив около десятка стаек этих сорванцов, о пятнадцати особей в каждой, с уверенностью заявляю — самый крупный из них имел длину в семьдесят <ins>один</ins> сантиметр(!). Так или иначе, чуть больше половины этой длины занимает их бестолковый хвост </i>). Весом эти малыши около восьми килограмм, а размах их крыльев, крайне редко применяемых по назначению даже в естественной среде обитания, не достигает и полутора метра, к пропорциям тела имея соотношение 1 к 2. Некоторые вариации одомашненных драконов допускают соотношение 2 к 1, но в данном варианте крылья присутствуют скорее как рудимент и к полету практически не способны. </p>

</div>

<div>

<h1>Биологические особенности </h1>

<p>Как уже упоминалось, болотные дракончики — самые мелкие представители отряда Огнедышащих, однако, среди прочих выделяются не только размерами, но и схожестью с представителями другого отряда, Амфибий. В основании полости рта находится мешкообразный пузырь из кожи, называемый горловым мешком — приспособление, каким лягушки в брачный период усиливают издаваемые ими звуки для привлечения самок. У драконов он имеет схожую функцию, и, помимо этого, служит механизмом облегчения огнеизвержения. </p>

<p>Дело в том, что зачастую энергия, которая перерабатывается этими недалекими ящерками после приема пищи, порою частенько превышает ту, которую их тщедушное тельце может выдержать, и вырывается наружу в виде «огненной отрыжки». </p>

</div>

<div>

<p>Горловой мешок понижает отдачу от этого выброса, а так же помогает понять смышленому путешественнику, какой силы атаку ему ожидать — это определяется по тому, насколько ярко светится горловой мешок. В процессе переваривания пищи он источает тусклый свет, а перед атакой горит, будто накрытый тканью сияющий кристалл из глубин кварцевых пещер, что в любую секунду готов разорваться от переполняющей его энергии. </p>

<p>К слову, сожрать болотники могут что угодно. <ins>Берегите свои пожитки.</ins> </p>

</div>

<div>

<h1>Места обитания </h1>

<p>Селиться предпочитают, как несложно догадаться из незатейливого названия данного вида, у болот, однако, в отличие от иных их жителей, вроде лягушек и змей, от воды держатся на почтенном расстоянии, предпочитая высохшие места. Отчего такая странность? Болотные дракончики являются носителями элемента огня, противоположного водной стихии, а потому не могут спокойно пребывать в воде слишком долгое время, вне периода спаривания. Вместе с тем, наблюдается интересная особенность — размножение данных особей происходит исключительно в водоемах, где в илистом дне у берега можно спрятать маленькие, покрытые броской крапинкой яйца. Так же, без воды невозможно полноценно сбросить кожу в период линьки, что выливается в серьезные травмы. </p>

</div>

<div>

<h1>Окраска </h1>

<p>Изначально дикие особи имеют тёмно-зеленый окрас, темнее на спинке и светлее, едва ли не до желтизны, на брюшке и тонких перепонках крыльев. Оттенок глаз разнится: от самой распространенной охры до редчайшего янтаря, за владение которым борются богатейшие заводчики со всех континентов! Имея честь лицезреть взгляд этих маленьких, практически уникальных глаз, могу с уверенностью заявить — борьба того стоит. До сих пор вспоминаю с трепетным благоговением!.. </p>

<p>Впрочем, мы отвлеклись. </p>

</div>

<div>

<p>Стоит помнить, что морфы диких особей не могут похвастаться тем разнообразием, что имеется у одомашненных драконов: все цвета радуги и варианты окраски, тут рынок способен удовлетворить вкус даже самого искушенного покупателя. <del>В этом деле, без всяких сомнений, не обошлось без вмешательства алхимиков и дичайшего кровосмешения, но разве это важно?</del> </p>

<p>Приручение </p>

<p>Эти драконы обладают дружелюбным характером, они энергичны и любознательны, а потому легко идут на контакт, если не чувствуют угрозы со стороны потенциального хозяина. Стоит помнить, что именно он должен заниматься приручением дракончика, в противном случае, зверь привяжется к тому, кто вызвал интерес и наиболее активно проявлял к нему внимание. </p>

</div>

<div>

<p>Происходит своего рода «Импринтинг» — маленький и слабый доверяет большому и сильному, тому, кто в перспективе будет заботиться и защищать. </p>

<p>Три правила приручения: </p>

<p>1) Привлеките внимание дракона угощением — им может являться что угодно из вашей походной сумки, но прежде всего мясо. Строго настрого <ins>запрещено</ins> давать болотникам сладости. Это ведет к несварению. <b>Опасно.</b> </p>

<p>2) Разговаривайте с драконом — удивительно, но этим созданиям очень нравится звук голоса разумного существа. Говорите с ним нежно и ласково, пойте ему, осыпайте его комплементами, как любимую даму сердца. Последнее, разумеется, шутка. </p>

<p>3) Будьте ласковы с драконом — малыши обожают ласку в любом её проявлении, но пуще всего любят физический контакт. </p>

</div>

<div>

<p>Чешите им шейку, брюшко и крылья, дайте цапнуть себя за палец(больно, но результат того стоит), но не забывайте щелкать по носу, если им вздумается зайти слишком далеко. Дракончики отходчивы и, отскочив на пару мгновений, вновь вернутся за новой порцией ласки куда более смирными. </p>

<p>Эти правила эффективны как для диких болотников, так и для особей, выращенных в неволе. Помните, чем младше особь, чем дольше она контактирует с разумными, тем проще её приручить. </p>

</div>

<div>

<h1>Содержание и уход </h1>

<p>Зверь неприхотлив, что объясняет его исключительную популярность среди прочих экзотических питомцев, и очень привязан к своему хозяину, потому трудности ухода зачастую связаны с необходимостью проявлять повышенное внимание к своему дракончику. Играйте с ним, выгуливайте его, занимайтесь с ним дрессировкой. Помните, воспитанный дракон — гарант того, что у вас ничего не сгорит. <small>С большой вероятностью. </small> </p>

</div>

<div>

<p>Раз в год эти драконы, подобно другим рептилиям, сбрасывают кожу. Обычно период линьки приходится на пору Разгара и проблем с ним не возникает — обеспечьте питомцу доступ к малому количеству воды(хватит достаточно глубокой тарелки, наполненной до краев), а так же постарайтесь снять остатки кожи с пальцев болотника. В противном случае омертвевшая кожа может засохнуть на них, что приведет к некрозу тканей и последующей потере конечности. В худшем случае, но доводить до этого всё равно не стоит. </p>

<p>Питание не имеет строгих ограничений помимо одного — не давайте драконам сладкого. Сахар <i>весьма специфически</i> влияет на их организм. </p>

</div>

<div>

<p>Вместо этого стоит предложить питомцу кальций, содержащийся в кусочках мела и костей, рыбу, лягушек и насекомых. Последних они в силах поймать самостоятельно, спасая хозяина от надоедливой мошкары. </p>

<p> Не советую держать питомца в клетке — это может повредить хрупкие крылья. Лучше дать дракону свободно сидеть в открытой сумке, на плечах или позволить бежать(лететь эти лентяи захотят в последнюю очередь) рядом. Так же им подходит вольерное содержание. </p>

<p>На этом всё! Берегите своих питомцев в и помните: «<i>Мы в ответе за тех, кого приручили</i>». </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]