Team:HKUST-Hong Kong/Parts

From 2012.igem.org

(Difference between revisions)
(Prototype team page)
Line 37: Line 37:
<groupparts>iGEM012 HKUST-Hong_Kong</groupparts>
<groupparts>iGEM012 HKUST-Hong_Kong</groupparts>
 +
 +
<div id="Slideshow">
 +
 +
<ul>
 +
<li>
 +
        <img src="https://static.igem.org/mediawiki/2012/4/49/HKUST_RED_BIRD.jpg" width="500" height="300" />
 +
            <p>Write something here</p>
 +
        </li>
 +
        <li>
 +
        <img src="https://static.igem.org/mediawiki/2012/4/49/HKUST_RED_BIRD.jpg" width="500" height="300" />
 +
            <p>Write something here</p>
 +
        </li>
 +
<li>
 +
        <img src="https://static.igem.org/mediawiki/2012/4/49/HKUST_RED_BIRD.jpg" width="500" height="300" />
 +
            <p>Write something here</p>
 +
        </li>
 +
<li>
 +
        <img src="https://static.igem.org/mediawiki/2012/4/49/HKUST_RED_BIRD.jpg" width="500" height="300" />
 +
            <p>Write something here</p>
 +
        </li>
 +
        <li>
 +
        <img src="https://static.igem.org/mediawiki/2012/4/49/HKUST_RED_BIRD.jpg" width="500" height="300" />
 +
            <p>Write something here</p>
 +
        </li>
 +
        <li>
 +
        <img src="https://static.igem.org/mediawiki/2012/4/49/HKUST_RED_BIRD.jpg" width="500" height="300" />
 +
            <p>Write something here</p>
 +
        </li>
 +
        <li>
 +
        <img src="https://static.igem.org/mediawiki/2012/4/49/HKUST_RED_BIRD.jpg" width="500" height="300" />
 +
            <p>Write something here</p>
 +
        </li>
 +
</ul>
 +
 +
        </div>
 +
 +
<style type="text/css">
 +
 +
#Slideshow{
 +
width:4000px;
 +
}
 +
 +
#Slideshow ul{
 +
list-style:none;
 +
width:4000px;
 +
margin:0;
 +
padding:0;
 +
position:relative;
 +
}
 +
 +
#Slideshow li{
 +
display:inline;
 +
float:left;
 +
}
 +
 +
