Difference between revisions of "Team:UCL/Bactoman"

 
(29 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<head>
 
<head>
  
−
<style type="text/javascript">
+
<script type="text/JavaScript">
  
−
var counter = 0, // to keep track of current slide
+
var image = new Array("https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png", "https://static.igem.org/mediawiki/2015/9/92/UCLbactoman2.png",
−
    $items = $('.diy-slideshow figure'), // a collection of all of the slides, caching for performance
+
"https://static.igem.org/mediawiki/2015/a/af/Uclbactoman3.png", "https://static.igem.org/mediawiki/2015/f/fb/Uclbactoman4.png", "https://static.igem.org/mediawiki/2015/e/ee/Uclabctoman5.png", "https://static.igem.org/mediawiki/2015/2/25/Uclbactoman6.png", "https://static.igem.org/mediawiki/2015/5/5b/Uclbactoman7.png", "https://static.igem.org/mediawiki/2015/0/03/Uclbactoman8.png", "https://static.igem.org/mediawiki/2015/a/aa/Uclbactoman9.png", "https://static.igem.org/mediawiki/2015/0/02/Uclbactoman10.png", "https://static.igem.org/mediawiki/2015/2/23/Uclbactoman11.png", "https://static.igem.org/mediawiki/2015/8/8e/Uclbactoman12.png", "https://static.igem.org/mediawiki/2015/d/dc/Uclbactoman13.png", "https://static.igem.org/mediawiki/2015/8/8c/Uclbactoman14.png", "https://static.igem.org/mediawiki/2015/9/9a/Uclbactoman15.png", "https://static.igem.org/mediawiki/2015/f/f7/Uclbactoman16.png", "https://static.igem.org/mediawiki/2015/f/fc/Uclbactoman17.png", "https://static.igem.org/mediawiki/2015/9/9c/Uclbactoman18.png", "https://static.igem.org/mediawiki/2015/4/4a/Uclbactoman19.png", "https://static.igem.org/mediawiki/2015/8/83/Uclbactoman20.png", "https://static.igem.org/mediawiki/2015/1/1a/Uclbactoman21.png", "https://static.igem.org/mediawiki/2015/d/df/Uclbactoman22.png", "https://static.igem.org/mediawiki/2015/c/cb/Uclbactomanlast.png")
−
    numItems = $items.length; // total number of slides
+
var imgNumber=1
 +
var numberOfImg = image.length
  
−
// this function is what cycles the slides, showing the next or previous slide and hiding all the others
 
−
var showCurrent = function(){
 
−
    var itemToShow = Math.abs(counter%numItems);// uses remainder (aka modulo) operator to get the actual index of the element to show 
 
−
 
 
−
  $items.removeClass('show'); // remove .show from whichever element currently has it
 
−
  $items.eq(itemToShow).addClass('show');   
 
−
};
 
  
−
// add click events to prev & next buttons
+
function previousImage(){
−
$('.next').on('click', function(){
+
  if(imgNumber > 1){
−
    counter++;
+
     imgNumber--
−
    showCurrent();
+
−
});
+
−
$('.prev').on('click', function(){
+
−
    counter--;
+
−
    showCurrent();
+
−
});
+
−
 
+
−
// if touch events are supported then add swipe interactions using TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
+
−
if('ontouchstart' in window){
+
−
  $('.diy-slideshow').swipe({
+
−
     swipeLeft:function() {
+
−
      counter++;
+
−
      showCurrent();
+
−
    },
+
−
    swipeRight:function() {
+
−
      counter--;
+
−
      showCurrent();
+
 
     }
 
     }
−
   });
+
   else{
 +
  imgNumber = numberOfImg
 
}
 
}
 +
 +
  document.slideImage.src = image[imgNumber-1]
 +
    }
 +
 +
function nextImage(){
 +
  if(imgNumber < numberOfImg){
 +
    imgNumber++
 +
    }
 +
 +
  else{
 +
  imgNumber = 1
 +
}
 +
  document.slideImage.src = image[imgNumber-1]
 +
  }
 +
 
 +
if(document.images){
 +
  var image1 = new Image()
 +
  image1.src = "https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png"
 +
  var image2 = new Image()
 +
  image2.src = "https://static.igem.org/mediawiki/2015/9/92/UCLbactoman2.png"
 +
  var image3 = new Image()
 +
  image3.src = "https://static.igem.org/mediawiki/2015/a/af/Uclbactoman3.png"
 +
  var image4 = new Image()
 +
  image4.src = "https://static.igem.org/mediawiki/2015/f/fb/Uclbactoman4.png"
 +
  var image5 = new Image()
 +
  image5.src = "https://static.igem.org/mediawiki/2015/e/ee/Uclabctoman5.png"
 +
  var image6 = new Image()
 +
  image6.src = "https://static.igem.org/mediawiki/2015/2/25/Uclbactoman6.png"
 +
  var image7 = new Image()
 +
  image7.src = "https://static.igem.org/mediawiki/2015/5/5b/Uclbactoman7.png"
 +
  var image8 = new Image()
 +
  image8.src = "https://static.igem.org/mediawiki/2015/0/03/Uclbactoman8.png"
 +
 +
  }
 +
 
 +
 +
 
</script>
 
</script>
  
Line 134: Line 149:
 
{
 
{
 
content: "";
 
content: "";
−
    background-image: url('https://static.igem.org/mediawiki/2015/e/e7/UCL_MG_6312_2.png');
+
background: #000;
−
    -webkit-filter:blur(2px);
+
−
  -moz-filter: blur(2px);
+
−
  -o-filter: blur(2px);
+
−
  -ms-filter: blur(2px);
+
−
  filter: blur(2px);
+
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
   background-attachment: fixed !important;
 
   background-attachment: fixed !important;
Line 149: Line 159:
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
box-sizing: border-box;
 
box-sizing: border-box;
−
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 1200, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 
 
     position: absolute;
 
     position: absolute;
 
     top: 0px;
 
     top: 0px;
Line 163: Line 172:
  
 
#mobilebackground {
 
#mobilebackground {
−
  background-image: url('https://static.igem.org/mediawiki/2015/e/e7/UCL_MG_6312_2.png');
+
background: #000;
−
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
+
−
 
+
 
     top: 0;
 
     top: 0;
 
     right: 0;
 
     right: 0;
Line 179: Line 186:
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
box-sizing: border-box;
 
box-sizing: border-box;
−
display: none;
+
display: block;
 
width: 100%;
 
width: 100%;
 
  height: 100%;
 
  height: 100%;
Line 274: Line 281:
  
  
−
@media(max-width:1152px){
 
−
 
−
.bigtitle {font-size: 14px;}
 
−
.bigtitle {width: 52%;}
 
−
.titlecircle {width: 80%;}
 
−
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 
−
.buttonblack {padding: 5px 8px;}
 
−
}
 
  
  
Line 411: Line 410:
 
padding: 50px;
 
padding: 50px;
 
margin-top: 50px;
 
margin-top: 50px;
−
font-size: 18px;
+
font-size: 14px;
 
letter-spacing: 2px;
 
letter-spacing: 2px;
 +
border-radius: 10px;
 
}
 
}
  
−
 
+
#wrapperbacto img {width: 95%;}
−
.diy-slideshow{
+
−
  position: relative;
+
−
  display: block;
+
−
  overflow: hidden;
+
−
}
+
−
figure{
+
−
  position: absolute;
+
−
  opacity: 0;
+
−
  transition: 1s opacity;
+
−
}
+
−
figcaption{
+
−
  position: absolute;
+
−
  font-family: sans-serif;
+
−
  font-size: .8em;
+
−
  bottom: .75em;
+
−
  right: .35em;
+
−
  padding: .25em;
+
−
  color: #fff;
+
−
  background: rgba(0,0,0, .25);
+
−
  border-radius: 2px;
+
−
}
+
−
figcaption a{
+
−
  color: #fff;
+
−
}
+
−
figure.show{
+
−
  opacity: 1;
+
−
  position: static;
+
−
  transition: 1s opacity;
+
−
}
+
−
.next, .prev{
+
−
  color: #fff;
+
−
  position: absolute;
+
−
  background: rgba(0,0,0, .6);
+
−
  top: 50%;
+
−
  z-index: 1;
+
−
  font-size: 2em;
+
−
  margin-top: -.75em;
+
−
  opacity: .3;
+
−
  user-select: none;
+
−
}
+
−
.next:hover, .prev:hover{
+
−
  cursor: pointer;
+
−
  opacity: 1;
+
−
}
+
−
.next{
+
−
  right: 0;
+
−
  padding: 10px 5px 15px 10px;
+
−
  border-top-left-radius: 3px;
+
−
  border-bottom-left-radius: 3px;
+
−
}
+
−
.prev{
+
−
  left: 0;
+
−
  padding: 10px 10px 15px 5px;
+
−
  border-top-right-radius: 3px;
+
−
  border-bottom-right-radius: 3px;
+
−
}
+
−
 
+
−
 
+
  
 
</style>
 
</style>
Line 486: Line 428:
  
  
 +
<center>
 +
<span class="title2">Bactoman</span></center><br/>
 +
<p>
 +
Bactoman is a comic aimed to introduce our project to a younger audience. Set in a dystopian future where the mentally ill are excommunicated and abandoned by the society, Nathan Navaro takes the mantle of Bactoman to challenge the broken society. Bactoman utilises synthetic biology to help people with mental disorders!<br/><br/><br/>
  
 +
</p>
 +
<p></p>
 +
<p style="text-align: center; font-weight: bold;"><a href="JavaScript:previousImage()">Previous</a> &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="JavaScript:nextImage()">Next</a></p>
 +
</p>
 
<p>
 
<p>
−
Bactoman is a comic aimed to introduce our project to a younger audience. Set in a dystopian future where the mentally ill are excommunicated and abandoned by the society, Nathan Navaro takes the mantle of Bactoman to challenge the broken society. Bactoman utilises synthetic biology to help people with mental disorders!
+
<img src="https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png" name="slideImage"></p>
−
</p>
+
  
 +
<p style="text-align: center; font-weight: bold;"><a href="JavaScript:previousImage()">Previous</a> &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <a href="JavaScript:nextImage()">Next</a></p>
  
  
−
<div class="diy-slideshow">
 
−
    <figure class="show">
 
−
        <img name="https://static.igem.org/mediawiki/2015/8/8d/UCLbactoman1.png" width="100%" /><figcaption></figcaption>
 
−
    </figure>
 
−
  <figure>
 
−
    <img src="http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg" width="100%" /><figcaption>"Starlight" by <a href="http://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption>
 
−
    </figure>
 
−
    <figure>
 
−
        <img src="http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="http://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption>
 
−
    </figure>
 
−
  <figure>
 
−
        <img src="http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg" width="100%" /><figcaption>"Misty winter afternoon" by <a href="http://www.flickr.com/photos/22746515@N02/5277611659/">Bert Kaufmann</a>.</figcaption>
 
−
    </figure>
 
−
  <figure>
 
−
        <img src="http://themarklee.com/wp-content/uploads/2013/12/good-morning.jpg" width="100%" /><figcaption>"Good Morning!" by <a href="http://www.flickr.com/photos/frank_wuestefeld/4306107546/">Frank Wuestefeld</a>.</figcaption>
 
−
    </figure>
 
−
  <figure>
 
−
        <img src="http://themarklee.com/wp-content/uploads/2013/12/driving-home-for-christmas.jpg" width="100%" /><figcaption>"Driving home for Christmas" by <a href="http://www.flickr.com/photos/22746515@N02/5292186041/">Bert Kaufmann</a>.</figcaption>
 
−
    </figure>
 
−
  <span class="prev">&laquo;</span>
 
−
  <span class="next">&raquo;</span>
 
−
</div> 
 
  
 +
 +
<br/>
  
  
−
<div style="width: 90%; margin: auto;">
 
 
</div>
 
</div>
  
−
 
+
<br/><br/>
−
 
+
−
 
+
 
</div>
 
</div>
  
Line 529: Line 456:
 
</div>
 
</div>
  
−
 
−
</div>
 
  
 
</div> </div>
 
</div> </div>

Latest revision as of 21:13, 31 October 2015

'

Bactoman

Bactoman is a comic aimed to introduce our project to a younger audience. Set in a dystopian future where the mentally ill are excommunicated and abandoned by the society, Nathan Navaro takes the mantle of Bactoman to challenge the broken society. Bactoman utilises synthetic biology to help people with mental disorders!


Previous                 Next

Previous                 Next