Как найти книги в html

<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>
			
				<img src="images/1.jpg" alt=""/>
				
				<h1>Витаем в облаках - тема для сайта</h1>
				
				<p>В данном уроке с помощью jQuery ...</p>
				
				<a href="#" class="article">Урок</a>
				<a href="#" class="demo">Демонстрация</a>
				
			</div>
			
			<div>
			
				...
				
			</div>
			
			
		</div>
	</div>
</div>

.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(../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(../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:90%;
	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:905px;
	height:540px;
	position:relative;
	background:transparent url(../images/bg.png) no-repeat 9px 27px;
}

.book_wrapper h1{
	color:#13386a;
	margin:5px 5px 5px 15px;
	font-size:26px;
	background:transparent url(../images/h1.png) no-repeat bottom left;
	padding-bottom:7px;
}

.book_wrapper p{
	font-size:16px;
	margin:5px 5px 5px 15px;
}
.book_wrapper a.article,
.book_wrapper a.demo{
	display:block;
	height:41px;
	text-decoration:none;
	outline:none;
	font-size:16px;
	color:#555;
	float:left;
	line-height:41px;
}
.book_wrapper a.demo{
	margin-left:100px;
	background:transparent url(../images/circle_demo.png) no-repeat 50% 0px;
	width:145px;
	padding-left:50px;
}
.book_wrapper a.article{
	margin-left:10px;
	background:transparent url(../images/circle_article.png) no-repeat 50% 0px;
	width:45px;
	padding-left:20px;
}
.book_wrapper a.article:hover,
.book_wrapper a.demo:hover{
	background-position:50% -41px;
	color:#13386a;
}

.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:41px;
	height:40px;
	cursor:pointer;
	margin-top:-20px;
	top:50%;
	background:transparent url(../images/buttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
	left:-30px;
}
a#next_page_button{
	right:-30px;
	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:15px;
	background: #000 url(../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;
}

$(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:               false,                   // Разрешает навигацию с использованием хэш строки, например: #/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(){}                     // Возвратная функция, которая вызывается после выполнения каждой анимации
				});
				Cufon.refresh();
			}
		}).attr('src',source);
	});
	
});

<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/RodeoExtraBold_400.font.js" type="text/javascript"></script>
<script src="cufon/Betina_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('h1,p,.b-counter');
	Cufon.replace('.book_wrapper a', {hover:true});
	Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'RodeoExtraBold'});
	Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'RodeoExtraBold'});
	Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'RodeoExtraBold'});
</script>