<div id="bb-bookblock" class="bb-bookblock">  
<div class="bb-item">  
<!-- custom content -->  
</div>  
<div class="bb-item">  
</div>  
<div class="bb-item">  
<!-- ... -->  
</div>  
<div class="bb-item">  
<!-- ... -->  
</div>  
<!-- ... -->  
  </div>

$(function() {  
$( '#bb-bookblock' ).bookblock();  
  });

// Скорость для флип перехода в мс.  
  speed : 1000,  

  // Ослабления для флип перехода.  
  easing : 'ease-in-out',  

  // Если установлен верно, как листать страницы и сторонам придется наложения для имитации тени  
  shadows : true,  

  // Значение непрозрачности для "теневые" с обеих сторон (когда листать страницы над ним).  
  // Значение: 0,1 - 1  
  shadowSides : 0.2,  

  // Значение непрозрачности для "теневые" на листать страницы (в то время он листать).  
  // Значение: 0,1 - 1  
  shadowFlip : 0.1,  

  // Точки перспективы значения  
  perspective : 1300,  

  // Если мы должны показать первый пункт после достижения конца.  
  circular : false,  

  // Если мы хотим, указать селектор, который вызывает next() function. Например: '#bb-nav-next'.  
  nextEl : '',  

  // Если мы хотим, указать селектор, который запускает prev() function.  
  prevEl : '',  

  // Обратный вызов после флип перехода.  
  // Страница индекс текущего элемента.  
  // IsLimit верно, если текущая страница является последней (или первой).  
  onEndFlip : function( page, isLimit ) { return false; },  

  // Обратный вызов до флип перехода.  
  // Страница индекс текущего элемента.  
  onBeforeFlip: function( page ) { return false; }

<section class="main">  
<div class="bb-custom-wrapper">  
<div id="bb-bookblock" class="bb-bookblock">  
<div class="bb-item">  
<a href="http://ссылка"><img src="images/demo1/1.jpg" alt="image01"/></a>  
</div>  
<div class="bb-item">  
<a href="http://ссылка"><img src="images/demo1/2.jpg" alt="image02"/></a>  
</div>  
<div class="bb-item">  
<a href="http://ссылка"><img src="images/demo1/3.jpg" alt="image03"/></a>  
</div>  
<div class="bb-item">  
<a href="http://ссылка"><img src="images/demo1/4.jpg" alt="image04"/></a>  
</div>  
<div class="bb-item">  
<a href="http://ссылка"><img src="images/demo1/5.jpg" alt="image05"/></a>  
</div>  
</div>  
<h3>Иллюстрации от <a href="http://dribbble.com/kevinhowdeshell">Кэвина Хоудешела</a></h3>  
<nav>  
<a id="bb-nav-prev" href="#">Предыдащая</a>  
<a id="bb-nav-next" href="#">Следующая</a>  
<a id="bb-nav-jump" href="#" title="Перейти к последней странице">Последняя</a>  
</nav>  
</div>  
</section>

<link rel="stylesheet" type="text/css" href="css/style.css" />  
  <link rel="stylesheet" type="text/css" href="css/custom.css" />  
  <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
  <noscript><link rel="stylesheet" type="text/css" href="css/noJS.css" /></noscript>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>  
<script type="text/javascript" src="js/jquerypp.custom.js"></script>  
<script type="text/javascript" src="js/jquery.bookblock.js"></script>  
<script type="text/javascript">  
$(function() {  
var Page = (function() {  
var config = {  
$bookBlock : $( '#bb-bookblock' ),  
$navNext : $( '#bb-nav-next' ),  
$navPrev : $( '#bb-nav-prev' ),  
$navJump : $( '#bb-nav-jump' ),  
bb : $( '#bb-bookblock' ).bookblock( {  
speed : 800,  
shadowSides : 0.8,  
shadowFlip : 0.7  
} )  
},  
init = function() {  
initEvents();  
},  
initEvents = function() {  
var $slides = config.$bookBlock.children(),  
totalSlides = $slides.length;  

// add navigation events  
config.$navNext.on( 'click', function() {  
config.bb.next();  
return false;  
});  

config.$navPrev.on( 'click', function() {  
config.bb.prev();  
return false;  
});  

config.$navJump.on( 'click', function() {  
config.bb.jump( totalSlides );  
return false;  
});  

// add swipe events  
$slides.on( {  
'swipeleft' : function( event ) {  
config.bb.next();  
return false;  
},  
'swiperight' : function( event ) {  
config.bb.prev();  
return false;  
}  
} );  
};  
return { init : init };  
})();  
Page.init();  
});  
</script>

