Team:TU-Delft/Test2

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<div class="book_wrapper">
-
<script src=”http://tympanus.net/Tutorials/MoleskineNotebook/cufon/cufon-yui.js” type=”text/javascript”></script>
+
-
<script src=”http://tympanus.net/Tutorials/MoleskineNotebook/cufon/ChunkFive_400.font.js” type=”text/javascript”></script>
+
-
<script src=”http://tympanus.net/Tutorials/MoleskineNotebook/cufon/Note_this_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:’ChunkFive’});
+
-
Cufon.replace(‘.reference a’, {textShadow: ’1px 1px #C59471′, fontFamily:’ChunkFive’});
+
-
Cufon.replace(‘.loading’, {textShadow: ’1px 1px #000′, fontFamily:’ChunkFive’});
+
-
</script>
+
-
</head>
+
-
<div>
+
<a id="next_page_button"></a>
-
<a id=”next_page_button”></a>
+
<a id="prev_page_button"></a>
-
<a id=”prev_page_button”></a>
+
-
<div id=”mybook” style=”display:none;”>
+
-
<div>
+
-
<div>
+
-
<img src=”https://static.igem.org/mediawiki/2011/3/37/TUDelft-Template-Project.jpg” alt=”"/>
+
-
<h1>Slider Gallery</h1>
+
-
<p>This tutorial is about creating a creative gallery…</p>
+
-
<a href=”#”>Article</a>
+
-
<a href=”#”>Demo</a>
+
-
</div>
+
-
<div>
+
-
…
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<style type="text/css">
+
<div id="loading" class="loading">Loading pages...</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      {top:0; position:absolute;}
+
<div id="mybook" style="display:none;">
-
.booklet .b-wrap-left  {background:#fff;}
+
<div class="b-load">
-
.booklet .b-wrap-right {background:#efefef;}
+
-
+
-
.booklet .b-pN .b-wrap,
+
-
.booklet .b-p1 .b-wrap,
+
-
.booklet .b-p2 .b-wrap,
+
-
.booklet .b-p3 .b-wrap,
+
-
.booklet .b-p4 .b-wrap  {left:0;}
+
-
.booklet .b-p0 .b-wrap  {right:0;}
+
-
.booklet .b-counter {bottom:10px; position:absolute; display:block; width:25px; height:20px; background:#ccc; color:#444; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; padding:5px 0 0;}
+
<div>
 +
<h1>Slider Gallery</h1>
 +
<p>This tutorial is about creating a creative gallery...</p>
 +
<a href="#" class="article">Article</a>
 +
<a href="#" class="demo">Demo</a>
 +
</div>
-
.book_wrapper{
+
<div>
-
margin:0 auto;
+
...
-
padding-top:50px;
+
</div>
-
width:905px;
+
-
height:540px;
+
-
position:relative;
+
-
background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook//images/bg.png) no-repeat 9px 27px;
+
-
}
+
-
a#next_page_button,
+
</div>
-
a#prev_page_button{
+
</div>
-
display:none;
+
</div>
-
position:absolute;
+
 
-
width:41px;
+
<style type="text/css">
-
height:40px;
+
.booklet{
-
cursor:pointer;
+
-moz-box-shadow:0px 0px 1px #fff;
-
margin-top:-20px;
+
-webkit-box-shadow:0px 0px 1px #fff;
-
top:50%;
+
box-shadow:0px 0px 1px #fff;
-
background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/) no-repeat 0px -40px;
+
-moz-border-radius:10px;
 +
-webkit-border-radius:10px;
 +
border-radius:10px;
}
}
-
a#prev_page_button{
+
.booklet .b-wrap-left{
-
left:-30px;
+
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;
}
}
-
a#next_page_button{
+
.booklet .b-wrap-right{
-
right:-30px;
+
background:#efefef url(../images/right_bg.jpg) no-repeat top left;
-
background-position:-41px -40px;
+
-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;
}
}
-
a#next_page_button:hover{
+
.booklet .b-counter{
-
background-position:-41px 0px;
+
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;
}
}
-
a#prev_page_button:hover{
+
.book_wrapper{
-
background-position:0px 0px;
+
    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;
 +
padding-bottom:7px;
}
}
</style>
</style>
-
<script type="text/javascript">
 
-
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;
 
-
//preload all the images in the book,
 
-
//and then call the booklet plugin
 
-
$mybook_images.each(function(){
 
-
var $img = $(this);
 
-
var source = $img.attr(‘src’);
 
-
$(‘<img/>’).load(function(){
 
-
++loaded;
 
-
if(loaded == cnt_images){
 
-
$loading.hide(true);
 
-
$bttn_next.show();
 
-
$bttn_prev.show();
 
-
$mybook.show().booklet({
 
-
name: null,
 
-
// name of the booklet to display in the document title bar
 
-
width: 800,
 
-
// container width
 
-
height: 500,
 
-
// container height
 
-
speed: 600,
 
-
// speed of the transition between pages
 
-
direction: ‘LTR’,
 
-
// direction of the overall content
 
-
// organization, default LTR, left to right, can be
 
-
// RTL for languages which read right to left
 
-
startingPage: 0,
 
-
// index of the first page to be displayed
 
-
easing: ‘easeInOutQuad’,
 
-
// easing method for complete transition
 
-
easeIn: ‘easeInQuad’,
 
-
// easing method for first half of transition
 
-
easeOut: ‘easeOutQuad’,
 
-
// easing method for second half of transition
 
-
closed: true,
 
-
// start with the book “closed”, will add empty
 
-
// pages to beginning and end of book
 
-
closedFrontTitle: null,
 
-
// used with “closed”, “menu” and “pageSelector”,
 
-
// determines title of blank starting page
 
-
closedFrontChapter: null,
 
-
// used with “closed”, “menu” and “chapterSelector”,
 
-
// determines chapter name of blank starting page
 
-
closedBackTitle: null,
 
-
// used with “closed”, “menu” and “pageSelector”,
 
-
// determines chapter name of blank ending page
 
-
closedBackChapter: null,
 
-
// used with “closed”, “menu” and “chapterSelector”,
 
-
// determines chapter name of blank ending page
 
-
covers: false,
 
-
// used with “closed”, makes first and last pages
 
-
//into covers, without page numbers (if enabled)
 
-
pagePadding: 10,
 
-
// padding for each page wrapper
 
-
pageNumbers: true,
 
-
// display page numbers on each page
 
-
hovers: false,
 
-
// enables preview pageturn hover animation,
 
-
// shows a small preview of previous or next page on hover
 
-
overlays: false,
 
-
// enables navigation using a page sized overlay,
 
-
// when enabled links inside the content will
 
-
// not be clickable
 
-
tabs: false,
 
-
// adds tabs along the top of the pages
 
-
tabWidth: 60,
 
-
// set the width of the tabs
 
-
tabHeight: 20,
 
-
// set the height of the tabs
 
-
arrows: false,
 
-
// adds arrows overlayed over the book edges
 
-
cursor: ‘pointer’,
 
-
// cursor css setting for side bar areas
 
-
hash: false,
 
-
// enables navigation using a hash string,
 
-
// ex: #/page/1 for page 1, will affect
 
-
// all booklets with ‘hash’ enabled
 
-
keyboard: true,
 
-
// enables navigation with arrow keys
 
-
// (left: previous, right: next)
 
-
next: $bttn_next,
 
-
// selector for element to use as click
 
-
// trigger for next page
 
-
prev: $bttn_prev,
 
-
// selector for element to use as click
 
-
// trigger for previous page
 
-
menu: null,
 
-
// selector for element to use as the menu area,
 
-
// required for ‘pageSelector’
 
-
pageSelector: false,
 
-
// enables navigation with a dropdown menu of pages,
 
-
// requires ‘menu’
 
-
chapterSelector: false,
 
-
// enables navigation with a dropdown menu of chapters,
 
-
// determined by the “rel” attribute, requires ‘menu’
 
-
shadows: true,
 
-
// display shadows on page animations
 
-
shadowTopFwdWidth: 166,
 
-
// shadow width for top forward anim
 
-
shadowTopBackWidth: 166,
 
-
// shadow width for top back anim
 
-
shadowBtmWidth: 50,
 
-
// shadow width for bottom shadow
 
-
before: function(){},
 
-
// callback invoked before each page turn animation
 
-
after: function(){}
 
-
// callback invoked after each page turn animation
 
-
});
 
-
Cufon.refresh(); // if you want to use cufon
 
-
}
 
-
}).attr(‘src’,source);
 
-
});
 
-
</script>
 
</html>
</html>

Revision as of 13:11, 16 June 2011

Loading pages...

Retrieved from "http://2011.igem.org/Team:TU-Delft/Test2"