Difference between revisions of "Team:Mingdao/Meetup"

(Created page with "{{Mingdao}} <html> <head> <script type="text/javascript"> $(function(){ // 先一一取得相關的元素及高度 var $block = $('#NCTU'), $photo = $block.find('.photo'...")
 
Line 1: Line 1:
 
{{Mingdao}}
 
{{Mingdao}}
 
<html>
 
<html>
−
<head>
 
−
<script type="text/javascript">
 
−
$(function(){
 
−
// 先一一取得相關的元素及高度
 
−
var $block = $('#NCTU'),
 
−
$photo = $block.find('.photo'),
 
−
$photoA = $photo.find('a'),
 
−
$photoImg = $photoA.find('img'),
 
−
$photoDesc = $photoA.find('.desc-title'),
 
−
$lists = $block.find('.lists'),
 
−
$list_pic = $block.find('.list_pic'),
 
−
_list_picHeight = $list_pic.height(),
 
−
$playPauseBtn = $photo.append('<a href="#playPause" class="playPause-btn-pause" id="playPause-btn" title="暫停">暫停</a>').find('#playPause-btn'),
 
−
$ul = $lists.find('ul'),
 
−
$li = $ul.find('li'),
 
−
_liHeight = $li.height(),
 
−
_set = Math.ceil(_list_picHeight / _liHeight),
 
−
_count = Math.ceil($li.length / _set),
 
−
_height = _set * _liHeight * -1,
 
−
timer, speed = 3000, _animateSpeed = 400, // 分別設定輪播速度及動畫速度
 
−
_index = 0, _countIndex = 0;
 
−
 
−
// 先在縮圖前面都插入一個 .nav-bar, 主要是當點選到該縮圖時的效果
 
−
$('<span class="nav-bar"></span>').insertBefore($li.find('img'));
 
−
// 先讓描述區塊的背景有透明度
 
−
$block.find('.desc-bg').css('opacity', 0.7);
 
−
 
−
// 如果圖片組數超出一次能顯示的數量時, 產生可以切換的上下鈕
 
−
var $controls = null;
 
−
if(_count>1){
 
−
$controls = $lists.append('<a href="#prev" class="prev"></a><a href="#next" class="next"></a>').find('.prev, .next');
 
−
var $prev = $controls.eq(0).hide(),
 
−
$next = $controls.eq(1);
 
−
 
−
// 當點擊上下鈕時
 
−
$controls.click(function(e){
 
−
// 計算要顯示第幾組
 
−
_countIndex = Math.floor((e.target.className == 'prev' ? _countIndex - 1 + _count : _countIndex + 1) % _count);
 
−
 
−
// 進行動畫
 
−
$ul.stop().animate({
 
−
top: _countIndex * _height
 
−
}, _animateSpeed);
 
−
 
−
// 判斷上下鈕顯示與否
 
−
$prev.toggle(_countIndex>0);
 
−
$next.toggle(_countIndex!=_count-1);
 
−
 
−
return false;
 
−
});
 
−
}
 
−
 
−
// 如果縮圖 li 被點擊時
 
−
$li.click(function(){
 
−
var $this = $(this),
 
−
$a = $this.find('a'),
 
−
$img = $this.find('img');
 
−
 
−
clearTimeout(timer);
 
−
_index = $this.index();
 
−
// 分別改變左邊顯示區塊的超連結, 圖片, alt 及描述內容
 
−
$photoA.attr('href', $a.attr('href'));
 
−
$photoImg.attr({
 
−
src: $img.attr('src'),
 
−
alt: $img.attr('alt')
 
−
});
 
−
$photoDesc.html($img.attr('alt'));
 
−
$this.addClass('current').siblings('.current').removeClass('current');
 
−
 
−
// 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器
 
−
if(!$playPauseBtn.hasClass('playPause-btn-play')) timer = setTimeout(auto, speed + _animateSpeed);
 
−
 
−
return false;
 
−
}).eq(_index).click();
 
−
 
−
// 當播放鈕被點擊時
 
−
$playPauseBtn.click(function(){
 
−
// 進行 .playPause-btn-pause 及 .playPause-btn-play 樣式切換
 
−
var $this = $(this).toggleClass('playPause-btn-pause playPause-btn-play'),
 
−
_hasPlay = $this.hasClass('playPause-btn-play'),
 
−
_txt = _hasPlay ? '播放' : '暫停';
 
−
 
−
// 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器; 反之則停止計時器
 
−
if(_hasPlay) clearTimeout(timer);
 
−
else timer = setTimeout(auto, speed);
 
−
$this.attr('title', _txt).text(_txt);
 
−
 
−
return false;
 
−
});
 
−
 
−
// 自動輪播使用
 
−
function auto(){
 
−
_index = (_index + 1) % $li.length;
 
−
var $tmp = $li.eq(_index).click();
 
−
 
−
var _indexCount = Math.floor(_index / _set);
 
−
// 判斷是否要切換縮圖的顯示組數
 
−
if($controls != null && (_index == (_countIndex + 1) * _set || _index == 0) && _countIndex != _indexCount){
 
−
$next.click();
 
−
$tmp.animate({opacity: 1}, _animateSpeed, function(){
 
−
$tmp.addClass('current').siblings('.current').removeClass('current');
 
−
})
 
−
}
 
−
}
 
−
});
 
