Team:USTC-Software/hp
From 2012.igem.org
(Difference between revisions)
(5 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <script type="text/javascript" src="https://2012.igem.org/Team:USTC-Software/hp-slider.js?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | |||
<style> | <style> | ||
Line 51: | Line 54: | ||
</style> | </style> | ||
+ | |||
+ | |||
+ | <!---the begin of hp_slide css-----> | ||
+ | <style type="text/css"> | ||
+ | #hp_slide ul,#hp_slide li{ | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #hp_slide ul { | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | .wrapper{ | ||
+ | margin:40px auto; | ||
+ | position: relative; | ||
+ | width: 720px; | ||
+ | height: 365px; | ||
+ | } | ||
+ | |||
+ | .hp_slide{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 365px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | .hp_slide-loading{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | z-index:222; | ||
+ | background:url('https://static.igem.org/mediawiki/igem.org/3/3b/Slider-loading.gif') no-repeat; | ||
+ | background-position:center; | ||
+ | background-color: rgba(0,0,0,0.5); | ||
+ | color: #777; | ||
+ | text-align: center; | ||
+ | font-size:16px; | ||
+ | line-height: 365px; | ||
+ | font-family: Georgia, "Times New Roman", Times, serif; | ||
+ | font-weight:bolder; | ||
+ | } | ||
+ | .hp_slide-large{ | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | position:relative; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .hp_slide-large li{ | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | overflow: hidden; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .hp_slide-large li img{ | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .hp_slide-pins{ | ||
+ | height: 10px; | ||
+ | width:720px; | ||
+ | margin: 0 auto; | ||
+ | position: relative; | ||
+ | } | ||
+ | .hp_slide-pins li{ | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | height: 100%; | ||
+ | } | ||
+ | .hp_slide-pins li.hp_slide-element{ | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | position: absolute; | ||
+ | height: 100%; | ||
+ | z-index: 10; | ||
+ | text-indent: -9000px; | ||
+ | background: #000; | ||
+ | background: rgba(0,255,0,0.8); | ||
+ | } | ||
+ | .hp_slide-pins li a{ | ||
+ | display: block; | ||
+ | text-indent: -9000px; | ||
+ | background: #666 ; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | cursor: pointer; | ||
+ | -webkit-box-shadow: | ||
+ | 0px 1px 1px 0px rgba(0,0,0,0.3), | ||
+ | 0px 1px 0px 1px rgba(255,255,255,0.5); | ||
+ | -moz-box-shadow: | ||
+ | 0px 1px 1px 0px rgba(0,0,0,0.3), | ||
+ | 0px 1px 0px 1px rgba(255,255,255,0.5); | ||
+ | box-shadow: | ||
+ | 0px 1px 1px 0px rgba(0,0,0,0.3), | ||
+ | 0px 1px 0px 1px rgba(255,255,255,0.5); | ||
+ | -webkit-transition: background 0.2s ease; | ||
+ | -moz-transition: background 0.2s ease; | ||
+ | -o-transition: background 0.2s ease; | ||
+ | -ms-transition: background 0.2s ease; | ||
+ | transition: background 0.2s ease; | ||
+ | } | ||
+ | .hp_slide-pins li a:hover{ | ||
+ | background-color: #222; | ||
+ | } | ||
+ | |||
+ | </style><!---the end of hp_slide css-----> | ||
+ | |||
+ | |||
+ | |||
Line 58: | Line 173: | ||
<div id="page_wrapper"> | <div id="page_wrapper"> | ||
- | + | ||
- | + | ||
+ | <!---the begin of hp_slide div-----> | ||
+ | <div class="wrapper"> | ||
+ | <div id="hp_slide" class="hp_slide"> | ||
+ | <ul class="hp_slide-large"> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/7/71/P020110714504890857164.jpg" alt="USTC-HP"/> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/0/0d/W020110714513921540263.jpg" alt="USTC-HP" /> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/7/71/P020110714504890857164.jpg" alt="USTC-HP" /> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/0/0d/W020110714513921540263.jpg" alt="USTC-HP"/> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/0/0d/W020110714513921540263.jpg" alt="USTC-HP"/> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/7/71/P020110714504890857164.jpg" alt="USTC-HP"/> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/8/8f/W020120412629917392487.jpg" alt="USTC-HP"/> | ||
+ | </li> | ||
+ | <li> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/0/0d/W020110714513921540263.jpg" alt="USTC-HP"/> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | <ul class="hp_slide-pins"> | ||
+ | <li class="hp_slide-element"></li> | ||
+ | <li><a href="#"></a></li> | ||
+ | <li><a href="#"></a></li> | ||
+ | <li><a href="#"></a></li> | ||
+ | <li><a href="#">S</a></li> | ||
+ | <li><a href="#"></a></li> | ||
+ | <li><a href="#"></a></li> | ||
+ | <li><a href="#"></a></li> | ||
+ | <li><a href="#"></a></li> | ||
+ | </ul><!-- hp_slide-pins --> | ||
+ | |||
+ | </div><!-- hp_slide --> | ||
+ | </div><!---the end of hp_slide div-----> | ||
+ | |||
+ | |||
+ | |||
+ | |||
<!-----the begin of wrape of youtube div----> | <!-----the begin of wrape of youtube div----> | ||
<div id="wrap_of_video"> | <div id="wrap_of_video"> | ||
<object width="580" height="355"> | <object width="580" height="355"> | ||
- | |||
- | |||
+ | <param name="movie" value="http://player.youku.com/player.php/sid/XNDMwOTQxMjc2/v.swf"/> | ||
+ | <param name="movie" value="http://www.youtube.com/watch?v=wJyUtbn0O5Y"/> | ||
<param name="wmode" value="transparent"/> | <param name="wmode" value="transparent"/> | ||
+ | <embed src="http://player.youku.com/player.php/sid/XNDMwOTQxMjc2/v.swf" application="" x-shockwave-flash"="" wmode="transparent" width="580" height="355"/> | ||
<embed src="http://www.youtube.com/v/wJyUtbn0O5Y" application="" x-shockwave-flash"="" wmode="transparent" width="580" height="355"/><embed x-shockwave-flash"/> | <embed src="http://www.youtube.com/v/wJyUtbn0O5Y" application="" x-shockwave-flash"="" wmode="transparent" width="580" height="355"/><embed x-shockwave-flash"/> | ||
- | |||
</object> | </object> | ||
</div> <!-----the begin of wrape of youtube div----> | </div> <!-----the begin of wrape of youtube div----> | ||
Line 79: | Line 242: | ||
</div> <!---the end of wrap_page div--> | </div> <!---the end of wrap_page div--> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!---the begin of hp_slide js----> | ||
+ | <script> | ||
+ | $(function(){ | ||
+ | var bt = $('#toolBackTo'); | ||
+ | var hl = $.browser.webkit ? $('body')[0] : $('html')[0]; | ||
+ | |||
+ | $(window).scroll( function() { | ||
+ | var st = hl.scrollTop; | ||
+ | show = (st>50); | ||
+ | if( show ){ | ||
+ | bt.show("slow"); | ||
+ | }else{ | ||
+ | bt.hide("slow"); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | (function( window, $, undefined ) { | ||
+ | |||
+ | var $event = $.event, resizeTimeout; | ||
+ | |||
+ | $event.special.smartresize = { | ||
+ | setup: function() { | ||
+ | $(this).bind( "resize", $event.special.smartresize.handler ); | ||
+ | }, | ||
+ | teardown: function() { | ||
+ | $(this).unbind( "resize", $event.special.smartresize.handler ); | ||
+ | }, | ||
+ | handler: function( event, execAsap ) { | ||
+ | // Save the context | ||
+ | var context = this, | ||
+ | args = arguments; | ||
+ | |||
+ | // set correct event type | ||
+ | event.type = "smartresize"; | ||
+ | |||
+ | if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } | ||
+ | resizeTimeout = setTimeout(function() { | ||
+ | jQuery.event.handle.apply( context, args ); | ||
+ | }, execAsap === "execAsap"? 0 : 100 ); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | $.fn.smartresize = function( fn ) { | ||
+ | return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] ); | ||
+ | }; | ||
+ | |||
+ | $.Slideshow = function( options, element ) { | ||
+ | |||
+ | this.$el = $( element ); | ||
+ | |||
+ | |||
+ | this.$list = this.$el.find('ul.hp_slide-large') | ||
+ | this.$imgItems = this.$list.children('li'); | ||
+ | this.itemsCount = this.$imgItems.length | ||
+ | this.$images = this.$imgItems.find('img:first'); | ||
+ | this.$sliderthumbs = this.$el.find('ul.hp_slide-pins').hide(); | ||
+ | this.$sliderElems = this.$sliderthumbs.children('li'); | ||
+ | this.$sliderElem = this.$sliderthumbs.children('li.hp_slide-element'); | ||
+ | this.$thumbs = this.$sliderElems.not('.hp_slide-element'); | ||
+ | |||
+ | |||
+ | this._init( options ); | ||
+ | |||
+ | }; | ||
+ | |||
+ | $.Slideshow.defaults = { | ||
+ | |||
+ | animation : 'sides', // sides || center | ||
+ | autoplay : false, | ||
+ | // interval for the slideshow | ||
+ | slideshow_interval : 3000, | ||
+ | // speed for the sliding animation | ||
+ | speed : 800, | ||
+ | easing : '', | ||
+ | titlesFactor : 0.60, | ||
+ | // titles animation speed | ||
+ | titlespeed : 800, | ||
+ | // titles animation easing | ||
+ | titleeasing : '', | ||
+ | thumbMaxWidth : 120 | ||
+ | }; | ||
+ | |||
+ | $.Slideshow.prototype = { | ||
+ | _init : function( options ) { | ||
+ | |||
+ | this.options = $.extend( true, {}, $.Slideshow.defaults, options ); | ||
+ | |||
+ | this.$imgItems.css( 'opacity', 0 ); | ||
+ | this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 ); | ||
+ | |||
+ | this.current = 0; | ||
+ | |||
+ | var _self = this; | ||
+ | |||
+ | this.$loading = $('<div class="hp_slide-loading">Loading</div>').prependTo( _self.$el ); | ||
+ | |||
+ | $.when( this._preloadImages() ).done( function() { | ||
+ | |||
+ | _self.$loading.hide(); | ||
+ | |||
+ | _self._setImagesSize(); | ||
+ | _self._initThumbs(); | ||
+ | |||
+ | _self.$imgItems.eq( _self.current ).css({ | ||
+ | 'opacity' : 1, | ||
+ | 'z-index' : 10 | ||
+ | }).show().find('div.ei-title > *').css( 'opacity', 1 ); | ||
+ | |||
+ | if( _self.options.autoplay ) { | ||
+ | |||
+ | _self._startSlideshow(); | ||
+ | |||
+ | } | ||
+ | |||
+ | _self._initEvents(); | ||
+ | |||
+ | }); | ||
+ | |||
+ | }, | ||
+ | _preloadImages : function() { | ||
+ | |||
+ | var _self = this, | ||
+ | loaded = 0; | ||
+ | |||
+ | return $.Deferred( | ||
+ | |||
+ | function(dfd) { | ||
+ | |||
+ | _self.$images.each( function( i ) { | ||
+ | |||
+ | $('<img/>').load( function() { | ||
+ | |||
+ | if( ++loaded === _self.itemsCount ) { | ||
+ | |||
+ | dfd.resolve(); | ||
+ | } | ||
+ | |||
+ | }).attr( 'src', $(this).attr('src') ); | ||
+ | |||
+ | }); | ||
+ | |||
+ | } | ||
+ | |||
+ | ).promise(); | ||
+ | |||
+ | }, | ||
+ | _setImagesSize : function() { | ||
+ | |||
+ | this.elWidth = this.$el.width(); | ||
+ | |||
+ | var _self = this; | ||
+ | |||
+ | this.$images.each( function( i ) { | ||
+ | |||
+ | var $img = $(this); | ||
+ | imgDim = _self._getImageDim( $img.attr('src') ); | ||
+ | |||
+ | $img.css({ | ||
+ | width : imgDim.width, | ||
+ | height : imgDim.height, | ||
+ | marginLeft : imgDim.left, | ||
+ | marginTop : imgDim.top | ||
+ | }); | ||
+ | }); | ||
+ | }, | ||
+ | _getImageDim : function( src ) { | ||
+ | |||
+ | var $img = new Image(); | ||
+ | |||
+ | $img.src = src; | ||
+ | |||
+ | var c_w = this.elWidth, | ||
+ | c_h = this.$el.height(), | ||
+ | r_w = c_h / c_w, | ||
+ | |||
+ | i_w = $img.width, | ||
+ | i_h = $img.height, | ||
+ | r_i = i_h / i_w, | ||
+ | new_w, new_h, new_left, new_top; | ||
+ | |||
+ | if( r_w > r_i ) { | ||
+ | |||
+ | new_h = c_h; | ||
+ | new_w = c_h / r_i; | ||
+ | |||
+ | } | ||
+ | else { | ||
+ | |||
+ | new_h = c_w * r_i; | ||
+ | new_w = c_w; | ||
+ | |||
+ | } | ||
+ | |||
+ | return { | ||
+ | width : new_w, | ||
+ | height : new_h, | ||
+ | left : ( c_w - new_w ) / 2, | ||
+ | top : ( c_h - new_h ) / 2 | ||
+ | }; | ||
+ | |||
+ | }, | ||
+ | _initThumbs : function() { | ||
+ | |||
+ | this.$sliderElems.css({ | ||
+ | 'max-width' : this.options.thumbMaxWidth + 'px', | ||
+ | 'width' : 100 / this.itemsCount + '%' | ||
+ | }); | ||
+ | |||
+ | this.$sliderthumbs.css( 'max-width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show(); | ||
+ | |||
+ | }, | ||
+ | _startSlideshow : function() { | ||
+ | |||
+ | var _self = this; | ||
+ | |||
+ | this.slideshow = setTimeout( function() { | ||
+ | |||
+ | var pos; | ||
+ | |||
+ | ( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1; | ||
+ | |||
+ | _self._slideTo( pos ); | ||
+ | |||
+ | if( _self.options.autoplay ) { | ||
+ | |||
+ | _self._startSlideshow(); | ||
+ | |||
+ | } | ||
+ | |||
+ | }, this.options.slideshow_interval); | ||
+ | |||
+ | }, | ||
+ | _slideTo : function( pos ) { | ||
+ | |||
+ | if( pos === this.current || this.isAnimating ) | ||
+ | return false; | ||
+ | |||
+ | this.isAnimating = true; | ||
+ | |||
+ | var $currentSlide = this.$imgItems.eq( this.current ), | ||
+ | $nextSlide = this.$imgItems.eq( pos ), | ||
+ | _self = this, | ||
+ | |||
+ | preCSS = {zIndex : 10}, | ||
+ | animCSS = {opacity : 1}; | ||
+ | |||
+ | if( this.options.animation === 'sides' ) { | ||
+ | |||
+ | preCSS.left = ( pos > this.current ) ? -1 * this.elWidth : this.elWidth; | ||
+ | animCSS.left = 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | $.when( | ||
+ | |||
+ | $currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() { | ||
+ | $(this).show().css( 'opacity', 0 ); | ||
+ | }), | ||
+ | |||
+ | $nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ), | ||
+ | |||
+ | this.$sliderElem.stop().animate({ | ||
+ | left : this.$thumbs.eq( pos ).position().left | ||
+ | }, this.options.speed ) | ||
+ | |||
+ | ).done( function() { | ||
+ | |||
+ | $currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 ); | ||
+ | _self.current = pos; | ||
+ | _self.isAnimating = false; | ||
+ | |||
+ | }); | ||
+ | |||
+ | }, | ||
+ | _initEvents : function() { | ||
+ | |||
+ | var _self = this; | ||
+ | |||
+ | $(window).on( 'smartresize.eislideshow', function( event ) { | ||
+ | |||
+ | _self._setImagesSize(); | ||
+ | |||
+ | |||
+ | _self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left ); | ||
+ | |||
+ | }); | ||
+ | this.$thumbs.on( 'click.eislideshow', function( event ) { | ||
+ | |||
+ | if( _self.options.autoplay ) { | ||
+ | |||
+ | clearTimeout( _self.slideshow ); | ||
+ | _self.options.autoplay = false; | ||
+ | |||
+ | } | ||
+ | |||
+ | var $thumb = $(this), | ||
+ | idx = $thumb.index() - 1; | ||
+ | |||
+ | _self._slideTo( idx ); | ||
+ | |||
+ | return false; | ||
+ | |||
+ | }); | ||
+ | |||
+ | } | ||
+ | }; | ||
+ | var logError = function( message ) { | ||
+ | |||
+ | if ( this.console ) { | ||
+ | console.error( message ); | ||
+ | } | ||
+ | }; | ||
+ | $.fn.eislideshow = function( options ) { | ||
+ | |||
+ | if ( typeof options === 'string' ) { | ||
+ | |||
+ | var args = Array.prototype.slice.call( arguments, 1 ); | ||
+ | |||
+ | this.each(function() { | ||
+ | |||
+ | var instance = $.data( this, 'eislideshow' ); | ||
+ | |||
+ | if ( !instance ) { | ||
+ | logError( "cannot call methods on eislideshow prior to initialization; " + | ||
+ | "attempted to call method '" + options + "'" ); | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { | ||
+ | logError( "no such method '" + options + "' for eislideshow instance" ); | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | instance[ options ].apply( instance, args ); | ||
+ | |||
+ | }); | ||
+ | } | ||
+ | else { | ||
+ | |||
+ | this.each(function() { | ||
+ | |||
+ | var instance = $.data( this, 'eislideshow' ); | ||
+ | if ( !instance ) { | ||
+ | $.data( this, 'eislideshow', new $.Slideshow( options, this ) ); | ||
+ | } | ||
+ | |||
+ | }); | ||
+ | } | ||
+ | return this; | ||
+ | }; | ||
+ | |||
+ | })( window, jQuery ); | ||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | $('#hp_slide').eislideshow({ | ||
+ | animation : 'center', | ||
+ | autoplay : true, | ||
+ | slideshow_interval : 3000, | ||
+ | titlesFactor : 0 | ||
+ | }); | ||
+ | }); | ||
+ | </script><!---the end of hp_slide js----> | ||
+ | |||
+ | |||
+ | |||
+ | |||
</body> | </body> | ||
<html> | <html> |
Latest revision as of 09:07, 11 August 2012
TOP