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

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

<p>Не позабылись ими кровавая жатва госпожи Чумы, уведшая за собой не одну тысячу душ. </p>

</div>

<div>

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

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

</div>

<div>

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

<p><i> «Это кошки, порождения бездны, причина всех наших бед!»</i> — Кричали одни, проклиная созданий, глазами которых, как им казалось, видит сама смерть. Не прошло и месяца, как всех котов истребили, и на улицах огромными стаями начали бегать осмелевшие крысы.  </p>

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

</div>

<div>

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

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

<p> Увы, это не спасало. </p>

</div>

<div>

<p> Их называли падальщиками, слугами поветрия. Сами они предпочитали зваться учеными. </p>

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

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

</div>

<div>

<p> Непосредственным участником их был сыгравший не последнюю роль в жизни города врач — Амель Ла’Крим. </p>

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

<p> Святая наивность, он искренне верил, что способен им помочь. </p>

</div>

<div>

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

<p> Будто гром среди ясного неба. Не успеет. А ведь ему оставалось так немного, чтобы, наконец, закончить свою вакцину. </p>

</div>

<div>

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

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

</div>

<div>

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

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

</div>

<div>

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

<p>Многим позже на имя градоначальника придет письмо с формулой, ознаменовавшей конец пандемии. Оно не имело ни подписи, ни каких-либо опознавательных знаков: лишь краткие, сбивчивые пояснения к изготовлению новой микстуры, капли крови и маленькую приписку в углу листа: <i>«Мне бесконечно жаль».</i> </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]