−
 
−
$(function(){
 
−
// 先一一取得相關的元素及高度
 
−
var $block = $('#Asia_C'),
 
−
$photo = $block.find('.photo'),
 
−
$photoA = $photo.find('a'),
 
−
$photoImg = $photoA.find('img'),
 
−
$photoDesc = $photoA.find('.desc-title'),
 
−
$lists = $block.find('.lists'),
 
−
$list_pic = $block.find('.list_pic'),
 
−
_list_picHeight = $list_pic.height(),
 
−
$playPauseBtn = $photo.append('<a href="#playPause" class="playPause-btn-pause" id="playPause-btn" title="暫停">暫停</a>').find('#playPause-btn'),
 
−
$ul = $lists.find('ul'),
 
−
$li = $ul.find('li'),
 
−
_liHeight = $li.height(),
 
−
_set = Math.ceil(_list_picHeight / _liHeight),
 
−
_count = Math.ceil($li.length / _set),
 
−
_height = _set * _liHeight * -1,
 
−
timer, speed = 3000, _animateSpeed = 400, // 分別設定輪播速度及動畫速度
 
−
_index = 0, _countIndex = 0;
 
−
 
−
// 先在縮圖前面都插入一個 .nav-bar, 主要是當點選到該縮圖時的效果
 
−
$('<span class="nav-bar"></span>').insertBefore($li.find('img'));
 
−
// 先讓描述區塊的背景有透明度
 
−
$block.find('.desc-bg').css('opacity', 0.7);
 
−
 
−
// 如果圖片組數超出一次能顯示的數量時, 產生可以切換的上下鈕
 
−
var $controls = null;
 
−
if(_count>1){
 
−
$controls = $lists.append('<a href="#prev" class="prev"></a><a href="#next" class="next"></a>').find('.prev, .next');
 
−
var $prev = $controls.eq(0).hide(),
 
−
$next = $controls.eq(1);
 
−
 
−
// 當點擊上下鈕時
 
−
$controls.click(function(e){
 
−
// 計算要顯示第幾組
 
−
_countIndex = Math.floor((e.target.className == 'prev' ? _countIndex - 1 + _count : _countIndex + 1) % _count);
 
−
 
−
// 進行動畫
 
−
$ul.stop().animate({
 
−
top: _countIndex * _height
 
−
}, _animateSpeed);
 
−
 
−
// 判斷上下鈕顯示與否
 
−
$prev.toggle(_countIndex>0);
 
−
$next.toggle(_countIndex!=_count-1);
 
−
 
−
return false;
 
−
});
 
−
}
 
−
 
−
// 如果縮圖 li 被點擊時
 
−
$li.click(function(){
 
−
var $this = $(this),
 
−
$a = $this.find('a'),
 
−
$img = $this.find('img');
 
−
 
−
clearTimeout(timer);
 
−
_index = $this.index();
 
−
// 分別改變左邊顯示區塊的超連結, 圖片, alt 及描述內容
 
−
$photoA.attr('href', $a.attr('href'));
 
−
$photoImg.attr({
 
−
src: $img.attr('src'),
 
−
alt: $img.attr('alt')
 
−
});
 
−
$photoDesc.html($img.attr('alt'));
 
−
$this.addClass('current').siblings('.current').removeClass('current');
 
−
 
−
// 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器
 
−
if(!$playPauseBtn.hasClass('playPause-btn-play')) timer = setTimeout(auto, speed + _animateSpeed);
 
−
 
−
return false;
 
−
}).eq(_index).click();
 
−
 
−
// 當播放鈕被點擊時
 
−
$playPauseBtn.click(function(){
 
−
// 進行 .playPause-btn-pause 及 .playPause-btn-play 樣式切換
 
−
var $this = $(this).toggleClass('playPause-btn-pause playPause-btn-play'),
 
−
_hasPlay = $this.hasClass('playPause-btn-play'),
 
−
_txt = _hasPlay ? '播放' : '暫停';
 
−
 
−
// 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器; 反之則停止計時器
 
−
if(_hasPlay) clearTimeout(timer);
 
−
else timer = setTimeout(auto, speed);
 
−
$this.attr('title', _txt).text(_txt);
 
−
 
−
return false;
 
−
});
 
−
 
−
// 自動輪播使用
 
−
function auto(){
 
−
_index = (_index + 1) % $li.length;
 
−
var $tmp = $li.eq(_index).click();
 
−
 
−
var _indexCount = Math.floor(_index / _set);
 
−
// 判斷是否要切換縮圖的顯示組數
 
−
if($controls != null && (_index == (_countIndex + 1) * _set || _index == 0) && _countIndex != _indexCount){
 
−
$next.click();
 
−
$tmp.animate({opacity: 1}, _animateSpeed, function(){
 
−
$tmp.addClass('current').siblings('.current').removeClass('current');
 
−
})
 
−
}
 
−
}
 
−
});
 
