Team:TU-Delft/Team/General

From 2011.igem.org

(Difference between revisions)
 
(18 intermediate revisions not shown)
Line 1: Line 1:
{{TU-header3}}
{{TU-header3}}
__NOTOC__
__NOTOC__
-
<html><head>
+
<html>
-
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js" ></script>
+
<script type='text/javascript' src='http://mycraft.gr/wp-content/plugins/mc-booklet/js/jquery.easing.1.3.js?ver=3.0.3'></script>
-
<script src="booklet/jquery.easing.1.3.js" type="text/javascript" ></script>
+
<script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/cufon-yui.js" type="text/javascript"></script>
-
<script src="booklet/jquery.booklet.1.1.0.min.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>
-
<link href="http://tympanus.net/Tutorials/MoleskineNotebook/booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
+
<script type='text/javascript' src='http://mycraft.gr/wp-content/plugins/mc-booklet/js/jquery.booklet.1.1.0.min.js?ver=3.0.3'></script>
-
<link rel="stylesheet" href="http://tympanus.net/Tutorials/MoleskineNotebook/css/style.css" type="text/css" media="screen" />
+
<script type="text/javascript">
-
 
+
Cufon.replace('h1,p,.b-counter');
-
<script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/cufon-yui.js" type="text/javascript" ></script>
+
Cufon.replace('.book_wrapper a', {hover:true});
-
<script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/ChunkFive_400.font.js" type="text/javascript" ></script>
+
Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
-
<script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/Note_this_400.font.js" type="text/javascript" ></script>
+
Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
-
<script type="text/javascript" >
+
Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
-
Cufon.replace('h1,p,.b-counter');
+
</script>
-
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>
+
-
<body>
+
<div class="book_wrapper">
<div class="book_wrapper">
Line 33: Line 26:
<div>
<div>
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/1.jpg" alt=""/>
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/1.jpg" alt=""/>
-
<h1>Slider Gallery</h1>
+
<h3>Week 24</h3>
-
<p>This tutorial is about creating a creative gallery...</p>
+
<p>What we did in week 24</p>
<a href="#" class="article">Article</a>
<a href="#" class="article">Article</a>
<a href="#" class="demo">Demo</a>
<a href="#" class="demo">Demo</a>
Line 40: Line 33:
<div>
<div>
-
...
+
...
</div>
</div>
-
 
+
</div>
</div>
</div>
</div>
Line 48: Line 41:
-
        <!-- The JavaScript -->
+
<style type="text/css">
 +
.booklet          {
 +
width:900px;
 +
height:607px;
 +
position:relative;
 +
margin:0 auto 10px;
 +
-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:1000px;
 +
height:540px;
 +
position:relative;
 +
background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/bg.png) no-repeat 9px 27px;
 +
}
 +
.book_wrapper h3{
 +
color:#13386a;
 +
margin:5px 5px 5px 50px;
 +
font-size:26px;
 +
background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/h1.png) no-repeat bottom left;
 +
width:1000px;
 +
padding-bottom:7px;
 +
}
 +
.book_wrapper p{
 +
font-size:16px;
 +
margin:5px 5px 5px 50px;
 +
}
 +
.book_wrapper a.article,
 +
.book_wrapper a.demo{
 +
background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/circle.png) no-repeat 50% 0px;
 +
display:block;
 +
width:95px;
 +
height:41px;
 +
text-decoration:none;
 +
outline:none;
 +
font-size:16px;
 +
color:#555;
 +
float:left;
 +
line-height:41px;
 +
padding-left:47px;
 +
}
 +
.book_wrapper a.demo{
 +
margin-left:50px;
 +
}
 +
.book_wrapper a.article:hover,
 +
.book_wrapper a.demo:hover{
 +
background-position:50% -41px;
 +
color:#13386a;
 +
}
 +
.book_wrapper img{
 +
margin:10px 0px 5px 50px;
 +
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;
 +
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
 +
}
-
        <script type="text/javascript" >
+
</style>
-
$(function() {
+
<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 $mybook = $('#mybook');
-
var $img = $(this);
+
var $bttn_next = $('#next_page_button');
-
var source = $img.attr('src');
+
var $bttn_prev = $('#prev_page_button');
-
$('<img/>').load(function(){
+
var $loading = $('#loading');
-
++loaded;
+
var $mybook_images = $mybook.find('img');
-
if(loaded == cnt_images){
+
var cnt_images = $mybook_images.length;
-
$loading.hide();
+
var loaded = 0;
-
$bttn_next.show();
+
//preload all the images in the book,
-
$bttn_prev.show();
+
//and then call the booklet plugin
-
$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
+
$mybook_images.each(function(){
-
closedFrontTitle:   null,                           // used with "closed", "menu" and "pageSelector", determines title of blank starting page
+
var $img = $(this);
-
closedFrontChapter: null,                           // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
+
var source = $img.attr('src');
-
closedBackTitle:   null,                           // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
+
$('<img/>').load(function(){
-
closedBackChapter: null,                           // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
+
++loaded;
-
covers:            false,                           // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)
+
if(loaded == cnt_images){
 +
$loading.hide();
 +
$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
-
pagePadding:       10,                             // padding for each page wrapper
+
closed:             true,
-
pageNumbers:       true,                           // display page numbers on each page
+
// 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)
-
hovers:             false,                           // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
+
pagePadding:       10,
-
overlays:          false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
+
// padding for each page wrapper
-
tabs:               false,                           // adds tabs along the top of the pages
+
pageNumbers:       true,
-
tabWidth:          60,                              // set the width of the tabs
+
// display page numbers on each page
-
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
+
hovers:             false,
-
keyboard:          true,                           // enables navigation with arrow keys (left: previous, right: next)
+
// enables preview pageturn hover animation,
-
next:               $bttn_next,         // selector for element to use as click trigger for next page
+
// shows a small preview of previous or next page on hover
-
prev:               $bttn_prev,         // selector for element to use as click trigger for previous page
+
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
-
menu:              null,                           // selector for element to use as the menu area, required for 'pageSelector'
+
hash:              false,
-
pageSelector:       false,                           // enables navigation with a dropdown menu of pages, requires 'menu'
+
// enables navigation using a hash string,
-
chapterSelector:   false,                           // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
+
// 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
-
shadows:           true,                           // display shadows on page animations
+
menu:               null,
-
shadowTopFwdWidth:  166,                             // shadow width for top forward anim
+
// selector for element to use as the menu area,
-
shadowTopBackWidth: 166,                             // shadow width for top back anim
+
// required for 'pageSelector'
-
shadowBtmWidth:     50,                             // shadow width for bottom shadow
+
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'
-
before:            function(){},                   // callback invoked before each page turn animation
+
shadows:            true,
-
after:              function(){}                     // callback invoked after each page turn animation
+
// display shadows on page animations
-
});
+
shadowTopFwdWidth:  166,
-
Cufon.refresh();
+
// shadow width for top forward anim
-
}
+
shadowTopBackWidth: 166,
-
}).attr('src',source);
+
// 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
});
});
-
        </script>
+
Cufon.refresh(); // if you want to use cufon
-
   
+
}
-
</body>
+
}).attr('src',source);
 +
});
 +
</script>
 +
 
 +
 
</html>
</html>
{{TU-footer}}
{{TU-footer}}

Latest revision as of 13:45, 16 June 2011



TUDelft Logo2 TUDelft Logo2 TUDelft Logo2 TUDelft Logo2 TUDelft Logo2 TUDelft Logo2

Loading pages...

Back to iGEM.org

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