Team:Amsterdam/Sandbox

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Amsterdam/Header}}
 
<html>
<html>
-
<script type="text/javascript">
+
<div id="pxs_container" class="pxs_container">
-
//Configure the script here
+
<div class="pxs_bg">
-
var teamname = "Amsterdam";
+
<div class="pxs_bg1"></div>
 +
<div class="pxs_bg2"></div>
 +
<div class="pxs_bg3"></div>
 +
</div>
 +
<div class="pxs_loading">Loading images...</div>
 +
<div class="pxs_slider_wrapper">
 +
<ul class="pxs_slider">
 +
<li><img src="https://static.igem.org/mediawiki/2011/4/45/P1130194.jpg" alt="First Image" /></li>
 +
<li><img src="https://static.igem.org/mediawiki/2011/9/9a/P1130193.jpg" alt="Second Image" /></li>
 +
</ul>
 +
<div class="pxs_navigation">
 +
<span class="pxs_next"></span>
 +
<span class="pxs_prev"></span>
 +
</div>
 +
<ul class="pxs_thumbnails">
 +
<li><img src="https://static.igem.org/mediawiki/2011/4/45/P1130194.jpg" height="100px" alt="First Image" /></li>
 +
<li><img src="https://static.igem.org/mediawiki/2011/9/9a/P1130193.jpg" height="100px" alt="Second Image" /></li>
 +
...
 +
</ul>
 +
</div>
 +
</div>
 +
<style type="text/css">
 +
.pxs_container{
 +
width:100%;
 +
height:420px;
 +
position:relative;
 +
border-top:7px solid #333;
 +
border-bottom:7px solid #333;
 +
overflow:hidden;
 +
-moz-box-shadow:0px 0px 7px #000;
 +
-webkit-box-shadow:0px 0px 7px #000;
 +
box-shadow:0px 0px 7px #000;
 +
}
 +
.pxs_bg{
 +
background:transparent url(../images/bg.png) repeat top left;
 +
}
 +
.pxs_bg div{
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
height:420px;
 +
background-repeat:repeat;
 +
background-position:top left;
 +
background-color:transparent;
 +
}
 +
.pxs_bg .pxs_bg1{
 +
background-image:url(../images/bg1.png);
 +
}
 +
.pxs_bg .pxs_bg2{
 +
background-image:url(../images/bg2.png);
 +
}
 +
.pxs_bg .pxs_bg3{
 +
background-image:url(../images/bg3.png);
 +
}
 +
.pxs_slider_wrapper{
 +
display:none;
 +
}
 +
.pxs_container ul{
 +
margin:0px;
 +
padding:0px;
 +
list-style:none;
 +
}
 +
ul.pxs_slider{
 +
position:absolute;
 +
left:0px;
 +
top:0px;
 +
height:420px;
 +
}
 +
ul.pxs_slider li{
 +
height:420px;
 +
float:left;
 +
position:relative;
 +
}
 +
ul.pxs_slider li img{
 +
display:block;
 +
margin:35px auto 0px auto;
 +
-moz-box-shadow:0px 0px 7px #222;
 +
-webkit-box-shadow:0px 0px 7px #222;
 +
box-shadow:0px 0px 7px #222;
 +
border: 8px solid transparent;
 +
-moz-border-radius:4px;
 +
-webkit-border-radius:4px;
 +
border-radius:4px;
 +
}
 +
ul.pxs_thumbnails{
 +
height:35px;
 +
position:absolute;
 +
top:320px;
 +
left:50%;
 +
}
 +
ul.pxs_thumbnails li{
 +
position:absolute;
 +
display:block;
 +
}
 +
ul.pxs_thumbnails li img{
 +
border: 5px solid #FFFFFF;
 +
-moz-box-shadow:1px 1px 7px #555;
 +
-webkit-box-shadow:1px 1px 7px #555;
 +
box-shadow:1px 1px 7px #555;
 +
cursor:pointer;
 +
display:block;
 +
opacity:0.7;
 +
}
 +