−
</script>
 
−
 
 
<div id="sp-menu-wrapper">
 
<div id="sp-menu-wrapper">
 
     <div id="sp-logo">
 
     <div id="sp-logo">
Line 314: Line 103:
 
             <div class="photo">
 
             <div class="photo">
 
                 <a href="#">
 
                 <a href="#">
−
                 <img src="images/成大交流/NCKU1.jpg" width="424" height="318" /> </a>
+
                 <img src="https://static.igem.org/mediawiki/2016/0/06/T--Mingdao--NCKU01.jpg" width="424" height="318" /> </a>
 
             </div>
 
             </div>
 
             <div class="lists">
 
             <div class="lists">
 
                 <div class="list_pic">
 
                 <div class="list_pic">
 
                     <ul>
 
                     <ul>
−
                         <li><a href="#"><img src="images/成大交流/NCKU1.jpg" /></a></li>
+
                         <li><a href="#"><img src="https://static.igem.org/mediawiki/2016/0/06/T--Mingdao--NCKU01.jpg" /></a></li>
−
                         <li><a href="#"><img src="images/成大交流/NCKU2.jpg"  /></a></li>
+
                         <li><a href="#"><img src="https://static.igem.org/mediawiki/2016/f/fc/T--Mingdao--NCKU02.jpg"  /></a></li>
−
                         <li><a href="#"><img src="images/成大交流/NCKU3.jpg"  /></a></li>
+
                         <li><a href="#"><img src="https://static.igem.org/mediawiki/2016/e/ee/T--Mingdao--NCKU03.jpg"  /></a></li>
−
                         <li><a href="#"><img src="images/成大交流/NCKU4.jpg"  /></a></li>
+
                         <li><a href="#"><img src="https://static.igem.org/mediawiki/2016/9/93/T--Mingdao--NCKU04.jpg"  /></a></li>
−
                         <li><a href="#"><img src="images/成大交流/NCKU5.jpg"  /></a></li>
+
                         <li><a href="#"><img src="https://static.igem.org/mediawiki/2016/e/e3/T--Mingdao--NCKU05.jpg"  /></a></li>
−
                         <li><a href="#"><img src="images/成大交流/NCKU6.jpg"  /></a></li>
+
                         <li><a href="#"><img src="https://static.igem.org/mediawiki/2016/4/49/T--Mingdao--NCKU57.jpg"  /></a></li>
−
                         <li><a href="#"><img src="images/成大交流/NCKU7.jpg"  /></a></li>
+
                         <li><a href="#"><img src="https://static.igem.org/mediawiki/2016/5/5c/T--Mingdao--NCKU06.jpg"  /></a></li>
−
                         <li><a href="#"><img src="images/成大交流/NCKU8.jpg"  /></a></li>
+
                         <li><a href="#"><img src="https://static.igem.org/mediawiki/2016/6/61/T--Mingdao--NCKU07.jpg"  /></a></li>
 
                     </ul>
 
                     </ul>
 
                 </div>
 
                 </div>
Line 337: Line 126:
 
   </div>
 
   </div>
 
</div>
 
</div>
−
</head>
 
  
 
</html>
 
</html>

Revision as of 12:49, 12 October 2016

We've attended an iGEM team interact conference held by National Chiao Tung University (UCTU) on June 30th. With the participation of National Tsing Hua University(NTHU) and Chang Gung University(CGU) , this interaction seemed so interesting and we had an absolutely marvelous time spending together talking over our topics. Mingdao iGEM team actually benefited so much from those great iGEM teams, it's worth noting that the lively discussion we had made inspired us of a brand new thoughts. We really appreciated that UCTU gave us this opportunity to communicate with those brilliant iGEM teams.

In retrospect, there are so many wonderful memories for us in this conference. The starting ceremony, team meetups, workshop collaborations, to name a few. Aside from simply presenting our respective projects, a strong sense of " iGem is like a big family" greatly hit home. As "arguably" the youngest participants in the conference, we receive help and support from other teams a lot. We couldn't be more grateful for that, and we deeply believe that collaboration is one of the most precious treasures that an iGem team could ever possess.