[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>
<p>Что же мы видим? Причудливые миражи? Стык миров, в котором просматриваются границы неизведанного? Или очередную загадку нашего собственного мира, надежно скрытую от посторонних глаз? </p></div>
<div>
<p>Жизнь вашего покорного слуги прошла в исследовании сих явлений, но, к огромному моему сожалению, век человека слишком краток для познания секретов самого мироздания. Иврит не имеет толковой истории, на нем никогда не образовывалось хоть сколько-то крупных городов, а о государствах и говорить нечего. Редкие искатели сокровищ изредка откапывают в пустыне посуду и остатки каменных строений, но все они больше похожи на некогда существовавшую там деревню. </p>
<p>Век мой подходит к концу, и, к сожалению, я так и не узнал секрета таинственных куполов. Но вместо этого обнаружил легенды… на Фуге. На первый взгляд, они не имеют никакого отношения к Ивриту, но стоит вчитаться — и со временем понимаешь, что Фуга описанного времени выглядела совершенно иначе, а описанные причуды архитектуры и образа жизни куда более подходят современному Ивриту и его немногочисленным жителям. </p></div>
<div>
<p>Ниже прилагаю пересказ части найденной мною легенды с земли огненных джиннов, а также собственные труды, накопленные за всю мою жизнь — возможно, будущие искатели и ученые смогут разгадать секреты куполов. </p></div>
<div><img src="https://i.pinimg.com/564x/ec/0f/55/ec0f55ab6ae465eacf58bd8a84dd747d.jpg"/></div>
<div>
<h1> Легенда о Змее и Хаосе</h1>
<p>Общеизвестно, что мир появился из бесконечного хаоса, будучи его аномалией — внезапной ошибкой в череде мирозданий. Но сам хаос некогда был формой, вылитой Великим на кузнице звезды: формой змеи, бесконечно петляющей меж звезд. Ее чешуя была воплощением темноты, дыхание — лишенным жизни, а стихии никогда не касались ее сущности. Она была частью мира. </p>
<p>Хаос был отдельным. Хаос был всем. </p>
<p>Змей постепенно рос, и их стало несколько. Его хвост стал океаном из темноты, широким и длинным. Его голова стала тремя головами, ибо одной было недостаточно чтобы удержать всю мощь бурлящей внутри энергии. </p>
<p>Хаос жил чтобы уничтожать миры, созданные творцами. Он питался ими и поглощал их силу, становясь все больше и больше… пока все в мире не стало Хаосом. И тогда змей начал пожирать себя. </p></div>
<div>
<p>В этот момент появился мир, каким мы знаем его сегодня, потому что капля крови, пролившейся из чешуи змея в момент укуса, вдруг ослепила его своим сиянием — и родилось Солнце. Оно осветило его изнутри, согрело никогда не знавшее тепла тело и хаос начал меняться. Солнце впитало в себя весь опыт творцов и стало творить новый, уникальный мир, центром которого станет Хаос. Оно назначило великого змея хранителем потустороннего мира и нарекло его Ар'Наак. </p>
<p>Так у хаоса появилась душа. А душа хотела творить, потому что в этом заключено ее предназначение…</p>
<p>/часть текста не удалось расшифровать/</p>
<p>Когда мир был создан, он оставался пустым и прекрасным. Дивный сад, затерянный среди хаотичной магии, источаемой змеем. Магия эта была коварна и опасна. </p></div>
<div>
<p>И тогда Солнце велело змею лечь под миром и заполнить хаосом все вокруг, а само Солнце своим светом и пламенем будет удерживать эту мрачную, разрушительную силу под землей. Так великий змей, воплощенный Хаос, стал царствовать над мертвым, а Солнце — душа хаоса, стало упорядочивать и сдерживать его наступление. </p>
<p>Но Хаосу было неоткуда браться, когда не стало движения. Созданный мир стал тюрьмой для змея. Он все уменьшался и уменьшался, поддерживаемый лишь энергией смерти… а потом свернулся в клубок и уснул. В его снах, холодных и темных, было свое Солнце — и змей называл его Луна. Серебристое и прохладное, оно куда лучше понимало природу самого змея… и в один из дней Солнце вынуждено было уступить половину дня своей сестре — Луне, воплощенному сну змея о Хаосе, о нем самом. </p></div>
<div>
<p>С приходом Луны хаос из подземного мира перестал тревожить юные земли и отравлять почву. Воцарился баланс. </p>
<p>А после Солнца и Луна создали Богов — созданные из страстей и эмоций, они были несуразными и странными для своих творцов, но творения из их рук оживали… они стали другими. Живыми. Полными огня и холода. </p>
<p>/здесь тоже очень сложный фрагмент текста, который джинны не могут интерпретировать/ </p>
<p>Прим. автора: Предположительно, имелись ввиду первые стихии — так называют у джиннов первых Богов. Они наполнили собой природу и Солнцу с Луной больше не нужно было лично направлять реки и океаны, день и ночь. Затем из тел Богов появились первые джинны, поделившие мир на озера, пустоши, джунгли, океаны и реки, а Солнце, устав от созидания, создало новых, которые могли бы сами творить что хотят в этом мире. </p></div>
<div><img src="https://i.pinimg.com/564x/e4/50/1b/e4501b1066994db0bfcd4ebfe386a2e0.jpg"/></div>
<div>
<p>…И тогда Боги создали людей, эльфов, гномов и другие расы по своему образу и подобию той земли, которую подарило им Солнце. Малочисленные и слабые, но живые — они развивались с помощью Богов-прародителей, но были лишены их мастерства в созидании. Но Боги были лишены чувств и между ними то и дело возникали склоки. И тогда Солнце подарило им живую сестру — неспособную к созиданию Мирану Тысячеликую, которая могла понимать всех богов и созданные ими расы, говорить на их языках и объединить разрозненные народы, братьев и сестер-Богов. </p></div>
<div>
<p>…И Мирана Тысячеликая с детьми ее (фрагмент не слишком понятен мне) пригласила джиннов заложить первый камень великого города-храма Шахаргиэр'Эстэ. Благословленный стихиями, заключенными в волшебные камни в великих башнях города, он стал центром, в который Боги и их дети приходили для обращения к Солнцу… Купола центрального храма сверкали золотом, а из рек на улицы города проливалась благословенная вода, способная исцелять обитателей. Остроконечные башни с камнями стихий стали символом дружбы между джиннами и Архаас (?), они не падут до самого конца миров и нового прихода Хаоса. </p></div>
<div>
<h1> Заметка №121: </h1>
<p> «Текст этой легенды написан на останках древнего храма Луны, и я не могу ручаться что опытный криптограф из прошлого не заменил «Луну» на «Солнце», поскольку история не говорит нам о любых других идолах кроме Луны. Безусловно, Солнце заслуживает внимания, но исключительно как вспомогательная энергия.» </p></div>
<div>
<h1> Заметка №120: </h1>
<p> «Джинны не сходятся в версиях данной легенды и не знают, чем завершилась история — большинство утверждает, что речь идет о древних руинах на Фуге, но мои исследования показывают, что описанная архитектура, а главное — золото, если я правильно истолковываю письмена, не свойственны этим местам совсем. </p>
<p> Иначе они бы помнили что-то из старой архитектуры.» </p></div>
<div>
<h1> Заметка №150: </h1>
<p> «Мне в руки попала любопытная вещь — путешественники, обнаружившие ее, утверждают, будто нашли ее на Иврите. Это золотой кубок со змеей, опоясывающей его. Необычное, богато украшенное изделие, но я не верю в его древность ибо работа слишком тонкая.» </p></div>
<div>
<h1> Заметка №50: </h1>
<p> «Исследуя пустыню, наткнулся на остатки водоплавающих в старинном русле реки. Чуть поодаль обнаружил, странно подумать, практически полностью сохранившиеся корни пальм и некоторых кустарников! Исходя из этого я уже могу подтвердить свою теорию о том, что пустыня некогда имела абсолютно другой вид и возможно состояла не из отдельных оазисов, а из однородного, зеленого ландшафта!» </p></div>
<div>
<h1> Заметка №251: </h1>
<p> «Сегодня я продвинулся в своих поисках удивительно далеко — кажется, я у самой цели! В одной из устьев подземных рек нашел стелу, язык мне неизвестный — возможно, криптографы смогут разобрать. Остатки фрески изображают… купола и башни! Похоже, камень вдавило под землю со временем или зыбучие пески постарались.» </p></div>
<div>
<h1> Заметка №252: </h1>
<p> «Криптографы не могут разобрать написанного, более того — никто даже не понимает, что это за язык! Ни одна из известных нам книг не содержит упоминания аналогичных символов, но я заметил, что написаны они будто зеркально — справа налево. По мозаике можно понять немного больше, так что я решил сконцентрироваться на ее очистке. Изображение похоже на загадку, ничего пока не понимаю.» </p></div>
<div>
<h1> Заметка №255: </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]