<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 1px #fff;
	-webkit-box-shadow:0px 0px 1px #fff;
	box-shadow:0px 0px 1px #fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.booklet .b-wrap-left  {
	background:#fff url(http://ruseller.com/lessons/les809/demo/images/left_bg.jpg) no-repeat top left;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;

}
.booklet .b-wrap-right {
	background:#efefef url(http://ruseller.com/lessons/les809/demo/images/right_bg.jpg) no-repeat top left;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;


}
.booklet .b-counter {
	bottom:10px;
	position:absolute;
	display:block;
	width:80%;
	height:20px;
	border-top:1px solid #ddd;
	color:#222;
	text-align:center;
	font-size:12px;
	padding:5px 0 0;
	background:transparent;
	-moz-box-shadow:0px -1px 1px #fff;
	-webkit-box-shadow:0px -1px 1px #fff;
	box-shadow:0px -1px 1px #fff;
	opacity:0.8;
}
.book_wrapper{
	margin:0 auto;
	padding-top:50px;
	width:860px;
	height:540px;
	position:relative;
	background:transparent url(http://forumstatic.ru/files/000d/19/7b/55725.png) no-repeat 28px 29px;
}
.book_wrapper h1{
	color:#13386a;
	margin:5px 5px 5px 15px;
	font-size:26px;
	background:transparent url(http://ruseller.com/lessons/les809/demo/images/h1.png) no-repeat bottom left;
	padding-bottom:7px;
}
.book_wrapper p{
	font-size:14px;
	margin:5px 5px 5px 15px;
}
.book_wrapper img{
	margin:10px 0px 5px 35px;
	width:300px;
	padding:4px;
	border:1px solid #ddd;
	-moz-box-shadow:1px 1px 1px #fff;
	-webkit-box-shadow:1px 1px 1px #fff;
	box-shadow:1px 1px 1px #fff;
}
.booklet .b-wrap-right img{
	border:1px solid #E6E3C2;
}
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(http://ruseller.com/lessons/les809/demo/images/buttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
	left:-8px;
}
a#next_page_button{
	right:-6px;
	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;
	height:56px;
	position: absolute;
	top:50%;
	margin-top:-28px;
	right:135px;
	line-height:56px;
	color:#fff;
	padding-left:60px;
	font-size:12px;
	background: #000 url(http://ruseller.com/lessons/les809/demo/images/ajax-loader.gif) no-repeat 10px 50%;
	opacity: 0.7;
	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><a href="/#/page/5 ">Улучшаем элемент select</a></p>
        	</div>
        	<div>
                <img src="http://ruseller.com/lessons/les809/demo/images/1.jpg" alt=""/>
                <h1>Витаем в облаках - тема для сайта</h1>
                <p>В данном уроке с помощью jQuery мы сделаем макет сайта
                с горизонтальной прокруткой контента и параллаксом смещающихся облаков на фоне.</p>
        	</div>
        	<div>
                <img src="http://ruseller.com/lessons/les809/demo/images/2.jpg" alt="" />      	
                <p>В качестве альтернативы для стандартных средств браузера
                в данном уроке мы построим крос-браузерное решение для организации
                диалога подтверждения  в форме простого в использовании плагина jQuery.
                Можно будет изменять текст, кнопки и действия, которые будут выполняться
                при нажатии на кнопки.</p>
        	</div>
        	<div>
                <img src="http://ruseller.com/lessons/les809/demo/images/3.jpg" alt="" />
                <h1>Улучшаем элемент select</h1>
                <p>При работе над проектом каждый разработчик стремиться получить одинаковый
                вид сайта в различных браузерах. К сожалению, большинство основных элементов
                - стандартные органы управления браузера - почти всегда трудно стилизовать. </p>
        	</div>
        	<div>
                <img src="http://ruseller.com/lessons/les809/demo/images/4.jpg" alt="" />
                <h1>Галерея с вращением изображений</h1>
                <p>В данном уроке с помощью jQuery и вращений CSS3, а также плагина jQuery Rotate
                мы создадим прекрасное слайдшоу. Его можно будет использовать на своем сайте для
                демонстрации портфолио или свойств продукта.</p>
        	</div>
        	<div>
                <img src="http://ruseller.com/lessons/les809/demo/images/5.jpg" alt="" />     	
                <p>Вероятно, что вы уже слышали о новом элементе HTML5 canvas.
                Это специальный элемент, который позволяет создавать и модифицировать
                графику. </p>
        	</div>
         	<div>
                <img src="http://ruseller.com/lessons/les809/demo/images/6.jpg" alt="" />
                <p>В данном уроке мы создадим пузырьковую навигацию с помощью jQuery. 
                Идея заключается в том, чтобы сделать несколько круглых иконок, на 
                которых при наведении курсора мыши "раскрывается" круглое подменю с 
                дополнительными пунктами. </p>    	
        	</div>
        	<div>
                <img src="http://ruseller.com/lessons/les809/demo/images/7.jpg" alt="" />
                <h1>Коллапсирующая навигация по сайту</h1>
                <p>В данном уроке мы создадим коллапсирующее меню, которое 
                содержит вертикальные навигационные колонки и выскальзывающую 
                область с контентом. Когда курсор мыши проходит над пунктом меню 
                сверху выскальзывает изображение, а снизу - подменю. </p>            
        	</div>
         	<div>
                <img src="http://ruseller.com/lessons/les809/demo/images/8.jpg" alt="" />
                <h1>Плавная вертикальная или горизонтальная прокрутка страницы</h1>
                <p>В данном уроке мы сделаем простую плавную прокрутку контента 
                страницы  помощью jQuery. Мы сделаем шаблон сайта для горизонтальной 
                и вертикальной прокруток, чтобы продемонстрировать эффект. </p>            
        	</div>
         	<div>
            </div>
    	</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:              725,                             // Ширина контейнера
                height:             450,                             // Высота контейнера
                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>