ul.pxs_thumbnails li.selected img{
 +
opacity:1.0;
 +
}
 +
.pxs_navigation span{
 +
position:absolute;
 +
width:30px;
 +
height:60px;
 +
-moz-box-shadow:0px 0px 2px #000;
 +
-webkit-box-shadow:0px 0px 2px #000;
 +
box-shadow:0px 0px 2px #000;
 +
top:145px;
 +
opacity:0.6;
 +
-moz-border-radius:4px;
 +
-webkit-border-radius:4px;
 +
border-radius:4px;
 +
cursor:pointer;
 +
}
 +
.pxs_navigation span:hover{
 +
opacity:0.9;
 +
}
 +
.pxs_navigation span.pxs_prev{
 +
background:#000 url(../images/prev.png) no-repeat center center;
 +
}
 +
.pxs_navigation span.pxs_next{
 +
background:#000 url(../images/next.png) no-repeat center center;
 +
}
 +
.pxs_loading{
 +
color:#fff;
 +
font-size:20px;
 +
padding:15px 15px 15px 50px;
 +
position:absolute;
 +
background:#333 url(../images/ajax-loader.gif) no-repeat 10px 50%;
 +
-moz-border-radius:15px;
 +
-webkit-border-radius:15px;
 +
border-radius:15px;
 +
opacity:0.7;
 +
width:180px;
 +
position:absolute;
 +
top:150px;
 +
left:50%;
 +
margin-left:-90px;
 +
}
 +
</style>
 +
<script type = "text/javascript">
 +
$(function() {
 +
var $pxs_container = $('#pxs_container');
 +
$pxs_container.parallaxSlider();
 +
});
 +
