[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>

<p>Записать во всех подробностях я решил скорее для себя самого, потому как действительно дорожу этим воспоминаниями. Хотя, предполагаю, что если я все же решу опубликовать эту историю, то кому-то будет даже интересно ее читать. К возможному сожалению для некоторых, в моем повествовании нет красочных витиеватых повествований великих о битвах с жуткими чудищами, не будет замысловатых описаний поисков древних кладов, исследований ветхих казематов или чего-то подобного, нет даже скабрезных историй о похождениях некоего любвеобильного эльфа, ха-ха.  История эта довольно проста, можно сказать несколько банальна, но вместе с тем я никогда не слышал о чем-то подобном ни до, ни после.</p>

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<div>

<p>– Это потому что я сама впустила вас внутрь и следила за вашими действиями. Если бы вы попытались сделать хоть что-то плохое, то были бы незамедлительно и сурово наказаны. Я являюсь духом этого дома и до последнего заботилась о своей хозяйке. У нее крайне редко бывали гости. Полагаю, вас тоже можно считать одним из них.

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

</div>

<div>

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

</div>

<div>

<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]