Team:HKUST-Hong Kong

From 2012.igem.org

(Difference between revisions)
Line 622: Line 622:
var autopilot = o.autoStart;
var autopilot = o.autoStart;
-
var numImages = $('img', obj).length; // Number of images
+
var numImages = $('img', obj).length;  
var imgHeight = $('img:first', obj).height();
var imgHeight = $('img:first', obj).height();
var imgWidth = $('img:first', obj).width();
var imgWidth = $('img:first', obj).width();
-
if(o.inView > numImages-1) o.inView=numImages-1; // check to make sure inview isnt greater than the number of images. inview should be at least two less than numimages (otherwise hinting wont work and animating left may catch a flash), but one less can work
+
if(o.inView > numImages-1) o.inView=numImages-1;  
-
$('p', obj).hide(); // Hide any text paragraphs in the carousel
+
$('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)); //,'overflow':'hidden'
+
$(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);
$('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', obj).css({'display':'inline','float':'left','padding':o.padding});
-
// Move rightmost image over to the left
+
$('li:last', obj).prependTo($('ul', obj));
$('li:last', obj).prependTo($('ul', obj));
$('ul', obj).css('left',-imgWidth-(parseInt(o.padding)*2)+'px').width(9999);
$('ul', obj).css('left',-imgWidth-(parseInt(o.padding)*2)+'px').width(9999);
-
// Build progress bar
+
if(o.displayProgressBar)
if(o.displayProgressBar)
{
{
Line 643: Line 643:
}
}
-
// Animate progress bar
+
function startProgressBar(barTime)
function startProgressBar(barTime)
{
{
Line 651: Line 651:
}
}
-
// Build textholder div(s) as wide as one image and as tall as the textholderHeight option
+
var containerBorder = parseInt($(obj).css('border-bottom-width')) + parseInt($(obj).css('border-top-width'));
var containerBorder = parseInt($(obj).css('border-bottom-width')) + parseInt($(obj).css('border-top-width'));
-
if(isNaN(containerBorder)) containerBorder = 0; // IE returns NaN for $(obj).css('border-bottom-width')
+
if(isNaN(containerBorder)) containerBorder = 0;  
-
var containerPaddingLeft = parseInt($(obj).css('padding-left')); // Normally we'd do both left and right but only left matters here
+
var containerPaddingLeft = parseInt($(obj).css('padding-left'));  
for(i=1;i<=o.inView;i++)
for(i=1;i<=o.inView;i++)
{
{
Line 670: Line 670:
if (textholderPadding > 0) $('.textholder',obj).width(imgWidth-textholderPadding);
if (textholderPadding > 0) $('.textholder',obj).width(imgWidth-textholderPadding);
-
$('.close',obj).each(function(i){ // Need to use each() because a loop doesn't work in this situation. see http://www.bennadel.com/blog/534-The-Beauty-Of-The-jQuery-Each-Method.htm
+
$('.close',obj).each(function(i){  
$(this).click(function(){$('#textholder'+randID+'_'+(i+1)).animate({marginBottom:(-imgHeight*o.textholderHeight)-containerBorder-1+'px'},500)});
$(this).click(function(){$('#textholder'+randID+'_'+(i+1)).animate({marginBottom:(-imgHeight*o.textholderHeight)-containerBorder-1+'px'},500)});
});
});
-
$('.minmax',obj).each(function(i){ // Same reason as previous chunk
+
$('.minmax',obj).each(function(i){  
$(this).click(function(){
$(this).click(function(){
if(parseInt($('#textholder'+randID+'_'+(i+1)).css('margin-bottom'))==0)
if(parseInt($('#textholder'+randID+'_'+(i+1)).css('margin-bottom'))==0)
Line 698: Line 698:
if(t != null)
if(t != null)
{
{
-
$('#textholder'+randID+'_'+i+' span').html(t); // Change textholder content
+
$('#textholder'+randID+'_'+i+' span').html(t);  
-
$('#textholder'+randID+'_'+i).stop().animate({marginBottom:'0px'},500); // Raise textholder
+
$('#textholder'+randID+'_'+i).stop().animate({marginBottom:'0px'},500);
$('#minmax'+randID+'_'+i).css('background-position','0 -8px');
$('#minmax'+randID+'_'+i).css('background-position','0 -8px');
showminmax();
showminmax();
Line 720: Line 720:
function thumbclick(event)
function thumbclick(event)
{
{
-
target_num = this.id.split('_'); // we want target_num[1]
+
target_num = this.id.split('_');  
if(viewable[0] != target_num[1])
if(viewable[0] != target_num[1])
{
{
Line 726: Line 726:
$('#progress'+randID).stop().fadeOut();
$('#progress'+randID).stop().fadeOut();
clearTimeout(clearInt);
clearTimeout(clearInt);
-
$('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click'); // Unbind the thumbnail click event until the transition has ended
+
$('#thumbs'+randID+' div').css({'cursor':'default'}).unbind('click');  
autopilot = 0;
autopilot = 0;
setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 -16px')},o.transitionSpeed);
setTimeout(function(){$('#play_pause_btn'+randID).css('background-position','0 -16px')},o.transitionSpeed);
Line 743: Line 743:
}
}
-
var viewable = []; // track which images are being displayed
+
var viewable = [];  
-
var unviewable = []; // track which images are being displayed
+
var unviewable = [];  
-
// Build thumbnail viewer and thumbnail divs
+
$(obj).after('<div id="thumbs'+randID+'" style="position:relative;overflow:auto;clear:left;text-align:left;padding-top:5px;"></div>');
$(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++)
for(i=0;i<=numImages-1;i++)
Line 754: Line 754:
unviewable.push(i+1);
unviewable.push(i+1);
}
}
-
// Initialize viewable/unviewable arrays
+
for(i=1;i<=o.inView;i++) viewable.push(unviewable.shift());
for(i=1;i<=o.inView;i++) viewable.push(unviewable.shift());
-
// Next two lines are a special case to handle the first list element which was originally the last
+
thumb = $('img:first', obj).attr('src');
thumb = $('img:first', obj).attr('src');
$('#thumb'+randID+'_'+numImages).css({'background-image':'url('+thumb+')'});
$('#thumb'+randID+'_'+numImages).css({'background-image':'url('+thumb+')'});
-
$('#thumbs'+randID+' div.thumb:not(:first)').css({opacity:.65}); // makes all thumbs 65% opaque except the first one
+
$('#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)}); // add hover to thumbs
+
$('#thumbs'+randID+' div.thumb').hover(function(){$(this).animate({'opacity':1},150)},function(){if(viewable[0]!=this.id.split('_')[1]) $(this).animate({'opacity':.65},250)});  
-
// Assign click handler for the thumbnails. Normally the format $('.thumb') would work but since it's outside of our object (obj) it would get called multiple times
+
-
$('#thumbs'+randID+' div').bind('click', thumbclick); // We use bind instead of just plain click so that we can repeatedly remove and reattach the handler
+
$('#thumbs'+randID+' div').bind('click', thumbclick);  
if(!o.displayThumbnailNumbers) $('#thumbs'+randID+' div').text('');
if(!o.displayThumbnailNumbers) $('#thumbs'+randID+' div').text('');
Line 772: Line 772:
if(o.showControls)
if(o.showControls)
{
{
-
// Pause/play button(img)
+
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>';
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);
$(obj).append(html);
Line 789: Line 789:
}
}
-
// Prev/next button(img)
+
arrowsTop = ((imgHeight/2)-15)+parseInt(o.padding);
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_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>';
Line 874: Line 874:
function forcePause()
function forcePause()
{
{
-
$('#play_pause_btn'+randID).unbind('click'); // unbind the click, wait for transition, then reenable
+
$('#play_pause_btn'+randID).unbind('click');  
if(autopilot)
if(autopilot)
{
{
Line 889: Line 889:
function forceStart()
function forceStart()
{
{
-
$('#play_pause_btn'+randID).unbind('click'); // unbind the click, wait for transition, then reenable
+
$('#play_pause_btn'+randID).unbind('click');  
if(!autopilot)
if(!autopilot)
{
{
Line 903: Line 903:
{
{
hideCaption();
hideCaption();
-
// Fade out play/pause/left/right
+
if(o.showControls && o.prevNextInternal)
if(o.showControls && o.prevNextInternal)
{
{
Line 942: Line 942:
}
}
}
}
-
if(o.displayTime == 0){clearInterval(clearInt);} // If running a contonuous show with no display time, fist clear the interval. Then below, recursively call moveLeft
+
if(o.displayTime == 0){clearInterval(clearInt);}  
-
$('li:lt('+dist+')', obj).clone(true).insertAfter($('li:last', obj)); // Copy the first image (offscreen to the left) to the end of the list (offscreen to the right)
+
$('li:lt('+dist+')', obj).clone(true).insertAfter($('li:last', obj));
o.onSlideStart.call(this,viewable,'left');
o.onSlideStart.call(this,viewable,'left');
-
$('ul', obj).animate({left:-imgWidth*(dist+1)-(parseInt(o.padding)*(dist+1))*2},o.transitionSpeed,o.easeLeft,function(){ // Animate the entire list to the left
+
$('ul', obj).animate({left:-imgWidth*(dist+1)-(parseInt(o.padding)*(dist+1))*2},o.transitionSpeed,o.easeLeft,function(){  
-
$('li:lt('+dist+')', obj).remove(); // When the animation finishes, remove the first image (on the left). It has already been copied to the end of the list (right)
+
$('li:lt('+dist+')', obj).remove();  
$(this).css({'left':-imgWidth-parseInt(o.padding)*2});
$(this).css({'left':-imgWidth-parseInt(o.padding)*2});
if(o.displayProgressBar && autopilot) startProgressBar();
if(o.displayProgressBar && autopilot) startProgressBar();
Line 964: Line 964:
}
}
}
}
-
$('li:gt('+(numImages-(dist+1))+')', obj).clone(true).insertBefore($('li:first', obj)); // Copy rightmost (last) li and insert it after the first li
+
$('li:gt('+(numImages-(dist+1))+')', obj).clone(true).insertBefore($('li:first', obj));
o.onSlideStart.call(this,viewable,'right');
o.onSlideStart.call(this,viewable,'right');
$('ul', obj).css('left',-(imgWidth*(dist+1))-(parseInt(o.padding)*((dist+1)*2)))
$('ul', obj).css('left',-(imgWidth*(dist+1))-(parseInt(o.padding)*((dist+1)*2)))
Line 973: Line 973:
}
}
-
// Kickoff the show
+
if(autopilot)
if(autopilot)
{
{

Revision as of 11:55, 27 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

  • Write something here

  • Write something here

  • Write something here

  • Write something here

  • Write something here

  • Write something here

  • Write something here

Second Paragraph

Third Paragraph

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