</style>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
(function($){
 +
$.fn.extend({
 +
infiniteCarousel: function(options)
 +
{
 +
var defaults =
 +
{
 +
transitionSpeed: 800,
 +
displayTime: 6000,
 +
textholderHeight: .25,
 +
displayProgressBar: true,
 +
displayThumbnails: true,
 +
displayThumbnailNumbers: true,
 +
displayThumbnailBackground: true,
 +
thumbnailWidth: '20px',
 +
thumbnailHeight: '20px',
 +
thumbnailFontSize: '.7em',
 +
easeLeft: 'linear',
 +
easeRight: 'linear',
 +
imagePath: 'js/infinitecarousel/images/',
 +
inView: 1,
 +
padding: '0px',
 +
advance: 1,
 +
showControls: true,
 +
autoHideControls: false,
 +
autoHideCaptions: false,
 +
autoStart: true,
 +
prevNextInternal: true,
 +
enableKeyboardNav: true,
 +
onSlideStart: function(){},
 +
onSlideEnd: function(){},
 +
onPauseClick: function(){}
 +
};
 +
var options = $.extend(defaults, options);
 +
 +
    return this.each(function() {
 +
    var randID = Math.round(Math.random()*100000000);
 +
var o=options;
 +
var obj = $(this);
 +
var autopilot = o.autoStart;
 +
 +
var numImages = $('img', obj).length;
 +
var imgHeight = $('img:first', obj).height();
 +
var imgWidth = $('img:first', obj).width();
 +
 +
if(o.inView > numImages-1) o.inView=numImages-1;
 +
$('p', obj).hide();
 +
$(obj).css({'position':'relative','overflow':'hidden'}).width((imgWidth*o.inView)+(o.inView*parseInt(o.padding)*2)).height(imgHeight+(parseInt(o.padding)*2));
 +
$('ul', obj).css({'list-style':'none','margin':'0','padding':'0','position':'relative'}).width(imgWidth*numImages);
 +
$('li', obj).css({'display':'inline','float':'left','padding':o.padding});
 +
 +
 +
$('li:last', obj).prependTo($('ul', obj));
 +
$('ul', obj).css('left',-imgWidth-(parseInt(o.padding)*2)+'px').width(9999);
 +
 +
 +
if(o.displayProgressBar)
 +
{
 +
$(obj).append('<div id="progress'+randID+'" class="ic-progress-bar" style="position:absolute;bottom:0;background:#bbb;left:0;z-index:1"></div>');
 +
$('#progress'+randID).width('100%').height(5).css('opacity','.6');
 +
}
 +
 +
 +
function startProgressBar(barTime)
 +
{
 +
barTime = (barTime==null)? o.displayTime:barTime;
 +
$('#progress'+randID).width('100%').height(5);
 +
$('#progress'+randID).animate({'width':0},barTime);
 +
}
 +
 +
 +
var containerBorder = parseInt($(obj).css('border-bottom-width')) + parseInt($(obj).css('border-top-width'));
 +
if(isNaN(containerBorder)) containerBorder = 0;
 +
var containerPaddingLeft = parseInt($(obj).css('padding-left'));
 +
for(i=1;i<=o.inView;i++)
 +
{
 +
$(obj).append('<div id="textholder'+randID+'_'+i+'" class="textholder" style="position:absolute;width:'+imgWidth+'px;bottom:0px;margin-bottom:'+-(imgHeight*o.textholderHeight+containerBorder)+'px;"><span></span></div>');
 +
$('#textholder'+randID+'_'+i).css({'left':(i-1)*(imgWidth+parseInt(o.padding)*2),'margin-left':parseInt(o.padding)+containerPaddingLeft,'margin-right':o.padding});
 +
$('#textholder'+randID+'_'+i).height(imgHeight*o.textholderHeight).css({'backgroundColor':'#FFF','opacity':'0.5'});
 +
html = '<div class="minmax" id="minmax'+randID+'_'+i+'" style="width:8px;height:8px;position:absolute;top:1px;right:10px;cursor:pointer;background:url(https://static.igem.org/mediawiki/2012/9/9f/Caption.gif) no-repeat 0 -8px"></div>';
 +
html += '<div class="close" id="close'+randID+'_'+i+'" style="width:8px;height:8px;position:absolute;top:1px;right:1px;cursor:pointer;background:url(https://static.igem.org/mediawiki/2012/9/9f/Caption.gif) no-repeat 0 0"></div>';
 +
$('#textholder'+randID+'_'+i).append(html);
 +
$('#minmax'+randID+'_'+i).hide();
 +
$('#close'+randID+'_'+i).hide();
 +
if(!o.autoHideCaptions) showtext($('li:eq('+i+') p', obj).html(),i);
 +
}
 +
var textholderPadding = parseInt($('#textholder'+randID+'_1').css('padding-left')) + parseInt($('#textholder'+randID+'_1').css('padding-right'));
 +
if (textholderPadding > 0) $('.textholder',obj).width(imgWidth-textholderPadding);
 +
 +
$('.close',obj).each(function(i){
 +
$(this).click(function(){$('#textholder'+randID+'_'+(i+1)).animate({marginBottom:(-imgHeight*o.textholderHeight)-containerBorder-1+'px'},500)});
 +
});
 +
$('.minmax',obj).each(function(i){
 +
$(this).click(function(){
 +
if(parseInt($('#textholder'+randID+'_'+(i+1)).css('margin-bottom'))==0)
 +
{
 +
$('#textholder'+randID+'_'+(i+1)).animate({marginBottom:((-imgHeight*o.textholderHeight)-containerBorder+12)+'px'},500,function(){
 +
$('#minmax'+randID+'_'+(i+1)).css('background-position','0 -16px')});
 +
}
 +
else
 +
{
 +
$('#textholder'+randID+'_'+(i+1)).animate({marginBottom:'0px'},500,function(){
 +
$('#minmax'+randID+'_'+(i+1)).css('background-position','0 -8px')});
 +
}
 +
 +
});
 +
});
 +
 +
function showtext(t,i)
 +
{
 +
if(autopilot)
 +
{
 +
$('#minmax'+randID+'_'+i).hide();
 +
$('#close'+randID+'_'+i).hide();
 +
}
 +
if(t != null)
 +
{
 +
$('#textholder'+randID+'_'+i+' span').html(t);
 +
$('#textholder'+randID+'_'+i).stop().animate({marginBottom:'0px'},500);
 +
$('#minmax'+randID+'_'+i).css('background-position','0 -8px');
 +
showminmax();
 +
}
 +
}
 +
 +
function showminmax()
 +
{
 +
if(!autopilot)
 +
{
 +
$('.minmax',obj).fadeIn(250);
 +
$('.close',obj).fadeIn(250);
 +
}
 +
}
 +
 +
function hideCaption() {$('.textholder',obj).stop().animate({marginBottom:(-imgHeight*o.textholderHeight-containerBorder-1)+'px'},o.transitionSpeed)}
 +
 +
if(o.displayThumbnails)
 +
{
 +
function thumbclick(event)
 +
{
 +
target_num = this.id.split('_');
 +
if(viewable[0] != target_num[1])
 +
{
 +
status='pause';
 +
$('#progress'+randID).stop().fadeOut();
 +
clearTimeout(clearInt);
 +
$('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click');
 +
autopilot = 0;
 +
setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 -16px')},o.transitionSpeed);
 +
$('#play_pause_btn'+randID).unbind('click').bind('click',function(){forceStart();});
 +
}
 +
if(target_num[1] > viewable[0])
 +
{
 +
diff = target_num[1] - viewable[0];
 +
moveLeft(diff);
 +
}
 +
if(target_num[1] < viewable[0])
 +
{
 +
diff = viewable[0]- target_num[1];
 +
moveRight(diff);
 +
}
 +
}
 +
 +
var viewable = [];
 +
var unviewable = [];
 +
 +
$(obj).after('<div id="thumbs'+randID+'" style="position:relative;overflow:auto;clear:left;text-align:left;padding-top:5px;"></div>');
 +
for(i=0;i<=numImages-1;i++)
 +
{
 +
thumb = $('img:eq('+(i+1)+')', obj).attr('src');
 +
$('#thumbs'+randID).append('<div class="thumb" id="thumb'+randID+'_'+(i+1)+'" style="cursor:pointer;background-image:url('+thumb+');display:inline;float:left;width:'+o.thumbnailWidth+';height:'+o.thumbnailHeight+';line-height:'+o.thumbnailHeight+';padding:0;overflow:hidden;text-align:center;border:2px solid #ccc;margin-right:4px;font-size:'+o.thumbnailFontSize+';font-family:Arial;color:#000;text-shadow:0 0 3px #fff">'+(i+1)+'</div>');
 +
if(i<=o.inView) $('#thumb'+randID+'_'+i).css({'border-color':'#ff0000'});
 +
unviewable.push(i+1);
 +
}
 +
 +
for(i=1;i<=o.inView;i++) viewable.push(unviewable.shift());
 +
 +
 +
thumb = $('img:first', obj).attr('src');
 +
$('#thumb'+randID+'_'+numImages).css({'background-image':'url('+thumb+')'});
 +
$('#thumbs'+randID+' div.thumb:not(:first)').css({opacity:.65});
 +
 +
$('#thumbs'+randID+' div.thumb').hover(function(){$(this).animate({'opacity':1},150)},function(){if(viewable[0]!=this.id.split('_')[1]) $(this).animate({'opacity':.65},250)});
 +
 +
$('#thumbs'+randID+' div').bind('click', thumbclick);
 +
 +
if(!o.displayThumbnailNumbers) $('#thumbs'+randID+' div').text('');
 +
if(!o.displayThumbnailBackground) $('#thumbs'+randID+' div').css({'background-image':'none'});
 +
}
 +
 +
if(o.showControls)
 +
{
 +
 +
html = '<div id="play_pause_btn'+randID+'" style="cursor:pointer;position:absolute;top:3px;right:3px;border:none;width:16px;height:16px;background:url('+o.imagePath+'playpause.gif) no-repeat 0 0"></div>';
 +
$(obj).append(html);
 +
var status = 'play';
 +
$('#play_pause_btn'+randID).css('opacity',.5).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});
 +
$('#play_pause_btn'+randID).click(function(){
 +
status = (status == 'play') ? 'pause':'play';
 +
(status=='play') ? forceStart():forcePause();
 +
});
 +
 +
if(!o.prevNextInternal)
 +
{
 +
wrapID = $(obj).attr('id')+'Wrapper';
 +
$(obj).wrap('<div id="'+wrapID+'"></div>').css('margin','0 auto');
 +
$('#'+wrapID).css('position','relative').width(($(obj).width()+40+parseInt($(obj).css('padding-left'))+parseInt($(obj).css('padding-right'))));
 +
}
 +
 +
 +
arrowsTop = ((imgHeight/2)-15)+parseInt(o.padding);
 +
html = '<div id="btn_rt'+randID+'" style="position:absolute;right:2px;top:'+arrowsTop+'px;cursor:pointer;border:none;width:13px;height:30px;background:url('+o.imagePath+'leftright.gif) no-repeat 0 0"></div>';
 +
html += '<div id="btn_lt'+randID+'" style="position:absolute;left:2px;top:'+arrowsTop+'px;cursor:pointer;border:none;width:13px;height:30px;background:url('+o.imagePath+'leftright.gif) no-repeat -13px 0"></div>';
 +
(o.prevNextInternal) ? $(obj).append(html):$('#'+wrapID).append(html);
 +
 +
$('#btn_rt'+randID).css('opacity',.5).click(function(){
 +
forcePrevNext('next');
 +
}).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});
 +
$('#btn_lt'+randID).css('opacity',.5).click(function(){
 +
forcePrevNext('prev');
 +
}).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});
 +
 +
if(o.autoHideControls && o.prevNextInternal)
 +
{
 +
function showcontrols()
 +
{
 +
$('#play_pause_btn'+randID).stop().animate({top:'3px',right:'3px'},250);
 +
$('#btn_rt'+randID).stop().animate({top:arrowsTop+'px',right:'2px'},250);
 +
$('#btn_lt'+randID).stop().animate({top:arrowsTop+'px',left:'2px'},250);
 +
}
 +
function hidecontrols()
 +
{
 +
$('#play_pause_btn'+randID).stop().animate({top:-16-containerBorder+'px',right:-16-containerBorder+'px'},250);
 +
$('#btn_rt'+randID).stop().animate({right:'-16px'},250);
 +
$('#btn_lt'+randID).stop().animate({left:'-16px'},250);
 +
}
 +
$(obj).hover(showcontrols,hidecontrols);
 +
hidecontrols();
 +
}
 +
if(o.autoHideCaptions)
 +
{
 +
var isHover;
 +
function autoShowCap(){isHover=true;for(i=1;i<=o.inView;i++) showtext($('li:eq('+i+') p', obj).html(),i);}
 +
function autoHideCap(){isHover=false;hideCaption();}
 +
$(obj).hover(autoShowCap,autoHideCap);
 +
hideCaption();
 +
}
 +
}
 +
 +
function keyBind(){
 +
if(o.enableKeyboardNav)
 +
{
 +
$(document).keydown(function(event){
 +
if(event.keyCode == 39)
 +
{
 +
forcePrevNext('next');
 +
$(document).unbind('keydown');
 +
}
 +
if(event.keyCode == 37)
 +
{
 +
forcePrevNext('prev');
 +
$(document).unbind('keydown');
 +
}
 +
if(event.keyCode == 80 || event.keyCode == 111) forcePause();
 +
if(event.keyCode == 83 || event.keyCode == 115)
 +
{
 +
forceStart();
 +
$(document).unbind('keydown');
 +
}
 +
});
 +
}
 +
}
 +
 +
function forcePrevNext(dir)
 +
{
 +
o.onPauseClick.call(this);
 +
$('#btn_rt'+randID).unbind('click');
 +
$('#btn_lt'+randID).unbind('click');
 +
setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 -16px')},o.transitionSpeed-1);
 +
autopilot = 0;
 +
$('#progress'+randID).stop().fadeOut();
 +
status='pause';
 +
clearTimeout(clearInt);
 +
(dir=='prev') ? moveRight():moveLeft();
 +
$('#play_pause_btn'+randID).unbind('click');
 +
setTimeout(function(){
 +
$('#play_pause_btn'+randID).bind('click',function(){forceStart();});
 +
$('#btn_rt'+randID).bind('click',function(){forcePrevNext('next')});
 +
$('#btn_lt'+randID).bind('click',function(){forcePrevNext('prev')});
 +
},o.transitionSpeed);
 +
}
 +
 +
function forcePause()
 +
{
 +
$('#play_pause_btn'+randID).unbind('click');
 +
if(autopilot)
 +
{
 +
o.onPauseClick.call(this);
 +
$('#play_pause_btn'+randID).fadeTo(250,0,function(){$(this).css({'background-position':'0 -16px','opacity':'.5'});}).animate({opacity:.5},250);
 +
autopilot = 0;
 +
showminmax();
 +
$('#progress'+randID).stop().fadeOut();
 +
clearTimeout(clearInt);
 +
setTimeout(function(){$('#play_pause_btn'+randID).bind('click',function(){forceStart();})},o.transitionSpeed);
 +
}
 +
}
 +
 +
function forceStart()
 +
{
 +
$('#play_pause_btn'+randID).unbind('click');
 +
if(!autopilot)
 +
{
 +
setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 0')},o.transitionSpeed-1);
 +
autopilot = 1;
 +
moveLeft();
 +
clearInt=setInterval(function(){moveLeft();},o.displayTime+o.transitionSpeed);
 +
setTimeout(function(){$('#play_pause_btn'+randID).bind('click',function(){forcePause();})},o.transitionSpeed);
 +
}
 +
}
 +
 +
function preMove()
 +
{
 +
hideCaption();
 +
 +
if(o.showControls && o.prevNextInternal)
 +
{
 +
$('#play_pause_btn'+randID).fadeOut(200);
 +
$('#btn_lt'+randID).fadeOut(200);
 +
$('#btn_rt'+randID).fadeOut(200);
 +
}
 +
if(o.displayThumbnails) for(i=1;i<=numImages;i++) $('#thumb'+randID+'_'+i).css({'border-color':'#ccc'}).animate({'opacity': .65},500);
 +
}
 +
 +
function postMove()
 +
{
 +
if(o.showControls && o.prevNextInternal)
 +
{
 +
$('#play_pause_btn'+randID).fadeIn(200);
 +
$('#btn_lt'+randID).fadeIn(200);
 +
$('#btn_rt'+randID).fadeIn(200);
 +
}
 +
keyBind();
 +
if(o.autoHideCaptions && isHover) autoShowCap();
 +
if(o.displayThumbnails) for(i=0;i<viewable.length;i++) $('#thumb'+randID+'_'+viewable[i]).css({'border-color':'#ff0000'}).animate({'opacity': 1},500);
 +
if(!o.autoHideCaptions) for(i=1;i<=o.inView;i++) showtext($('li:eq('+i+') p', obj).html(),i);
 +
if(o.displayThumbnails) $('#thumbs'+randID+' div').unbind('click').bind('click', thumbclick).css({'cursor':'pointer'});
 +
ary=[];
 +
for(x=1;x<=o.inView;x++){ary.push($('img:eq('+x+')',obj).attr('src'))}
 +
o.onSlideEnd.call(this,ary);
 +
}
 +
 +
function moveLeft(dist)
 +
{
 +
if(dist==null) dist=o.advance;
 +
preMove();
 +
if(o.displayThumbnails)
 +
{
 +
for(i=1;i<=dist;i++){
 +
viewable.push(unviewable.shift());
 +
unviewable.push(viewable.shift());
 +
}
 +
}
 +
if(o.displayTime == 0){clearInterval(clearInt);}
 +
$('li:lt('+dist+')', obj).clone(true).insertAfter($('li:last', obj));
 +
o.onSlideStart.call(this,viewable,'left');
 +
$('ul', obj).animate({left:-imgWidth*(dist+1)-(parseInt(o.padding)*(dist+1))*2},o.transitionSpeed,o.easeLeft,function(){
 +
$('li:lt('+dist+')', obj).remove();
 +
$(this).css({'left':-imgWidth-parseInt(o.padding)*2});
 +
if(o.displayProgressBar && autopilot) startProgressBar();
 +
postMove();
 +
if(o.displayTime == 0){moveLeft();}
 +
});
 +
}
 +
function moveRight(dist)
 +
{
 +
if(dist==null) dist=o.advance;
 +
preMove();
 +
if(o.displayThumbnails)
 +
{
 +
for(i=1;i<=dist;i++){
 +
viewable.unshift(unviewable.pop());
 +
unviewable.unshift(viewable.pop());
 +
}
 +
}
 +
$('li:gt('+(numImages-(dist+1))+')', obj).clone(true).insertBefore($('li:first', obj));
 +
o.onSlideStart.call(this,viewable,'right');
 +
$('ul', obj).css('left',-(imgWidth*(dist+1))-(parseInt(o.padding)*((dist+1)*2)))
 +
.animate({left:-imgWidth-(parseInt(o.padding)*2)},o.transitionSpeed,o.easeRight,function(){
 +
$('li:gt('+(numImages-1)+')', obj).remove();
 +
postMove();
 +
});
 +
}
 +
 +
 +
if(autopilot)
 +
{
 +
var clearInt = setInterval(function(){moveLeft();},o.displayTime+o.transitionSpeed);
 +
if(o.displayProgressBar) startProgressBar(o.displayTime+o.transitionSpeed);
 +
} else {status='pause';$('#play_pause_btn'+randID).css({'background-position':'0 -16px'});}
 +
keyBind();
 +
});
 +
}
 +
});
 +
})(jQuery);
 +
