"
Team:HokkaidoU Japan
From 2014.igem.org
(Difference between revisions)
| Line 28: | Line 28: | ||
</div> | </div> | ||
<!--end header--> | <!--end header--> | ||
| - | <div class="clearfix"></div> | + | <div class="container"> |
| + | <h1>BookBlock <span>A Content Flip Plugin</span></h1> | ||
| + | <nav class="codrops-demos"> | ||
| + | <a class="current-demo" href="index.html">Demo 1</a> | ||
| + | <a href="index2.html">Demo 2</a> | ||
| + | <a href="index3.html">Demo 3</a> | ||
| + | <a href="index4.html">Demo 4</a> | ||
| + | <a href="index5.html">Demo 5</a> | ||
| + | </nav> | ||
| + | </header> | ||
| + | <div class="main clearfix"> | ||
| + | <div class="bb-custom-wrapper"> | ||
| + | <h3>Illustrations by <a href="http://dribbble.com/kevinhowdeshell">Kevin Howdeshell</a></h3> | ||
| + | <div id="bb-bookblock" class="bb-bookblock"> | ||
| + | <div class="bb-item"> | ||
| + | <a href="http://drbl.in/bKVq"><img src="images/demo1/1.jpg" alt="image01"/></a> | ||
| + | </div> | ||
| + | <div class="bb-item"> | ||
| + | <a href="http://drbl.in/ciTX"><img src="images/demo1/2.jpg" alt="image02"/></a> | ||
| + | </div> | ||
| + | <div class="bb-item"> | ||
| + | <a href="http://drbl.in/cLHx"><img src="images/demo1/3.jpg" alt="image03"/></a> | ||
| + | </div> | ||
| + | <div class="bb-item"> | ||
| + | <a href="http://drbl.in/bAfn"><img src="images/demo1/4.jpg" alt="image04"/></a> | ||
| + | </div> | ||
| + | <div class="bb-item"> | ||
| + | <a href="http://drbl.in/dcbE"><img src="images/demo1/5.jpg" alt="image05"/></a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <nav> | ||
| + | <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a> | ||
| + | <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a> | ||
| + | <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a> | ||
| + | <a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a> | ||
| + | </nav> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div><!-- /container --> | ||
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | ||
| + | <script src="js/jquerypp.custom.js"></script> | ||
| + | <script src="js/jquery.bookblock.js"></script> | ||
| + | <script> | ||
| + | var Page = (function() { | ||
| + | |||
| + | var config = { | ||
| + | $bookBlock : $( '#bb-bookblock' ), | ||
| + | $navNext : $( '#bb-nav-next' ), | ||
| + | $navPrev : $( '#bb-nav-prev' ), | ||
| + | $navFirst : $( '#bb-nav-first' ), | ||
| + | $navLast : $( '#bb-nav-last' ) | ||
| + | }, | ||
| + | init = function() { | ||
| + | config.$bookBlock.bookblock( { | ||
| + | speed : 800, | ||
| + | shadowSides : 0.8, | ||
| + | shadowFlip : 0.7 | ||
| + | } ); | ||
| + | initEvents(); | ||
| + | }, | ||
| + | initEvents = function() { | ||
| + | |||
| + | var $slides = config.$bookBlock.children(); | ||
| + | |||
| + | // add navigation events | ||
| + | config.$navNext.on( 'click touchstart', function() { | ||
| + | config.$bookBlock.bookblock( 'next' ); | ||
| + | return false; | ||
| + | } ); | ||
| + | |||
| + | config.$navPrev.on( 'click touchstart', function() { | ||
| + | config.$bookBlock.bookblock( 'prev' ); | ||
| + | return false; | ||
| + | } ); | ||
| + | |||
| + | config.$navFirst.on( 'click touchstart', function() { | ||
| + | config.$bookBlock.bookblock( 'first' ); | ||
| + | return false; | ||
| + | } ); | ||
| + | |||
| + | config.$navLast.on( 'click touchstart', function() { | ||
| + | config.$bookBlock.bookblock( 'last' ); | ||
| + | return false; | ||
| + | } ); | ||
| + | |||
| + | // add swipe events | ||
| + | $slides.on( { | ||
| + | 'swipeleft' : function( event ) { | ||
| + | config.$bookBlock.bookblock( 'next' ); | ||
| + | return false; | ||
| + | }, | ||
| + | 'swiperight' : function( event ) { | ||
| + | config.$bookBlock.bookblock( 'prev' ); | ||
| + | return false; | ||
| + | } | ||
| + | } ); | ||
| + | |||
| + | // add keyboard events | ||
| + | $( document ).keydown( function(e) { | ||
| + | var keyCode = e.keyCode || e.which, | ||
| + | arrow = { | ||
| + | left : 37, | ||
| + | up : 38, | ||
| + | right : 39, | ||
| + | down : 40 | ||
| + | }; | ||
| + | |||
| + | switch (keyCode) { | ||
| + | case arrow.left: | ||
| + | config.$bookBlock.bookblock( 'prev' ); | ||
| + | break; | ||
| + | case arrow.right: | ||
| + | config.$bookBlock.bookblock( 'next' ); | ||
| + | break; | ||
| + | } | ||
| + | } ); | ||
| + | }; | ||
| + | |||
| + | return { init : init }; | ||
| + | |||
| + | })(); | ||
| + | </script> | ||
| + | <script> | ||
| + | Page.init(); | ||
Revision as of 10:37, 15 September 2014
Top
Project
Human Practice
About Us
BookBlock A Content Flip Plugin
Illustrations by Kevin Howdeshell
