Team:USTC-Software/hp

From 2012.igem.org

(Difference between revisions)
 
(6 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://www.youtube.com/watch?v=wJyUtbn0O5Y"/>
 
-
<param name="movie" value="http://player.youku.com/player.php/sid/XNDMwOTQxMjc2/v.swf"/>
 
 +
<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://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 77: 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

USTC-Header-c

TOP
  • USTC-HP
  • USTC-HP
  • USTC-HP
  • USTC-HP
  • USTC-HP
  • USTC-HP
  • USTC-HP
  • USTC-HP

Retrieved from "http://2012.igem.org/Team:USTC-Software/hp"