(function($) {
 +
$.fn.parallaxSlider = function(options) {
 +
var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
 +
return this.each(function() {
 +
var $pxs_container = $(this),
 +
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
-
// Do not edit below
+
//the main slider
 +
var $pxs_slider = $('.pxs_slider',$pxs_container),
 +
//the elements in the slider
 +
$elems = $pxs_slider.children(),
 +
//total number of elements
 +
total_elems = $elems.length,
 +
//the navigation buttons
 +
$pxs_next = $('.pxs_next',$pxs_container),
 +
$pxs_prev = $('.pxs_prev',$pxs_container),
 +
//the bg images
 +
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
 +
$pxs_bg2 = $('.pxs_bg2',$pxs_container),
 +
$pxs_bg3 = $('.pxs_bg3',$pxs_container),
 +
//current image
 +
current = 0,
 +
//the thumbs container
 +
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
 +
//the thumbs
 +
$thumbs = $pxs_thumbnails.children(),
 +
//the interval for the autoplay mode
 +
slideshow,
 +
//the loading image
 +
$pxs_loading = $('.pxs_loading',$pxs_container),
 +
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
-
// Loop through the URL
+
//first, preload all the images
-
function buildDepth(array,count) {
+
var loaded = 0,
-
var depthStr="";
+
$images = $pxs_slider_wrapper.find('img');
-
for (i=0;i<count;i++)
+
-
{
+
-
depthStr=depthStr + array[i] + "/" ;
+
-
}
+
-
return depthStr;
+
-
}
+
-
// The function
+
$images.each(function(){
-
function buildBreadCrumbTrail(page) {
+
var $img = $(this);
-
// Declare vars
+
$('<img/>').load(function(){
-
var constituentFolders = new Array();
+
++loaded;
-
var currentURL = page;
+
if(loaded == total_elems*2){
 +
$pxs_loading.hide();
 +
$pxs_slider_wrapper.show();
-
// Split the URL
+
//width of an image
-
constituentFolders=currentURL.split("/");
+
//(assuming all images have the same sizes)
 +
var one_image_w = $pxs_slider.find('img:first').width();
-
// Start with a link to the team home page
+
/*
-
var outputStr="<a href='https://2010.igem.org/Team:'" + teamname + ">Homepage</a>";
+
set the width of the slider,
 +
of each one of its elements, and of the
 +
navigation buttons
 +
*/
 +
setWidths($pxs_slider,
 +
$elems,
 +
total_elems,
 +
$pxs_bg1,
 +
$pxs_bg2,
 +
$pxs_bg3,
 +
one_image_w,
 +
$pxs_next,
 +
$pxs_prev);
-
// Loop through the URL
+
/*
-
for (count=2;count<(constituentFolders.length);count++)
+
set the widths of the thumbs
-
{
+
and spread them evenly
-
outputStr=outputStr + " > <a href='https://2010.igem.org/Team:" + teamname +  
+
*/
-
buildDepth(constituentFolders,count) + constituentFolders[count] + "'>" +
+
$pxs_thumbnails.css({
-
capitaliseFirstLetter(constituentFolders[count]).replace(/-/gi," ") + "</a>";
+
'width' : one_image_w + 'px',
 +
'margin-left' : -one_image_w/2 + 'px'
 +
});
 +
var spaces = one_image_w/(total_elems+1);
 +
$thumbs.each(function(i){
 +
var $this = $(this);
 +
var left = spaces*(i+1) - $this.width()/2;
 +
$this.css('left',left+'px');
 +
 
 +
if(o.thumbRotation){
 +
var angle = Math.floor(Math.random()*41)-20;
 +
$this.css({
 +
'-moz-transform' : 'rotate('+ angle +'deg)',
 +
'-webkit-transform' : 'rotate('+ angle +'deg)',
 +
'transform' : 'rotate('+ angle +'deg)'
 +
});
 +
}
 +
//hovering the thumbs animates them up and down
 +
$this.bind('mouseenter',function(){
 +
$(this).stop().animate({top:'-10px'},100);
 +
}).bind('mouseleave',function(){
 +
$(this).stop().animate({top:'0px'},100);
 +
});
 +
});
 +
 
 +
//make the first thumb to be selected
 +
highlight($thumbs.eq(0));
 +
 
 +
//slide, when clicking the navigation buttons
 +
$pxs_next.bind('click',function(){
 +
++current;
 +
if(current >= total_elems)
 +
if(o.circular)
 +
current = 0;
 +
else{
 +
--current;
 +
return false;
 +
}
 +
highlight($thumbs.eq(current));
 +
slide(current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
o.speed,
 +
o.easing,
 +
o.easingBg);
 +
});
 +
$pxs_prev.bind('click',function(){
 +
--current;
 +
if(current < 0)
 +
if(o.circular)
 +
current = total_elems - 1;
 +
else{
 +
++current;
 +
return false;
 +
}
 +
highlight($thumbs.eq(current));
 +
slide(current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
o.speed,
 +
o.easing,
 +
o.easingBg);
 +
});
 +
 
 +
/*
 +
clicking a thumb will slide to the respective image
 +
*/
 +
$thumbs.bind('click',function(){
 +
var $thumb = $(this);
 +
highlight($thumb);
 +
//if autoplay interrupt when user clicks
 +
if(o.auto)
 +
clearInterval(slideshow);
 +
current = $thumb.index();
 +
slide(current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
o.speed,
 +
o.easing,
 +
o.easingBg);
 +
});
 +
 
 +
/*
 +
activate the autoplay mode if
 +
that option was specified
 +
*/
 +
if(o.auto != 0){
 +
o.circular = true;
 +
slideshow = setInterval(function(){
 +
$pxs_next.trigger('click');
 +
},o.auto);
 +
}
 +
 
 +
/*
 +
when resizing the window,
 +
we need to recalculate the widths of the
 +
slider elements, based on the new window width;
 +
we need to slide again to the current one,
 +
since the left of the slider is no longer correct
 +
*/
 +
$(window).resize(function(){
 +
w_w = $(window).width();
 +
setWidths(
 +
$pxs_slider,
 +
$elems,
 +
total_elems,
 +
$pxs_bg1,
 +
$pxs_bg2,
 +
$pxs_bg3,
 +
one_image_w,
 +
$pxs_next,
 +
$pxs_prev
 +
);
 +
slide(
 +
current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
1,
 +
o.easing,
 +
o.easingBg
 +
);
 +
});
 +
 
 +
}
 +
}).error(function(){
 +
alert('here')
 +
}).attr('src',$img.attr('src'));
 +
});
 +
});
 +
};
 +
 
 +
//the current window width
 +
var w_w = $(window).width();
 +
 
 +
var slide = function(current,
 +
$pxs_slider,
 +
$pxs_bg3,
 +
$pxs_bg2,
 +
$pxs_bg1,
 +
speed,
 +
easing,
 +
easingBg){
 +
var slide_to = parseInt(-w_w * current);
 +
$pxs_slider.stop().animate({
 +
left : slide_to + 'px'
 +
},speed, easing);
 +
$pxs_bg3.stop().animate({
 +
left : slide_to/2 + 'px'
 +
},speed, easingBg);
 +
$pxs_bg2.stop().animate({
 +
left : slide_to/4 + 'px'
 +
},speed, easingBg);
 +
$pxs_bg1.stop().animate({
 +
left : slide_to/8 + 'px'
 +
},speed, easingBg);
}
}
-
// Write to the div
+
var highlight = function($elem){
-
$("#breadcrumbs").html(outputStr);
+
$elem.siblings().removeClass('selected');
-
var txt=document.getElementById("breadcrumbs")
+
$elem.addClass('selected');
-
txt.innerHTML=outputStr;
+
}
-
}
+
-
// Capitalize the first letter
+
var setWidths = function($pxs_slider,
-
function capitaliseFirstLetter(string) {
+
$elems,
-
    return string.charAt(0).toUpperCase() + string.slice(1);
+
total_elems,
-
}
+
$pxs_bg1,
 +
$pxs_bg2,
 +
$pxs_bg3,
 +
one_image_w,
 +
$pxs_next,
 +
$pxs_prev){
 +
/*
 +
the width of the slider is the window width
 +
times the total number of elements in the slider
 +
*/
 +
var pxs_slider_w = w_w * total_elems;
 +
$pxs_slider.width(pxs_slider_w + 'px');
 +
//each element will have a width = windows width
 +
$elems.width(w_w + 'px');
 +
/*
 +
we also set the width of each bg image div.
 +
The value is the same calculated for the pxs_slider
 +
*/
 +
$pxs_bg1.width(pxs_slider_w + 'px');
 +
$pxs_bg2.width(pxs_slider_w + 'px');
 +
$pxs_bg3.width(pxs_slider_w + 'px');
-
// Start the script upon page load
+
/*
-
onload=function(){
+
both, the right and left of the
-
buildBreadCrumbTrail(window.location.pathname);
+
navigation next and previous buttons will be:
-
}
+
windowWidth/2 - imgWidth/2 + some margin
 +
(not to touch the image borders)
 +
*/
 +
var position_nav = w_w/2 - one_image_w/2 + 3;
 +
$pxs_next.css('right', position_nav + 'px');
 +
$pxs_prev.css('left', position_nav + 'px');
 +
}
 +
 
 +
$.fn.parallaxSlider.defaults = {
 +
auto : 0,
 +
speed : 1000,
 +
easing : 'jswing',
 +
easingBg : 'jswing',
 +
circular : true,
 +
thumbRotation : true
 +
};
 +
//easeInOutExpo,easeInBack
 +
})(jQuery);
</script>
</script>
-
<div id="breadcrumbs"></div>
 
</html>
</html>
-
{{:Team:Amsterdam/Footer}}
 

Revision as of 15:54, 12 September 2011

Loading images...
  • First Image
  • Second Image
  • First Image
  • Second Image
    • ...

Retrieved from "http://2011.igem.org/Team:Amsterdam/Sandbox"