Team:ZJU-China/template/gallery-2013iGEMConference

<html>
	<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:ZJU-China/css/galleriffic-2.css?action=raw&ctype=text/css" />
	<script type="text/javascript" src="https://2013.igem.org/Team:ZJU-China/js/jquery.opacityrollover.js?action=raw&ctype=text/javascript"></script>
	<script type="text/javascript" src="https://2013.igem.org/Team:ZJU-China/js/jquery.galleriffic.js?action=raw&ctype=text/javascript"></script>
	<!-- We only want the thunbnails to display when javascript is disabled -->
	<script type="text/javascript">
		document.write('<style>.noscript { display: none; }</style>');
	</script>	
	<div id="page" style="margin-left:20px;">
		<div id="container">
			<div id="gallery" class="gallerycontent">
				<div id="controls" class="controls"></div>
				<div class="slideshow-container">
					<div id="loading" class="loader"></div>
					<div id="slideshow" class="slideshow"></div>
				</div>
				<div id="caption" class="caption-container"></div>
			</div>
			<div id="thumbs" class="navigation">
				<ul class="thumbs noscript">
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/b/b2/2013_iGEM_Conference1.JPG/600px-2013_iGEM_Conference1.JPG" title="Team member Jin Huang talked with NCTU_Formosa’s team member- Huizhong Lee about our project.">
							<img src="https://static.igem.org/mediawiki/2013/thumb/b/b2/2013_iGEM_Conference1.JPG/75px-2013_iGEM_Conference1.JPG" alt="Science Fair" />
						</a>
						<div class="caption">
							<div class="image-desc">Team member Jin Huang talked with NCTU_Formosa’s team member- Huizhong Lee about our project.</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/3/3f/2013_iGEM_Conference2.JPG/600px-2013_iGEM_Conference2.JPG" title="We made great friends & enjoyed in IGEM together！">
							<img src="https://static.igem.org/mediawiki/2013/thumb/3/3f/2013_iGEM_Conference2.JPG/75px-2013_iGEM_Conference2.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">We made great friends & enjoyed in IGEM together！</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/e/e4/2013_iGEM_Conference3.JPG/600px-2013_iGEM_Conference3.JPG" title="Team member Jiasheng Wang introduced our program in NCTU.">
							<img src="https://static.igem.org/mediawiki/2013/thumb/e/e4/2013_iGEM_Conference3.JPG/75px-2013_iGEM_Conference3.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">Team member Jiasheng Wang introduced our program in NCTU.</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/d/d1/2013_iGEM_Conference6.JPG/600px-2013_iGEM_Conference6.JPG" title="Team in the conference held by NCTU_Formosa.">
							<img src="https://static.igem.org/mediawiki/2013/thumb/d/d1/2013_iGEM_Conference6.JPG/75px-2013_iGEM_Conference6.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">Team in the conference held by NCTU_Formosa.</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/5/5d/2013_iGEM_Conference7.JPG/600px-2013_iGEM_Conference7.JPG" title="We've got lots of advices from teachers and students.">
							<img src="https://static.igem.org/mediawiki/2013/thumb/5/5d/2013_iGEM_Conference7.JPG/75px-2013_iGEM_Conference7.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">We've got lots of advices from teachers and students.</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/3/34/2013_iGEM_Conference8.JPG/600px-2013_iGEM_Conference8.JPG" title="Our team members Xiaoyue Wang, Congcong Xing and Wenjia Wang in the conference.">
							<img src="https://static.igem.org/mediawiki/2013/thumb/3/34/2013_iGEM_Conference8.JPG/75px-2013_iGEM_Conference8.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">Our team members Xiaoyue Yang, Congcong Xing and Wenjia Gu in the conference.</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/6/68/2013_iGEM_Conference9.JPG/600px-2013_iGEM_Conference9.JPG" title="NJU_China & ZJU-China">
							<img src="https://static.igem.org/mediawiki/2013/thumb/6/68/2013_iGEM_Conference9.JPG/75px-2013_iGEM_Conference9.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">We share what we've got, what we wanna do and what we need with each other.</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/a/af/2013_iGEM_Conference10.JPG/600px-2013_iGEM_Conference10.JPG" title="NJU_China & ZJU-China">
							<img src="https://static.igem.org/mediawiki/2013/thumb/a/af/2013_iGEM_Conference10.JPG/75px-2013_iGEM_Conference10.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">Team member Congcong Xing danced with another team's member and we enjoyed the conference.</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/6/6e/2013_iGEM_Conference11.JPG/600px-2013_iGEM_Conference11.JPG" title="NJU_China & ZJU-China">
							<img src="https://static.igem.org/mediawiki/2013/thumb/6/6e/2013_iGEM_Conference11.JPG/75px-2013_iGEM_Conference11.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">Our team in NCTU.</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/4/43/2013_iGEM_Conference12.JPG/600px-2013_iGEM_Conference12.JPG" title="NJU_China & ZJU-China">
							<img src="https://static.igem.org/mediawiki/2013/thumb/4/43/2013_iGEM_Conference12.JPG/75px-2013_iGEM_Conference12.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">Had great fun!!</div>
						</div>
					</li>
					<li>
						<a class="thumb" name="Science Fair" href="https://static.igem.org/mediawiki/2013/thumb/f/f3/2013_iGEM_Conference14.JPG/600px-2013_iGEM_Conference14.JPG" title="NJU_China & ZJU-China">
							<img src="https://static.igem.org/mediawiki/2013/thumb/f/f3/2013_iGEM_Conference14.JPG/75px-2013_iGEM_Conference14.JPG" alt="Science Fair" />
						</a>
						<div class="caption">							
							<div class="image-desc">Helloooooo!!! We will be back!!!</div>
						</div>
					</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			// We only want these styles applied when javascript is enabled
			$('div.navigation').css({'width' : '600px'});
			$('div.gallerycontent').css({'display': 'block', 'width': '600px'});

			// Initially set opacity on thumbs and add
			// additional styling for hover effect on thumbs
			var onMouseOutOpacity = 0.67;
			$('#thumbs ul.thumbs li').opacityrollover({
				mouseOutOpacity:   onMouseOutOpacity,
				mouseOverOpacity:  1.0,
				fadeSpeed:         'fast',
				exemptionSelector: '.selected'
			});
			
			// Initialize Advanced Galleriffic Gallery
			var gallery = $('#thumbs').galleriffic({
				delay:                     2500,
				numThumbs:                 12,
				preloadAhead:              10,
				enableTopPager:            true,
				enableBottomPager:         true,
				maxPagesToShow:            7,
				imageContainerSel:         '#slideshow',
				controlsContainerSel:      '#controls',
				captionContainerSel:       '#caption',
				loadingContainerSel:       '#loading',
				renderSSControls:          true,
				renderNavControls:         true,
				playLinkText:              'Play Slideshow',
				pauseLinkText:             'Pause Slideshow',
				prevLinkText:              '&lsaquo; Previous Photo',
				nextLinkText:              'Next Photo &rsaquo;',
				nextPageLinkText:          'Next &rsaquo;',
				prevPageLinkText:          '&lsaquo; Prev',
				enableHistory:             false,
				autoStart:                 true,
				syncTransitions:           true,
				defaultTransitionDuration: 900,
				onSlideChange:             function(prevIndex, nextIndex) {
					// 'this' refers to the gallery, which is an extension of $('#thumbs')
					this.find('ul.thumbs').children()
						.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
						.eq(nextIndex).fadeTo('fast', 1.0);
				},
				onPageTransitionOut:       function(callback) {
					this.fadeTo('fast', 0.0, callback);
				},
				onPageTransitionIn:        function() {
					this.fadeTo('fast', 1.0);
				}
			});
		});
	</script>
</html>