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