Team:TU-Delft/Team/General

From 2011.igem.org

(Difference between revisions)
Line 2: Line 2:
__NOTOC__
__NOTOC__
<html>
<html>
 +
<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();
 +
$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>
 +
<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>
 +
<div class="book_wrapper">
<div class="book_wrapper">
Line 23: Line 162:
<a href="http://tympanus.net/codrops/2010/10/07/slider-gallery/" target="_blank" class="article">Article</a>
<a href="http://tympanus.net/codrops/2010/10/07/slider-gallery/" target="_blank" class="article">Article</a>
<a href="http://tympanus.net/Tutorials/SliderGallery/" target="_blank" class="demo">Demo</a>
<a href="http://tympanus.net/Tutorials/SliderGallery/" target="_blank" class="demo">Demo</a>
-
</div>
+
</div></div>
 +
<div class="b-load">
<div>
<div>
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/2.jpg" alt="" />
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/2.jpg" alt="" />
Line 35: Line 175:
<a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a>
<a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a>
</div>
</div>
-
<div>
+
-
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/3.jpg" alt="" />
+
-
<h1>Annotation Overlay Effect</h1>
+
-
<p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
+
-
items of a web designers portfolio. We got the idea from the wonderful
+
-
portfolio of www.rareview.com where Flash is used to create the
+
-
effect. We will use jQuery.</p>
+
-
<a href="http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/AnnotationOverlayEffect/" target="_blank" class="demo">Demo</a>
+
-
</div>
+
-
<div>
+
-
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/4.jpg" alt="" />
+
-
<h1>Bubbleriffic Image Gallery</h1>
+
-
<p>In this tutorial we will create a bubbly image gallery that
+
-
shows your images in a unique way. The idea is to show the
+
-
thumbnails of albums in a rounded fashion allowing the
+
-
user to scroll them automatically by moving the mouse.
+
-
Clicking on a thumbnail will zoom in a big circle and
+
-
the full image which will be automatically resized to
+
-
fit into the screen.</p>
+
-
<a href="http://tympanus.net/codrops/2010/12/10/bubbleriffic-image-gallery/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/BubblerifficImageGallery/" target="_blank" class="demo">Demo</a>
+
-
</div>
+
-
<div>
+
-
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/5.jpg" alt="" />
+
-
<h1>Collapsing Site Navigation</h1>
+
-
<p>Today we will create a collapsing menu that contains vertical
+
-
navigation bars and a slide out content area. When hovering
+
-
over a menu item, an image slides down from the top and a
+
-
submenu slides up from the bottom. Clicking on one of the
+
-
submenu items will make the whole menu collapse like a card
+
-
deck and the respective content area will slide out.</p>
+
-
<a href="http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/CollapsingSiteNavigation/" target="_blank" class="demo">Demo</a>
+
-
</div>
+
-
<div>
+
-
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/6.jpg" alt="" />
+
-
<h1>Custom Animation Banner</h1>
+
-
<p>In today’s tutorial we will be creating a custom animation banner with jQuery.
+
-
The idea is to have different elements in a banner that will
+
-
animate step-wise in a custom way.</p>
+
-
<p>We will be using the jQuery Easing Plugin and the jQuery 2D
+
-
Transform Plugin to create some nifty animations.</p>
+
-
<a href="http://tympanus.net/codrops/2010/10/18/custom-animation-banner/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/CustomAnimationBanner/" target="_blank" class="demo">Demo</a>
+
-
</div>
+
-
<div>
+
-
<img src="http://tympanus.net/Tutorials/MoleskineNotebook/images/7.jpg" alt="" />
+
-
<h1>Full Page Image Gallery</h1>
+
-
<p>In this tutorial we are going to create a stunning full page
+
-
gallery with scrollable thumbnails and a scrollable full
+
-
screen preview. The idea is to have a thumbnails bar at
+
-
the bottom of the page that scrolls automatically when
+
-
the user moves the mouse. When a thumbnail is clicked,
+
-
it moves to the center of the page and the full screen
+
-
image is loaded in the background.</p>
+
-
<a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/FullPageImageGallery/" target="_blank" class="demo">Demo</a>
+
-
</div>
+
</div>
</div>
Line 272: Line 354:
</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();
 
-
$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>
 
-
<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>
 
</html>
</html>
{{TU-footer}}
{{TU-footer}}

Revision as of 11:06, 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"