Team:Amsterdam/Sandbox

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<html>  
-
<style type="text/css">
+
-
<!--
+
<link rel="stylesheet" type="text/css" href="" />
 +
<style type="text/css">
 +
/*
 +
GALLERY FOTO EFFETTO POLAROID CON
 +
ROTAZIONE ED ANIMAZIONE
-
/**
+
Creata da Enrico Deleo
 +
www.lysergicstudio.com
 +
www.enricodeleo.com
 +
www.erriko.it
-
* Slideshow style rules.
+
LICENZA: rilasciato sotto Creative Commons 3.0 BY-NC
-
*/
+
*/
-
#slideshow {
+
/*************************/
-
 
+
/******* RESET CSS *******/
-
margin:0 auto;
+
/*************************/
-
 
+
-
width:640px;
+
-
 
+
-
background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
+
-
 
+
-
position:relative;
+
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, sup, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td,
 +
article, aside, canvas, details, embed,
 +
figure, figcaption, footer, header, hgroup,
 +
menu, nav, output, ruby, section, summary,
 +
time, mark, audio, video {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
}
}
-
 
+
/* HTML5 display-role reset for older browsers */
-
#slideshow #slidesContainer {
+
article, aside, details, figcaption, figure,
-
 
+
footer, header, hgroup, menu, nav, section {
-
  margin:0 auto;
+
display: block;
-
 
+
-
  width:560px;
+
-
 
+
-
 
+
-
  overflow:auto; /* allow scrollbar */
+
-
 
+
-
  position:relative;
+
-
 
+
}
}
-
 
+
body {
-
#slideshow #slidesContainer .slide {
+
line-height: 1;
-
 
+
-
  margin:0 auto;
+
-
 
+
-
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
+
-
 
+
-
 
+
}
}
-
 
+
ol, ul {
-
 
+
list-style: none;
-
 
+
-
/**
+
-
 
+
-
* Slideshow controls style rules.
+
-
 
+
-
*/
+
-
 
+
-
.control {
+
-
 
+
-
  display:block;
+
-
 
+
-
  width:39px;
+
-
 
+
-
  height:263px;
+
-
 
+
-
  text-indent:-10000px;
+
-
 
+
-
  position:absolute;
+
-
 
+
-
  cursor: pointer;
+
-
 
+
}
}
-
 
+
blockquote, q {
-
#leftControl {
+
quotes: none;
-
 
+
-
  top:0;
+
-
 
+
-
  left:0;
+
-
 
+
-
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
+
-
 
+
}
}
-
 
+
blockquote:before, blockquote:after,
-
#rightControl {
+
q:before, q:after {
-
 
+
content: '';
-
  top:0;
+
content: none;
-
 
+
-
  right:0;
+
-
 
+
-
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
+
-
 
+
}
}
-
 