</script>
 +
<script type="text/javascript">
 +
$(function(){
 +
 +
$('#Slideshow').infiniteCarousel();
 +
});
 +
 +
</script>

Revision as of 12:23, 27 June 2012


This is a template page. READ THESE INSTRUCTIONS.
You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki. You can find some examples HERE.
You MUST have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace.


Home Team Official Team Profile Project Parts Submitted to the Registry Modeling Notebook Safety Attributions


An important aspect of the iGEM competition is the use and creation of standard biological parts. Each team will make new parts during iGEM and will place them in the [http://partsregistry.org Registry of Standard Biological Parts]. The iGEM software provides an easy way to present the parts your team has created . The "groupparts" tag will generate a table with all of the parts that your team adds to your team sandbox. Note that if you want to document a part you need to document it on the [http://partsregistry.org Registry], not on your team wiki.

Remember that the goal of proper part documentation is to describe and define a part such that it can be used without a need to refer to the primary literature. The next iGEM team should be able to read your documentation and be able to use the part successfully. Also, you should provide proper references to acknowledge previous authors and to provide for users who wish to know more.


<groupparts>iGEM012 HKUST-Hong_Kong</groupparts>

  • <img src="HKUST_RED_BIRD.jpg" width="500" height="300" />

    Write something here

  • <img src="HKUST_RED_BIRD.jpg" width="500" height="300" />

    Write something here

  • <img src="HKUST_RED_BIRD.jpg" width="500" height="300" />

    Write something here

  • <img src="HKUST_RED_BIRD.jpg" width="500" height="300" />

    Write something here

  • <img src="HKUST_RED_BIRD.jpg" width="500" height="300" />

    Write something here

  • <img src="HKUST_RED_BIRD.jpg" width="500" height="300" />

    Write something here

  • <img src="HKUST_RED_BIRD.jpg" width="500" height="300" />

    Write something here

<style type="text/css">

  1. Slideshow{

width:4000px; }

  1. Slideshow ul{

list-style:none; width:4000px; margin:0; padding:0; position:relative; }

  1. Slideshow li{

display:inline; float:left; }

</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> (function($){ $.fn.extend({ infiniteCarousel: function(options) { var defaults = { transitionSpeed: 800, displayTime: 6000, textholderHeight: .25, displayProgressBar: true, displayThumbnails: true, displayThumbnailNumbers: true, displayThumbnailBackground: true, thumbnailWidth: '20px', thumbnailHeight: '20px', thumbnailFontSize: '.7em', easeLeft: 'linear', easeRight: 'linear', imagePath: 'js/infinitecarousel/images/', inView: 1, padding: '0px', advance: 1, showControls: true, autoHideControls: false, autoHideCaptions: false, autoStart: true, prevNextInternal: true, enableKeyboardNav: true, onSlideStart: function(){}, onSlideEnd: function(){}, onPauseClick: function(){} }; var options = $.extend(defaults, options); 

   		return this.each(function() {
   			var randID = Math.round(Math.random()*100000000);

var o=options; var obj = $(this); var autopilot = o.autoStart;

var numImages = $('img', obj).length; var imgHeight = $('img:first', obj).height(); var imgWidth = $('img:first', obj).width();

if(o.inView > numImages-1) o.inView=numImages-1; $('p', obj).hide(); $(obj).css({'position':'relative','overflow':'hidden'}).width((imgWidth*o.inView)+(o.inView*parseInt(o.padding)*2)).height(imgHeight+(parseInt(o.padding)*2)); $('ul', obj).css({'list-style':'none','margin':'0','padding':'0','position':'relative'}).width(imgWidth*numImages); $('li', obj).css({'display':'inline','float':'left','padding':o.padding});


$('li:last', obj).prependTo($('ul', obj)); $('ul', obj).css('left',-imgWidth-(parseInt(o.padding)*2)+'px').width(9999);


if(o.displayProgressBar) {

$(obj).append('
');

$('#progress'+randID).width('100%').height(5).css('opacity','.6'); }


function startProgressBar(barTime) { barTime = (barTime==null)? o.displayTime:barTime; $('#progress'+randID).width('100%').height(5); $('#progress'+randID).animate({'width':0},barTime); }


var containerBorder = parseInt($(obj).css('border-bottom-width')) + parseInt($(obj).css('border-top-width')); if(isNaN(containerBorder)) containerBorder = 0; var containerPaddingLeft = parseInt($(obj).css('padding-left')); for(i=1;i<=o.inView;i++) {

$(obj).append('
');

$('#textholder'+randID+'_'+i).css({'left':(i-1)*(imgWidth+parseInt(o.padding)*2),'margin-left':parseInt(o.padding)+containerPaddingLeft,'margin-right':o.padding}); $('#textholder'+randID+'_'+i).height(imgHeight*o.textholderHeight).css({'backgroundColor':'#FFF','opacity':'0.5'});

html = '
'; html += '
';

$('#textholder'+randID+'_'+i).append(html); $('#minmax'+randID+'_'+i).hide(); $('#close'+randID+'_'+i).hide(); if(!o.autoHideCaptions) showtext($('li:eq('+i+') p', obj).html(),i); } var textholderPadding = parseInt($('#textholder'+randID+'_1').css('padding-left')) + parseInt($('#textholder'+randID+'_1').css('padding-right')); if (textholderPadding > 0) $('.textholder',obj).width(imgWidth-textholderPadding);

$('.close',obj).each(function(i){ $(this).click(function(){$('#textholder'+randID+'_'+(i+1)).animate({marginBottom:(-imgHeight*o.textholderHeight)-containerBorder-1+'px'},500)}); }); $('.minmax',obj).each(function(i){ $(this).click(function(){ if(parseInt($('#textholder'+randID+'_'+(i+1)).css('margin-bottom'))==0) { $('#textholder'+randID+'_'+(i+1)).animate({marginBottom:((-imgHeight*o.textholderHeight)-containerBorder+12)+'px'},500,function(){ $('#minmax'+randID+'_'+(i+1)).css('background-position','0 -16px')}); } else { $('#textholder'+randID+'_'+(i+1)).animate({marginBottom:'0px'},500,function(){ $('#minmax'+randID+'_'+(i+1)).css('background-position','0 -8px')}); }

}); });

function showtext(t,i) { if(autopilot) { $('#minmax'+randID+'_'+i).hide(); $('#close'+randID+'_'+i).hide(); } if(t != null) { $('#textholder'+randID+'_'+i+' span').html(t); $('#textholder'+randID+'_'+i).stop().animate({marginBottom:'0px'},500); $('#minmax'+randID+'_'+i).css('background-position','0 -8px'); showminmax(); } }

function showminmax() { if(!autopilot) { $('.minmax',obj).fadeIn(250); $('.close',obj).fadeIn(250); } }

function hideCaption() {$('.textholder',obj).stop().animate({marginBottom:(-imgHeight*o.textholderHeight-containerBorder-1)+'px'},o.transitionSpeed)}

if(o.displayThumbnails) { function thumbclick(event) { target_num = this.id.split('_'); if(viewable[0] != target_num[1]) { status='pause'; $('#progress'+randID).stop().fadeOut(); clearTimeout(clearInt); $('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); autopilot = 0; setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 -16px')},o.transitionSpeed); $('#play_pause_btn'+randID).unbind('click').bind('click',function(){forceStart();}); } if(target_num[1] > viewable[0]) { diff = target_num[1] - viewable[0]; moveLeft(diff); } if(target_num[1] < viewable[0]) { diff = viewable[0]- target_num[1]; moveRight(diff); } }

var viewable = []; var unviewable = [];

$(obj).after('
');

for(i=0;i<=numImages-1;i++) { thumb = $('img:eq('+(i+1)+')', obj).attr('src');

$('#thumbs'+randID).append('
'+(i+1)+'
');

if(i<=o.inView) $('#thumb'+randID+'_'+i).css({'border-color':'#ff0000'}); unviewable.push(i+1); }

for(i=1;i<=o.inView;i++) viewable.push(unviewable.shift());


thumb = $('img:first', obj).attr('src'); $('#thumb'+randID+'_'+numImages).css({'background-image':'url('+thumb+')'}); $('#thumbs'+randID+' div.thumb:not(:first)').css({opacity:.65});

$('#thumbs'+randID+' div.thumb').hover(function(){$(this).animate({'opacity':1},150)},function(){if(viewable[0]!=this.id.split('_')[1]) $(this).animate({'opacity':.65},250)});

$('#thumbs'+randID+' div').bind('click', thumbclick);

if(!o.displayThumbnailNumbers) $('#thumbs'+randID+' div').text(); if(!o.displayThumbnailBackground) $('#thumbs'+randID+' div').css({'background-image':'none'}); }

if(o.showControls) {

html = '
';

$(obj).append(html); var status = 'play'; $('#play_pause_btn'+randID).css('opacity',.5).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)}); $('#play_pause_btn'+randID).click(function(){ status = (status == 'play') ? 'pause':'play'; (status=='play') ? forceStart():forcePause(); });

if(!o.prevNextInternal) { wrapID = $(obj).attr('id')+'Wrapper';

$(obj).wrap('
').css('margin','0 auto');

$('#'+wrapID).css('position','relative').width(($(obj).width()+40+parseInt($(obj).css('padding-left'))+parseInt($(obj).css('padding-right')))); }


arrowsTop = ((imgHeight/2)-15)+parseInt(o.padding);

html = '
'; html += '
';

(o.prevNextInternal) ? $(obj).append(html):$('#'+wrapID).append(html);

$('#btn_rt'+randID).css('opacity',.5).click(function(){ forcePrevNext('next'); }).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)}); $('#btn_lt'+randID).css('opacity',.5).click(function(){ forcePrevNext('prev'); }).hover(function(){$(this).animate({opacity:'1'},250)},function(){$(this).animate({opacity:'.5'},250)});

if(o.autoHideControls && o.prevNextInternal) { function showcontrols() { $('#play_pause_btn'+randID).stop().animate({top:'3px',right:'3px'},250); $('#btn_rt'+randID).stop().animate({top:arrowsTop+'px',right:'2px'},250); $('#btn_lt'+randID).stop().animate({top:arrowsTop+'px',left:'2px'},250); } function hidecontrols() { $('#play_pause_btn'+randID).stop().animate({top:-16-containerBorder+'px',right:-16-containerBorder+'px'},250); $('#btn_rt'+randID).stop().animate({right:'-16px'},250); $('#btn_lt'+randID).stop().animate({left:'-16px'},250); } $(obj).hover(showcontrols,hidecontrols); hidecontrols(); } if(o.autoHideCaptions) { var isHover; function autoShowCap(){isHover=true;for(i=1;i<=o.inView;i++) showtext($('li:eq('+i+') p', obj).html(),i);} function autoHideCap(){isHover=false;hideCaption();} $(obj).hover(autoShowCap,autoHideCap); hideCaption(); } }

function keyBind(){ if(o.enableKeyboardNav) { $(document).keydown(function(event){ if(event.keyCode == 39) { forcePrevNext('next'); $(document).unbind('keydown'); } if(event.keyCode == 37) { forcePrevNext('prev'); $(document).unbind('keydown'); } if(event.keyCode == 80 || event.keyCode == 111) forcePause(); if(event.keyCode == 83 || event.keyCode == 115) { forceStart(); $(document).unbind('keydown'); } }); } }

function forcePrevNext(dir) { o.onPauseClick.call(this); $('#btn_rt'+randID).unbind('click'); $('#btn_lt'+randID).unbind('click'); setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 -16px')},o.transitionSpeed-1); autopilot = 0; $('#progress'+randID).stop().fadeOut(); status='pause'; clearTimeout(clearInt); (dir=='prev') ? moveRight():moveLeft(); $('#play_pause_btn'+randID).unbind('click'); setTimeout(function(){ $('#play_pause_btn'+randID).bind('click',function(){forceStart();}); $('#btn_rt'+randID).bind('click',function(){forcePrevNext('next')}); $('#btn_lt'+randID).bind('click',function(){forcePrevNext('prev')}); },o.transitionSpeed); }

function forcePause() { $('#play_pause_btn'+randID).unbind('click'); if(autopilot) { o.onPauseClick.call(this); $('#play_pause_btn'+randID).fadeTo(250,0,function(){$(this).css({'background-position':'0 -16px','opacity':'.5'});}).animate({opacity:.5},250); autopilot = 0; showminmax(); $('#progress'+randID).stop().fadeOut(); clearTimeout(clearInt); setTimeout(function(){$('#play_pause_btn'+randID).bind('click',function(){forceStart();})},o.transitionSpeed); } }

function forceStart() { $('#play_pause_btn'+randID).unbind('click'); if(!autopilot) { setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 0')},o.transitionSpeed-1); autopilot = 1; moveLeft(); clearInt=setInterval(function(){moveLeft();},o.displayTime+o.transitionSpeed); setTimeout(function(){$('#play_pause_btn'+randID).bind('click',function(){forcePause();})},o.transitionSpeed); } }

function preMove() { hideCaption();

if(o.showControls && o.prevNextInternal) { $('#play_pause_btn'+randID).fadeOut(200); $('#btn_lt'+randID).fadeOut(200); $('#btn_rt'+randID).fadeOut(200); } if(o.displayThumbnails) for(i=1;i<=numImages;i++) $('#thumb'+randID+'_'+i).css({'border-color':'#ccc'}).animate({'opacity': .65},500); }

function postMove() { if(o.showControls && o.prevNextInternal) { $('#play_pause_btn'+randID).fadeIn(200); $('#btn_lt'+randID).fadeIn(200); $('#btn_rt'+randID).fadeIn(200); } keyBind(); if(o.autoHideCaptions && isHover) autoShowCap(); if(o.displayThumbnails) for(i=0;i<viewable.length;i++) $('#thumb'+randID+'_'+viewable[i]).css({'border-color':'#ff0000'}).animate({'opacity': 1},500); if(!o.autoHideCaptions) for(i=1;i<=o.inView;i++) showtext($('li:eq('+i+') p', obj).html(),i); if(o.displayThumbnails) $('#thumbs'+randID+' div').unbind('click').bind('click', thumbclick).css({'cursor':'pointer'}); ary=[]; for(x=1;x<=o.inView;x++){ary.push($('img:eq('+x+')',obj).attr('src'))} o.onSlideEnd.call(this,ary); }

function moveLeft(dist) { if(dist==null) dist=o.advance; preMove(); if(o.displayThumbnails) { for(i=1;i<=dist;i++){ viewable.push(unviewable.shift()); unviewable.push(viewable.shift()); } } if(o.displayTime == 0){clearInterval(clearInt);} $('li:lt('+dist+')', obj).clone(true).insertAfter($('li:last', obj)); o.onSlideStart.call(this,viewable,'left'); $('ul', obj).animate({left:-imgWidth*(dist+1)-(parseInt(o.padding)*(dist+1))*2},o.transitionSpeed,o.easeLeft,function(){ $('li:lt('+dist+')', obj).remove(); $(this).css({'left':-imgWidth-parseInt(o.padding)*2}); if(o.displayProgressBar && autopilot) startProgressBar(); postMove(); if(o.displayTime == 0){moveLeft();} }); } function moveRight(dist) { if(dist==null) dist=o.advance; preMove(); if(o.displayThumbnails) { for(i=1;i<=dist;i++){ viewable.unshift(unviewable.pop()); unviewable.unshift(viewable.pop()); } } $('li:gt('+(numImages-(dist+1))+')', obj).clone(true).insertBefore($('li:first', obj)); o.onSlideStart.call(this,viewable,'right'); $('ul', obj).css('left',-(imgWidth*(dist+1))-(parseInt(o.padding)*((dist+1)*2))) .animate({left:-imgWidth-(parseInt(o.padding)*2)},o.transitionSpeed,o.easeRight,function(){ $('li:gt('+(numImages-1)+')', obj).remove(); postMove(); }); }


if(autopilot) { var clearInt = setInterval(function(){moveLeft();},o.displayTime+o.transitionSpeed); if(o.displayProgressBar) startProgressBar(o.displayTime+o.transitionSpeed); } else {status='pause';$('#play_pause_btn'+randID).css({'background-position':'0 -16px'});} keyBind(); 

		});

} }); })(jQuery); </script> <script type="text/javascript"> $(function(){

$('#Slideshow').infiniteCarousel(); });

</script>

Retrieved from "http://2012.igem.org/Team:HKUST-Hong_Kong/Parts"