<section class="main">  
<ul class="bb-custom-grid" id="bb-custom-grid">  
<li>  
<h3>Neonmob set</h3>  
<div class="bb-bookblock">  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/1.jpg" alt="image01"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/2.jpg" alt="image02"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/3.jpg" alt="image03"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/4.jpg" alt="image04"/></a></div>  
</div>  
<nav>  
<span class="bb-current"></span>  
<span></span>  
<span></span>  
<span></span>  
</nav>  
</li>  
<li>  
<h3>Illustration Work</h3>  
<div class="bb-bookblock">  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/5.jpg" alt="image05"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/6.jpg" alt="image06"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/7.jpg" alt="image07"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/8.jpg" alt="image08"/></a></div>  
</div>  
<nav>  
<span class="bb-current"></span>  
<span></span>  
<span></span>  
<span></span>  
</nav>  
</li>  
<li>  
<h3>Everyday Monsters</h3>  
<div class="bb-bookblock">  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/9.jpg" alt="image09"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/10.jpg" alt="image10"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/11.jpg" alt="image11"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/12.jpg" alt="image12"/></a></div>  
</div>  
<nav>  
<span class="bb-current"></span>  
<span></span>  
<span></span>  
<span></span>  
</nav>  
</li>  
<li>  
<h3>Signage for the Office</h3>  
<div class="bb-bookblock">  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/13.jpg" alt="image13"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/14.jpg" alt="image14"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/15.jpg" alt="image15"/></a></div>  
<div class="bb-item"><a href="http://ссылка"><img src="images/demo2/16.jpg" alt="image16"/></a></div>  
</div>  
<nav>  
<span class="bb-current"></span>  
<span></span>  
<span></span>  
<span></span>  
</nav>  
</li>  
</ul>  
</section>

<link rel="stylesheet" type="text/css" href="css/style.css" />  
  <link rel="stylesheet" type="text/css" href="css/custom2.css" />  
  <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
  <noscript><link rel="stylesheet" type="text/css" href="css/noJS.css" /></noscript>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>  
<script type="text/javascript" src="js/jquerypp.custom.js"></script>  
<script type="text/javascript" src="js/jquery.bookblock.js"></script>  
<script type="text/javascript">  
$(function() {  
var Page = (function() {  
var $grid = $( '#bb-custom-grid' );  
return {  
init : function() {  
$grid.find( 'div.bb-bookblock' ).each( function( i ) {  
var $bookBlock = $( this ),  
$nav = $bookBlock.next().children( 'span' ),  
bb = $bookBlock.bookblock( {  
perspective : 900,  
speed : 600,  
shadows : false  
});  

// add navigation events  
$nav.each( function( i ) {  
$( this ).on( 'click', function( event ) {  
var $dot = $( this );  
if( !bb.isActive() ) {  
$nav.removeClass( 'bb-current' );  
$dot.addClass( 'bb-current' );  
}  
bb.jump( i + 1 );  
return false;  
});  
});  

// add swipe events  
$bookBlock.children().on( {  
'swipeleft' : function( event ) {  
bb.next();  
return false;  
},  
'swiperight' : function( event ) {  
bb.prev();  
return false;  
}  
});  

});  
}  
};  
})();  
Page.init();  
});  
</script>

<section class="main">  
<div class="bb-custom-wrapper">  
<div id="bb-bookblock" class="bb-bookblock">  
<div class="bb-item">  
<div class="bb-custom-content bb-custom-bg">  
<h3>Invitation</h3>  

We are inviting you to the great party of</p>  
<h4>Andrew<br>McDonald <span>&</span> Monica<br>Santa Cruz</h4>  

to celebrate their 50th wedding anniversary.</p>  
</div>  
</div>  
<div class="bb-item">  
<div class="bb-custom-content">  
<div class="bb-custom-circle"></div>  
<div id="folder" class="folder">  
<div class="folder-cover"><span>Нажми на меня, чтобы открыть →</span></div>  
<div class="folder-inner">  
<a id="folder-close" href="#">← Закрыть</a>  
<h4>Location</h4>  

Friday, September 21st, 2012
<br>at 5:00 p.m.
<br>The Botanical Garden
<br>5461 Mystic Lane
<br>San Diego, California</p>  
</div>  
<div class="folder-fold"></div>  
</div>  
</div>  
</div>  
<div class="bb-item">  
<div class="bb-custom-content">  
<div class="bb-custom-last">  

"There is no remedy for love than to love more."</p>  
<h4>Thank you<span>&</span>see you soon!</h4>  

Please contact us if you have any questions.</p>  
</div>  
</div>  
</div>  
</div>  
</div>  
<nav class="bb-custom-nav">  
<a id="bb-nav-prev" href="#">Предыдущий</a>  
<a id="bb-nav-next" href="#">Следующий</a>  
</nav>  
</section>

