Team:HKUST-Hong Kong

From 2012.igem.org

(Difference between revisions)
Line 416: Line 416:
         <div id="Slideshow">
         <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>
         </div>
Line 452: Line 423:
#Slideshow{
#Slideshow{
-
width:4000px;
+
width:500px;
 +
height:300px;
 +
background-color:#EEEEEE;
}
}
-
#Slideshow ul{
 
-
list-style:none;
 
-
width:4000px;
 
-
margin:0;
 
-
padding:0;
 
-
position:relative;
 
-
}
 
-
 
-
#Slideshow li{
 
-
display:inline;
 
-
float:left;
 
-
}
 
</style>
</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>
 
-
 
         </div>
         </div>

Revision as of 09:14, 28 June 2012

Team:HKUST-Hong Kong - 2012.igem.org

Google Chrome is recommended for viewing this page.

Modeling

content1

content2

content3

content4

content5

content6

Modeling

content1

content2

content3

content4

content5

content6

First Paragraph

Second Paragraph

Third Paragraph