+
table {
-
 
+
border-collapse: collapse;
-
 
+
border-spacing: 0;
-
/**
+
-
 
+
-
* Style rules for Demo page
+
-
 
+
-
*/
+
-
 
+
-
* {
+
-
 
+
-
  margin:0;
+
-
 
+
-
  padding:0;
+
-
 
+
-
  font:normal 11px Verdana, Geneva, sans-serif;
+
-
 
+
-
 
+
-
 
+
}
}
-
a {
+
body{
-
 
+
width:100%;
-
  color: #fff;
+
height: 100%;
-
 
+
background: #e2e2e2 url(images/bg.jpg) top left repeat;
-
  font-weight:bold;
+
font-family: Georgia, serif;
-
 
+
-
  text-decoration:none;
+
-
 
+
}
}
-
a:hover {
+
#contenuto{
-
 
+
width:778px;
-
  text-decoration:underline;
+
display: block;
-
 
+
margin: 50px auto;
}
}
-
a img {border:2px solid #ccc;}
+
.polaroid{
-
 
+
width:150px;
-
body {
+
background-color: #fff;
-
 
+
border: 1px solid #c2c2c2;
-
  background:#393737 url(img/bg_body.jpg) repeat-x top left;
+
-
 
+
/* CSS3 box shadow */
 +
-moz-box-shadow:0 0 20px #292929;
 +
-webkit-box-shadow:2px 5px 8px #292929;
 +
box-shadow:2px 5px 8px #292929;
 +
/* fine box shadow */
 +
 +
padding: 10px 10px 50px 10px;
 +
margin-right: 30px;
 +
float: left;
 +
position: relative;
 +
 +
/* setto la trasformazione per i vari browser che lo supportano*/
 +
-webkit-transition: all 0.5s ease-in-out;
 +
    -moz-transition: all 0.5s ease-in-out;
 +
    -o-transition: all 0.5s ease-in-out;
}
}
-
#pageContainer {
+
.polaroid:last-child{
-
 
+
margin-right: 0 !important;
-
  margin:0 auto;
+
-
 
+
-
  width:960px;
+
-
 
+
}
}
-
#pageContainer h1 {
+
.polaroid img{
-
 
+
border: 1px solid #222;
-
  display:block;
+
background: #000;
-
 
+
width: 150px;
-
  width:960px;
+
height: 150px;
-
 
+
-
  height:114px;
+
-
 
+
-
  background:transparent url(img/bg_pagecontainer_h1.jpg) no-repeat top left;
+
-
 
+
-
  text-indent: -10000px;
+
-
 
+
}
}
-
.slide h2, .slide p {
+
.polaroid span{
-
 
+
position: absolute;
-
  margin:15px;
+
bottom: 20px;
-
 
+
left: 10px;
 +
font-style: italic;
}
}
-
.slide h2 {
+
.polaroid:hover{
-
 
+
/* ruoto il box di 8 gradi a sx */
-
  font:italic 24px Georgia, "Times New Roman", Times, serif;
+
-webkit-transform: rotate(-8deg);
-
 
+
-moz-transform: rotate(-8deg);
-
  color:#ccc;
+
transform: rotate(-8deg);
-
 
+
-
  letter-spacing:-1px;
+
-
 
+
}
}
-
 
+
h1 {  
-
.slide img {
+
font-size: 40px;
-
 
+
width: 100%;
-
 
+
text-align: right;
-
}
+
font-family: 'Annie Use Your Telescope', arial, serif;
-
 
+
color: #333;
-
#footer {
+
}
-
 
+
-
  height:100px;
+
h2 {
-
 
+
font-size: 20px;
-
}
+
width: 100%;
-
 
+
padding-bottom: 20px;
-
#footer p {
+
text-align: right;
-
 
+
font-family: 'Annie Use Your Telescope', arial, serif;
-
  margin:30px auto 0 auto;
+
color: #333;
-
 
+
}
-
  display:block;
+
-
 
+
a{
-
  width:560px;
+
color: #333;
-
 
+
font-weight: bold;
-
  height:40px;
+
text-decoration: none;
-
 
+
}
-
}
+
-
 
+
a#comeback{
-
-->
+
font-family: Arial, sans-serif;
-
 
+
font-size: 30px;
-
</style>
+
position: absolute;
-
 
+
bottom: 30px;
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+
left: 20px;
-
 
+
color: #888;
-
<script type="text/javascript">
+
text-shadow: 1px 1px 0px #fff;
-
 
