WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

本のようにめくれるjQueryプラグインbookblock

tympanus.net

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>bookblock.js</title>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/modernizr.custom.79639.js"></script>
</head>
<body>
<div class="container">
<header>
<h1>動物</h1>

</header>
<div class="main">
<div class="bb-custom-wrapper">
<div class="bb-bookblock" id="bb-bookblock">
<div class="bb-item">
<p><img src="img/01.png" alt="犬ぞり"></p>
</div><!-- /.bb-item -->
<p id="vertical"><span>ブレーメン</span></p>
<div class="bb-item">
<p><img src="img/02.png" alt="ブレーメン"></p>
</div><!-- /.bb-item -->
<p id="vertical"><span>シベリアンハスキー</span></p>
<div class="bb-item">
<p><img src="img/03.png" alt="シベリアンハスキー"></p>
</div><!-- /.bb-item -->
<p id="vertical"><span>ダルメシアン</span></p>
<div class="bb-item">
<p><img src="img/04.png" alt="ダルメシアン"></p>
</div><!-- /.bb-item -->

</div><!-- /.bb-bookblock -->
<nav>
<a id="bb-nav-top" href="#" title="最初のページへ">Top</a>
<a id="bb-nav-prev" href="#" title="前のページへ">Previous</a>
<a id="bb-nav-next" href="#" title="次のページへ">Next</a>
<a id="bb-nav-jump" href="#" title="最後のページヘ">Last page</a>
</nav>
</div><!-- /.bb-costom-wrapper -->
</div><!-- /.main -->
</div><!-- /#container -->
<script src="js/jquerypp.custom.js"></script>
<script src="js/jquery.bookblock.js"></script>
<script>
			$(function() {

				var Page = (function() {

					var config = {
							$bookBlock: $( '#bb-bookblock' ),
							$navTop	: $( '#bb-nav-top' ),
							$navNext	: $( '#bb-nav-next' ),
							$navPrev	: $( '#bb-nav-prev' ),
							$navJump	: $( '#bb-nav-jump' ),
							bb				: $( '#bb-bookblock' ).bookblock( {
							} )
						},
						init = function() {

							initEvents();
							
						},
						initEvents = function() {
							var $slides = config.$bookBlock.children(),
									totalSlides = $slides.length;

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

							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>
</body>
</html>