Team:Amsterdam/Sandbox

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<html>  
-
<div id="pxs_container" class="pxs_container">
+
-
<div class="pxs_bg">
+
-
<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;
+
-
//the main slider
+
<title>An Awesome CSS3 Lightbox Gallery With jQuery | Tutorialzine demo</title>
-
var $pxs_slider = $('.pxs_slider',$pxs_container),
+
-
//the elements in the slider
+
<link rel="stylesheet" type="text/css" href="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.css" />
-
$elems = $pxs_slider.children(),
+
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />
-
//total number of elements
+
<link rel="stylesheet" type="text/css" href="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/fancybox/jquery.fancybox-1.2.6.css" />
-
total_elems = $elems.length,
+
-
//the navigation buttons
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
$pxs_next = $('.pxs_next',$pxs_container),
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
-
$pxs_prev = $('.pxs_prev',$pxs_container),
+
<script type="text/javascript" src="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/fancybox/jquery.fancybox-1.2.6.pack.js"></script>
-
//the bg images
+
<script type="text/javascript" src="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/script.js"></script>
-
$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);
+
-
//first, preload all the images
+
<body>
-
var loaded = 0,
+
-
$images = $pxs_slider_wrapper.find('img');
+
<div id="main">
-
$images.each(function(){
+
<div id="gallery">
-
var $img = $(this);
+
   
-
$('<img/>').load(function(){
+
-
++loaded;
+
<div id="pic-1" class="pic" style="top:13px;left:438px;background:url(img/thumbs/colosseum.jpg) no-repeat 50% 50%; -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg);">
-
if(loaded == total_elems*2){
+
<a class="fancybox" rel="fncbx" href="img/original/colosseum.jpg" target="_blank">colosseum</a>
-
$pxs_loading.hide();
+
</div>
-
$pxs_slider_wrapper.show();
+
<div id="pic-2" class="pic" style="top:143px;left:595px;background:url(https://static.igem.org/mediawiki/2011/9/9a/P1130193.jpg) no-repeat 50% 50%; -moz-transform:rotate(-38deg); -webkit-transform:rotate(-38deg);">
-
 
+
<a class="fancybox" rel="fncbx" href="https://static.igem.org/mediawiki/2011/9/9a/P1130193.jpg" target="_blank">industrial-mech</a>
-
//width of an image
+
</div>
-
//(assuming all images have the same sizes)
+
<div id="pic-3" class="pic" style="top:155px;left:271px;background:url(img/thumbs/4-green-beach.jpg) no-repeat 50% 50%; -moz-transform:rotate(-8deg); -webkit-transform:rotate(-8deg);">
-
var one_image_w = $pxs_slider.find('img:first').width();
+
<a class="fancybox" rel="fncbx" href="img/original/4-green-beach.jpg" target="_blank">4-green-beach</a>
-
 
+
</div>
-
/*
+
<div id="pic-4" class="pic" style="top:248px;left:4px;background:url(img/thumbs/2-breast-stroke.jpg) no-repeat 50% 50%; -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg);">
-
set the width of the slider,
+
<a class="fancybox" rel="fncbx" href="img/original/2-breast-stroke.jpg" target="_blank">2-breast-stroke</a>
-
of each one of its elements, and of the
+
</div>
-
navigation buttons
+
<div id="pic-5" class="pic" style="top:140px;left:536px;background:url(img/thumbs/sands-of-life.jpg) no-repeat 50% 50%; -moz-transform:rotate(-17deg); -webkit-transform:rotate(-17deg);">
-
*/
+
<a class="fancybox" rel="fncbx" href="img/original/sands-of-life.jpg" target="_blank">sands-of-life</a>
-
setWidths($pxs_slider,
+
</div>
-
$elems,
+
<div id="pic-6" class="pic" style="top:180px;left:306px;background:url(img/thumbs/sahale-wa.jpg) no-repeat 50% 50%; -moz-transform:rotate(38deg); -webkit-transform:rotate(38deg);">
-
total_elems,
+
<a class="fancybox" rel="fncbx" href="img/original/sahale-wa.jpg" target="_blank">sahale-wa</a>
-
$pxs_bg1,
+
</div>
-
$pxs_bg2,
+
<div id="pic-7" class="pic" style="top:263px;left:274px;background:url(img/thumbs/bamboo.jpg) no-repeat 50% 50%; -moz-transform:rotate(28deg); -webkit-transform:rotate(28deg);">
-
$pxs_bg3,
+
<a class="fancybox" rel="fncbx" href="img/original/bamboo.jpg" target="_blank">bamboo</a>
-
one_image_w,
+
</div>
-
$pxs_next,
+
<div id="pic-8" class="pic" style="top:37px;left:207px;background:url(img/thumbs/1-california-surfing.jpg) no-repeat 50% 50%; -moz-transform:rotate(-12deg); -webkit-transform:rotate(-12deg);">
-
$pxs_prev);
+
<a class="fancybox" rel="fncbx" href="img/original/1-california-surfing.jpg" target="_blank">1-california-surfing</a>
-
 
+
</div>
-
/*
+
<div id="pic-9" class="pic" style="top:216px;left:55px;background:url(img/thumbs/farm.jpg) no-repeat 50% 50%; -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg);">
-
set the widths of the thumbs
+
<a class="fancybox" rel="fncbx" href="img/original/farm.jpg" target="_blank">farm</a>
-
and spread them evenly
+
</div>
-
*/
+
<div id="pic-10" class="pic" style="top:250px;left:414px;background:url(img/thumbs/spice.jpg) no-repeat 50% 50%; -moz-transform:rotate(-22deg); -webkit-transform:rotate(-22deg);">
-
$pxs_thumbnails.css({
+
<a class="fancybox" rel="fncbx" href="img/original/spice.jpg" target="_blank">spice</a>
-
'width' : one_image_w + 'px',
+
</div>
-
'margin-left' : -one_image_w/2 + 'px'
+
<div id="pic-11" class="pic" style="top:141px;left:41px;background:url(img/thumbs/sports-car.jpg) no-repeat 50% 50%; -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg);">
-
});
+
<a class="fancybox" rel="fncbx" href="img/original/sports-car.jpg" target="_blank">sports-car</a>
-
var spaces = one_image_w/(total_elems+1);
+
</div>
-
$thumbs.each(function(i){
+
<div id="pic-12" class="pic" style="top:138px;left:488px;background:url(img/thumbs/endurance.jpg) no-repeat 50% 50%; -moz-transform:rotate(9deg); -webkit-transform:rotate(9deg);">
-
var $this = $(this);
+
<a class="fancybox" rel="fncbx" href="img/original/endurance.jpg" target="_blank">endurance</a>
-
var left = spaces*(i+1) - $this.width()/2;
+
</div>
-
$this.css('left',left+'px');
+
<div id="pic-13" class="pic" style="top:69px;left:278px;background:url(img/thumbs/bahnhoff.jpg) no-repeat 50% 50%; -moz-transform:rotate(40deg); -webkit-transform:rotate(40deg);">
-
 
+
<a class="fancybox" rel="fncbx" href="img/original/bahnhoff.jpg" target="_blank">bahnhoff</a>
-
if(o.thumbRotation){
+
</div>
-
var angle = Math.floor(Math.random()*41)-20;
+
<div id="pic-14" class="pic" style="top:322px;left:144px;background:url(img/thumbs/blue-green-nature.jpg) no-repeat 50% 50%; -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg);">
-
$this.css({
+
<a class="fancybox" rel="fncbx" href="img/original/blue-green-nature.jpg" target="_blank">blue-green-nature</a>
-
'-moz-transform' : 'rotate('+ angle +'deg)',
+
</div>
-
'-webkit-transform' : 'rotate('+ angle +'deg)',
+
<div id="pic-15" class="pic" style="top:279px;left:295px;background:url(img/thumbs/tonemapped.jpg) no-repeat 50% 50%; -moz-transform:rotate(38deg); -webkit-transform:rotate(38deg);">
-
'transform' : 'rotate('+ angle +'deg)'
+
<a class="fancybox" rel="fncbx" href="img/original/tonemapped.jpg" target="_blank">tonemapped</a>
-
});
+
</div>
-
}
+
<div id="pic-16" class="pic" style="top:83px;left:466px;background:url(img/thumbs/whoooosh.jpg) no-repeat 50% 50%; -moz-transform:rotate(-7deg); -webkit-transform:rotate(-7deg);">
-
//hovering the thumbs animates them up and down
+
<a class="fancybox" rel="fncbx" href="img/original/whoooosh.jpg" target="_blank">whoooosh</a>
-
$this.bind('mouseenter',function(){
+
</div>    <div class="drop-box">
-
$(this).stop().animate({top:'-10px'},100);
+
    </div>
-
}).bind('mouseleave',function(){
+
   
-
$(this).stop().animate({top:'0px'},100);
+
</div>
-
});
+
   
-
});
+
<div class="clear"></div>
-
 
+
   
-
//make the first thumb to be selected
+
-
highlight($thumbs.eq(0));
+
-
 
+
-
//slide, when clicking the navigation buttons
+
</body>  
-
$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);
+
-
}
+
-
 
+
-
var highlight = function($elem){
+
-
$elem.siblings().removeClass('selected');
+
-
$elem.addClass('selected');
+
-
}
+
-
 
+
-
var setWidths = function($pxs_slider,
+
-
$elems,
+
-
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');
+
-
 
+
-
/*
+
-
both, the right and left of the
+
-
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>
+
</html>
</html>

Revision as of 16:08, 12 September 2011

An Awesome CSS3 Lightbox Gallery With jQuery | Tutorialzine demo