+
}
-
$(document).ready(function(){
+
-
 
+
a#comeback:hover{
-
  var currentPosition = 0;
+
color: #333;
-
 
+
text-shadow: 1px 1px 0px #fff;
-
  var slideWidth = 560;
+
}
-
 
+
-
  var slides = $('.slide');
+
</style>
-
 
+
</head>  
-
  var numberOfSlides = slides.length;
+
<body>  
-
 
+
<div id="contenuto">  
-
 
+
<div class="polaroid"><img src="https://static.igem.org/mediawiki/2011/5/53/Jantine2%2C0.jpg" /><span>Jantine Broek</span></div>  
-
 
+
<div class="polaroid"><img src="https://static.igem.org/mediawiki/2011/f/ff/Paul2%2C0.jpg" /><span>Paul van Dieken</span></div>  
-
  // Remove scrollbar in JS
+
<div class="polaroid"><img src="https://static.igem.org/mediawiki/2011/3/3b/Isoude2%2C0.jpg" /><span>Isoude Kuijper</span></div>  
-
 
+
<div class="polaroid"><img src="https://static.igem.org/mediawiki/2011/2/25/Jorick2%2C0.jpg" /><span>Jorick Mul</span></div>  
-
  $('#slidesContainer').css('overflow', 'hidden');
+
</div>
-
 
+
<div style="clear:both;"></div>  
-
 
+
</body>  
-
 
+
-
  // Wrap all .slides with #slideInner div
+
-
 
+
-
  slides
+
-
 
+
-
    .wrapAll('<div id="slideInner"></div>')
+
-
 
+
-
    // Float left to display horizontally, readjust .slides width
+
-
 
+
-
.css({
+
-
 
+
-
      'float' : 'left',
+
-
 
+
-
      'width' : slideWidth
+
-
 
+
-
    });
+
-
 
+
-
 
+
-
 
+
-
  // Set #slideInner width equal to total width of all slides
+
-
 
+
-
  $('#slideInner').css('width', slideWidth * numberOfSlides);
+
-
 
+
-
 
+
-
 
+
-
  // Insert controls in the DOM
+
-
 
+
-
  $('#slideshow')
+
-
 
+
-
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
+
-
 
+
-
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
+
-
 
+
-
 
+
-
 
+
-
  // Hide left arrow control on first load
+
-
 
+
-
  manageControls(currentPosition);
+
-
 
+
-
 
+
-
 
+
-
  // Create event listeners for .controls clicks
+
-
 
+
-
  $('.control')
+
-
 
+
-
    .bind('click', function(){
+
-
 
+
-
    // Determine new position
+
-
 
+
-
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
+
-
 
+
-
   
+
-
 
+
-
// Hide / show controls
+
-
 
+
-
    manageControls(currentPosition);
+
-
 
+
-
    // Move slideInner using margin-left
+
-
 
+
-
    $('#slideInner').animate({
+
-
 
+
-
      'marginLeft' : slideWidth*(-currentPosition)
+
-
 
+
-
    });
+
-
 
+
-
  });
+
-
 
+
-
 
+
-
 
+
-
  // manageControls: Hides and Shows controls depending on currentPosition
+
-
 
+
-
  function manageControls(position){
+
-
 
+
-
    // Hide left arrow if position is first slide
+
-
 
+
-
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
+
-
 
+
-
// Hide right arrow if position is last slide
+
-
 
+
-
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
+
-
 
+
-
  }
+
-
 
+
-
});
+
-
 
+
-
</script>
+
-
 
+
-
 
+
-
<body>
+
-
 
+
-
<div id="pageContainer">
+
-
 
+
-
 
+
-
  <!-- Slideshow HTML -->
+
-
 
+
-
  <div id="slideshow">
+
-
 
+
-
    <div id="slidesContainer">
+
-
 
+
-
      <div class="slide">
+
-
<img src = "https://static.igem.org/mediawiki/2011/d/dc/P1130190.jpg">
+
-
      </div>
+
-
 
+
-
      <div class="slide">
+
-
<img src = "https://static.igem.org/mediawiki/2011/9/9a/P1130193.jpg">
+
-
      </div>
+
-
 
+
-
      <div class="slide">
+
-
<img src = "https://static.igem.org/mediawiki/2011/4/45/P1130194.jpg">
+
-
      </div>
+
-
 
+
-
    </div>
+
-
 
+
-
  </div>
+
-
 
+
-
  <!-- Slideshow HTML -->
+
-
 
+
-
 
+
-
</div>
+
-
 
+
-
</body>
+
-
 
+
</html>
</html>

Revision as of 09:09, 9 September 2011

Jantine Broek
Paul van Dieken
Isoude Kuijper
Jorick Mul

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