Difference between revisions of "Team:UCL/Bactoman"

Line 3: Line 3:
 
<html>
 
<html>
 
<head>
 
<head>
 +
 +
<style type="text/javascript">
 +
 +
var counter = 0, // to keep track of current slide
 +
    $items = $('.diy-slideshow figure'), // a collection of all of the slides, caching for performance
 +
    numItems = $items.length; // total number of slides
 +
 +
// 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
 +
$('.next').on('click', function(){
 +
    counter++;
 +
    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();
 +
    }
 +
  });
 +
}
 +
</script>
 +
  
 
<script>
 
<script>
Line 374: Line 414:
 
letter-spacing: 2px;
 
letter-spacing: 2px;
 
}
 
}
 +
 +
 +
.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 388: Line 488:
  
 
<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
+
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!
 
</p>
 
</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> 
 +
 +
 +
 +
<div style="width: 90%; margin: auto;">
 +
</div>
  
  

Revision as of 20:21, 31 October 2015

'

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!

"Starlight" by ChaoticMind75.
"Snowstorm" by Beaulawrence.
"Misty winter afternoon" by Bert Kaufmann.
"Good Morning!" by Frank Wuestefeld.
"Driving home for Christmas" by Bert Kaufmann.
« »