<link rel="stylesheet" type="text/css" href="css/style.css" />  
  <link rel="stylesheet" type="text/css" href="css/custom3.css" />  
  <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
  <!--[if lte IE 10]><link rel="stylesheet" type="text/css" href="css/customIE.css" /><![endif]-->  
  <noscript><link rel="stylesheet" type="text/css" href="css/noJS.css" /></noscript>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>  
<script type="text/javascript" src="js/jquerypp.custom.js"></script>  
<script type="text/javascript" src="js/jquery.bookblock.js"></script>  
<script type="text/javascript">  
$(function() {  
var Page = (function() {  
var config = {  
$bookBlock : $( '#bb-bookblock' ),  
$navNext : $( '#bb-nav-next' ),  
$navPrev : $( '#bb-nav-prev' ),  
$navJump : $( '#bb-nav-jump' ),  
$folder : $( '#folder' ),  
$folderOpen : $( '#folder > div.folder-cover > span' ),  
$folderClose : $( '#folder > div.folder-inner > a' ),  
transEndEventNames : {  
'WebkitTransition' : 'webkitTransitionEnd',  
'MozTransition' : 'transitionend',  
'OTransition' : 'oTransitionEnd',  
'msTransition' : 'MSTransitionEnd',  
'transition' : 'transitionend'  
},  
// init bookBlock!  
bb : $( '#bb-bookblock' ).bookblock( {  
speed : 700,  
easing : 'ease-out',  
perspective : 1500,  
shadowSides : 0.8,  
shadowFlip : 0.7  
} ),  
transitionProperty : {  
'-webkit-transition': '-webkit-transform 300ms ease-in-out',  
'-moz-transition': '-moz-transform 300ms ease-in-out',  
'-o-transition': '-o-transform 300ms ease-in-out',  
'-ms-transition': '-ms-transform 300ms ease-in-out'  
}  
},  
init = function() {  
initEvents();  
},  
initEvents = function() {  
config.$navNext.on( 'click', function() {  
checkFolder( function() {  
config.bb.next();
});  
return false;  
});  
config.$navPrev.on( 'click', function() {  
checkFolder( function() {  
config.bb.prev();  
});  
return false;  
});  
config.$navJump.on( 'click', function() {  
checkFolder( function() {  
config.bb.jump(4);  
});  
return false;  
});  

// swipe event : http://jquerypp.com/#swipe  
config.$bookBlock.children().on( {  
'swipeleft' : function( event ) {  
checkFolder( function() {  
config.bb.next();  
});  
return false;  
},  
'swiperight' : function( event ) {  
checkFolder( function() {  
config.bb.prev();  
});  
return false;  
}  
});  

// folder  
config.$folderOpen.on( 'click', function() {  
var $folder = $( this ).closest( 'div.folder' ),  
open = $folder.data( 'isOpen' );  
if( config.bb.isActive() ) return false;  
if( !open ) {  
openFolder();  
}  
return false;  
});  

config.$folderClose.on( 'click', function() {  
var $folder = $( this ).closest( 'div.folder' ),  
open = $folder.data( 'isOpen' );  
if( config.bb.isActive() ) return false;  
if( open ) {  
closeFolder();  
}  
return false;  
});  
},  
openFolder = function() {  
var $fold = config.$folder.find( 'div.folder-fold' ).css( config.transitionProperty ),  
$inner = config.$folder.find( 'div.folder-inner' ),  
transEndEventName = config.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];  
setTimeout( function() {  
$fold.css( 'transform', 'rotateY(180deg)' ).on( transEndEventName , function() {  
$fold.off( transEndEventName ).css( 'z-index', 1 ).css( 'transition', 'none' ).css( 'transform', 'rotateY(-180deg)' );  
$inner.css( 'transform', 'translateX(310px)' );  
});  
config.$folder.data( 'isOpen', true );  
}, 0 );  
},  
closeFolder = function() {  
var $fold = config.$folder.find( 'div.folder-fold' ),  
$inner = config.$folder.find( 'div.folder-inner' ),  
transEndEventName = config.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];  
$inner.css( 'transform', 'translateX(0px)' ).on( transEndEventName , function() {  
$inner.off( transEndEventName );  
$fold.css( 'transform', 'rotateY(180deg)' );  
setTimeout( function() {  
$fold.css( config.transitionProperty ).css( {  
transform : 'rotateY(0deg)',  
zIndex : 4  
}).on( transEndEventName , function() {  
$fold.off( transEndEventName );  
});  
}, 0);  
});  
config.$folder.data( 'isOpen', false );  
},  
checkFolder = function( callback ) {  
var $fold = config.$folder.find( 'div.folder-fold' ),  
transEndEventName = config.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];  
if( config.$folder.data( 'isOpen' ) ) {  
$fold.on( transEndEventName , function() {  
$fold.off( transEndEventName );  
callback.call();  
});  
closeFolder();  
}  
else {  
callback.call();  
}};  
return { init : init };  
})();  
Page.init();  
});  
</script>