Team:UESTC Life
From 2013.igem.org
(Difference between revisions)
Neptune Yu (Talk | contribs) |
|||
Line 1: | Line 1: | ||
- | === | + | <html> |
- | + | <head> | |
+ | <title>UESTC LIFE</title> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=8" /> | ||
+ | <meta name="keywords" content="jquery, book, flip, pages, moleskine, booklet, plugin, css3 "/> | ||
+ | <link href="https://2013.igem.org/Team:UESTC_Life/css/jquery.booklet.1.1.0.css?action=raw&ctype=text/css" type="text/css" rel="stylesheet" media="screen" /> | ||
+ | <link rel="stylesheet" href="https://2013.igem.org/Team:UESTC_Life/css/style.css?action=raw&ctype=text/css" type="text/css" media="screen"/> | ||
+ | <link href="https://2013.igem.org/Team:UESTC_Life/css/style_dock.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" /> | ||
- | + | <script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery-1.4.4.min.js?action=raw&ctype=text/javascript"></script> | |
- | + | <script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script> | |
- | : | + | <script src="https://2013.igem.org/Team:UESTC_Life/js/biot_jquery.booklet.1.1.0.min.js?action=raw&ctype=text/javascript"></script> |
- | + | ||
- | [[ | + | |
+ | |||
+ | <!--[if lte IE 7]> | ||
+ | <style> | ||
+ | /* Inline block fix */ | ||
+ | #dock ul { | ||
+ | display: inline; | ||
+ | zoom: 1; | ||
+ | } | ||
+ | |||
+ | #dock li, #dock li a { | ||
+ | display: inline; | ||
+ | zoom: 1; | ||
+ | } | ||
+ | |||
+ | /* Image quality fix */ | ||
+ | img { | ||
+ | -ms-interpolation-mode: bicubic; | ||
+ | } | ||
+ | |||
+ | #dock li a span { | ||
+ | filter: alpha(opacity=40); | ||
+ | } | ||
+ | </style> | ||
+ | <![endif]--> | ||
+ | |||
+ | <script> | ||
+ | //library | ||
+ | function distance(x0, y0, x1, y1) { | ||
+ | var xDiff = x1-x0; | ||
+ | var yDiff = y1-y0; | ||
+ | |||
+ | return Math.sqrt(xDiff*xDiff + yDiff*yDiff); | ||
+ | } | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | var proximity = 180; | ||
+ | var iconSmall = 48, iconLarge = 98; //css also needs changing to compensate with size | ||
+ | var iconDiff = (iconLarge - iconSmall); | ||
+ | var mouseX, mouseY; | ||
+ | var dock = $("#dock"); | ||
+ | var animating = false, redrawReady = false; | ||
+ | |||
+ | $(document.body).removeClass("no_js"); | ||
+ | |||
+ | //below are methods for maintaining a constant 60fps redraw for the dock without flushing | ||
+ | $(document).bind("mousemove", function(e) { | ||
+ | if (dock.is(":visible")) { | ||
+ | mouseX = e.pageX; | ||
+ | mouseY = e.pageY; | ||
+ | |||
+ | redrawReady = true; | ||
+ | registerConstantCheck(); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | function registerConstantCheck() { | ||
+ | if (!animating) { | ||
+ | animating = true; | ||
+ | |||
+ | window.setTimeout(callCheck, 15); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function callCheck() { | ||
+ | sizeDockIcons(); | ||
+ | |||
+ | animating = false; | ||
+ | |||
+ | if (redrawReady) { | ||
+ | redrawReady = false; | ||
+ | registerConstantCheck(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | //do the maths and resize each icon | ||
+ | function sizeDockIcons() { | ||
+ | dock.find("li").each(function() { | ||
+ | //find the distance from the center of each icon | ||
+ | var centerX = $(this).offset().left + ($(this).outerWidth()/2.0); | ||
+ | var centerY = $(this).offset().top + ($(this).outerHeight()/2.0); | ||
+ | |||
+ | var dist = distance(centerX, centerY, mouseX, mouseY); | ||
+ | |||
+ | //determine the new sizes of the icons from the mouse distance from their centres | ||
+ | var newSize = (1 - Math.min(1, Math.max(0, dist/proximity))) * iconDiff + iconSmall; | ||
+ | $(this).find("a").css({width: newSize}); | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | <script> | ||
+ | Get_IE_Version(); | ||
+ | </script> | ||
+ | <div class="book_wrapper"> | ||
+ | <a id="next_page_button"></a> | ||
+ | <a id="prev_page_button"></a> | ||
+ | <div id="loading" class="loading">Loading pages...</div> | ||
+ | <div id="mybook" style="display:none;"> | ||
+ | <div class="b-load"> | ||
+ | <div> | ||
+ | <img src="images/1.jpg" alt=""/> | ||
+ | <h1>Slider Gallery</h1> | ||
+ | <p>This tutorial is about creating a creative gallery with a | ||
+ | slider for the thumbnails. The idea is to have an expanding | ||
+ | thumbnails area which opens once an album is chosen. | ||
+ | The thumbnails will scroll to the end and move back to | ||
+ | the first image. The user can scroll through the thumbnails | ||
+ | by using the slider controls. When a thumbnail is clicked, | ||
+ | it moves to the center and the full image preview opens.</p> | ||
+ | <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> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="images/2.jpg" alt="" /> | ||
+ | <h1>Animated Portfolio Gallery</h1> | ||
+ | <p>Today we will create an animated portfolio gallery with jQuery. | ||
+ | The gallery will contain a scroller for thumbnails and a | ||
+ | content area where we will display details about the portfolio | ||
+ | item. The image can be enlarged by clicking on it, making | ||
+ | it appear as an overlay.</p> | ||
+ | <a href="http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/" target="_blank" class="article">Article</a> | ||
+ | <a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="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="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="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="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="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> | ||
+ | <img src="images/8.jpg" alt="" /> | ||
+ | <h1>Hover Slide Effect</h1> | ||
+ | <p>Today we will create a neat effect with some images using | ||
+ | jQuery. The main idea is to have an image area with several | ||
+ | images that slide out when we hover over them, revealing | ||
+ | other images. The sliding effect will be random, i.e. | ||
+ | the images will slide to the top or bottom, left or | ||
+ | right, fading out or not. When we click on any area, | ||
+ | all areas will slide their images out.</p> | ||
+ | <a href="http://tympanus.net/codrops/2010/11/16/hover-slide-effect/" target="_blank" class="article">Article</a> | ||
+ | <a href="http://tympanus.net/Tutorials/HoverSlideEffect/" target="_blank" class="demo">Demo</a> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="images/9.jpg" alt="" /> | ||
+ | <h1>Merging Image Boxes</h1> | ||
+ | <p>Today we will show you a nice effect for images with jQuery. | ||
+ | The idea is to have a set of rotated thumbnails that, | ||
+ | once clicked, animate to form the selected image. | ||
+ | You can navigate through the images with previous | ||
+ | and next buttons and when the big image gets clicked | ||
+ | it will scatter into the little box shaped thumbnails again.</p> | ||
+ | <a href="http://tympanus.net/codrops/2010/11/30/merging-image-boxes/" target="_blank" class="article">Article</a> | ||
+ | <a href="http://tympanus.net/Development/MergingImageBoxes/" target="_blank" class="demo">Demo</a> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="images/10.jpg" alt="" /> | ||
+ | <h1>Compact News Previewer</h1> | ||
+ | <p>Today we will create a news previewer that let’s you | ||
+ | show your latest articles or news in a compact way. | ||
+ | The news previewer will show some list of articles | ||
+ | on the left side and the preview of the article with a | ||
+ | longer description on the right. Once a news on the left | ||
+ | is clicked, the preview will slide in.</p> | ||
+ | <a href="http://tympanus.net/codrops/2010/10/03/compact-news-previewer/" target="_blank" class="article">Article</a> | ||
+ | <a href="http://tympanus.net/Tutorials/CompactNewsPreviewer/" target="_blank" class="demo">Demo</a> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="images/11.jpg" alt="" /> | ||
+ | <h1>Overlay Effect Menu</h1> | ||
+ | <p>In this tutorial we are going to create a simple menu | ||
+ | that will stand out once we hover over it by covering | ||
+ | everything except the menu with a dark overlay. | ||
+ | The menu will stay white and a submenu area will | ||
+ | expand. We will create this effect using jQuery.</p> | ||
+ | <a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/" target="_blank" class="article">Article</a> | ||
+ | <a href="http://tympanus.net/Tutorials/OverlayEffectMenu/" target="_blank" class="demo">Demo</a> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="images/12.jpg" alt="" /> | ||
+ | <h1>Polaroid Photobar Gallery</h1> | ||
+ | <p>In this tutorial we are going to create an image gallery | ||
+ | with a Polaroid look. We will have albums that will expand | ||
+ | to sets of slightly rotated thumbnails that pop out on hover. | ||
+ | The full image will slide in from the bottom once a thumbnail | ||
+ | is clicked. In the full image view the user can navigate | ||
+ | through the pictures or simply choose another thumbnail | ||
+ | to be displayed.</p> | ||
+ | <a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="article">Article</a> | ||
+ | <a href="http://tympanus.net/Tutorials/PolaroidPhotobarGallery/" target="_blank" class="demo">Demo</a> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="images/13.jpg" alt="" /> | ||
+ | <h1>Pull Out Content Panel</h1> | ||
+ | <p>In this tutorial we will create a content panel that | ||
+ | slides out at a predefined scroll position. It will | ||
+ | reveal a teaser with related content and it can be | ||
+ | expanded to full page size to show more. A custom | ||
+ | slider allows to scroll through many items in the | ||
+ | panel.</p> | ||
+ | <a href="http://tympanus.net/codrops/2010/11/01/pull-out-content-panel/" target="_blank" class="article">Article</a> | ||
+ | <a href="http://tympanus.net/Tutorials/PullOutContentPanel/" target="_blank" class="demo">Demo</a> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="images/14.jpg" alt="" /> | ||
+ | <h1>Thumbnails Navigation Gallery</h1> | ||
+ | <p>In this tutorial we are going to create an extraordinary | ||
+ | gallery with scrollable thumbnails that slide out from a | ||
+ | navigation. We are going to use jQuery and some CSS3 | ||
+ | properties for the style. The main idea is to have a | ||
+ | menu of albums where each item will reveal a horizontal | ||
+ | bar with thumbnails when clicked.</p> | ||
+ | <a href="http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/" target="_blank" class="article">Article</a> | ||
+ | <a href="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/" target="_blank" class="demo">Demo</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- The JavaScript --> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | 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: 1280, // container width | ||
+ | height: 680, // 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: false, // 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: true, // 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: true, // adds arrows overlayed over the book edges | ||
+ | cursor: 'pointer', // cursor css setting for side bar areas | ||
+ | |||
+ | hash: true, // 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 | ||
+ | }); | ||
+ | } | ||
+ | }).attr('src',source); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <!--bottom dock --> | ||
+ | <div id="dock"> | ||
+ | <ul> | ||
+ | <li><a href="#/page/1"><span>Address</span><img src="img/icon-address.png" alt="[address]" /></a></li><!-- | ||
+ | --><li><a href="#/page/3"><span>Band</span><img src="img/icon-band.png" alt="[band]" /></a></li><!-- | ||
+ | --><li><a href="#/page/5"><span>Calendar</span><img src="img/icon-calendar.png" alt="[calendar]" /></a></li><!-- | ||
+ | --><li class="active"><a href="#chat"><span>Chat</span><img src="img/icon-chat.png" alt="[chat]" /></a></li><!-- | ||
+ | --><li class="active"><a href="#music"><span>Music</span><img src="img/icon-music.png" alt="[music]" /></a></li><!-- | ||
+ | --><li><a href="#photo"><span>Photo</span><img src="img/icon-photo.png" alt="[photo]" /></a></li><!-- | ||
+ | --><li><a href="#text"><span>Text</span><img src="img/icon-text.png" alt="[text]" /></a></li><!-- | ||
+ | --><!-- <li class="seperator"></li> --><!-- | ||
+ | --><li><a href="#folder?src=/apps/"><span>Applications</span><img src="img/icon-applications.png" alt="[apps]" /></a></li><!-- | ||
+ | --><li><a href="#folder?src=/pictures/"><span>Pictures</span><img src="img/icon-pictures.png" alt="[pictures]" /></a></li><!-- | ||
+ | --><li><a href="#folder?src=/documents/"><span>Documents</span><img src="img/icon-documents.png" alt="[documents]" /></a></li><!-- | ||
+ | --><li><a href="#bin"><span>Bin</span><img src="img/icon-bin.png" alt="[bin]" /></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> |
Revision as of 15:09, 26 August 2013