Team:Hong Kong-CUHK/team.html

From 2014.igem.org

(Difference between revisions)
(Created page with "<style type="text/css"> #board { background-image: url('images/board.png'); background-size: 100% 100%; width: 700px; height: 700px; } .chess { background-siz...")
m (add slide box)
Line 58: Line 58:
}
}
</style>
</style>
 +
 +
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 +
  <!-- Indicators -->
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 +
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 +
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 +
  </ol>
 +
 +
  <!-- Wrapper for slides -->
 +
  <div class="carousel-inner">
 +
    <div class="item active">
 +
      <img src="..." alt="...">
 +
      <div class="carousel-caption">
 +
        <h3>1</h3>
 +
<p>123</p>
 +
      </div>
 +
    </div>
 +
    <div class="item">
 +
      <img src="..." alt="...">
 +
      <div class="carousel-caption">
 +
        <h3>2</h3>
 +
<p>234</p>
 +
      </div>
 +
    </div>
 +
<div class="item">
 +
      <img src="..." alt="...">
 +
      <div class="carousel-caption">
 +
        <h3>3</h3>
 +
<p>345</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 +
  <!-- Controls -->
 +
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 +
    <span class="glyphicon glyphicon-chevron-left"></span>
 +
  </a>
 +
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 +
    <span class="glyphicon glyphicon-chevron-right"></span>
 +
  </a>
 +
</div>
<div class="row">
<div class="row">

Revision as of 00:52, 17 October 2014

<style type="text/css">

  1. board { 
   background-image: url('images/board.png');
   background-size: 100% 100%;
   width: 700px;
   height: 700px;

} .chess { 

   background-size: 100% 100%;
   width: 40px;
   height: 40px;
   position: absolute;
   cursor: pointer;

} .profile-pic { 

   background-size: 100% 100%;
   width: 100px;
   height: 100px;
   position: absolute;
   cursor: pointer;

} .profile-dialog { 

   width: 300px;
   height: 300px;
   position: absolute;
   display: none;

} .member-wrapper:hover > .profile-dialog { 

   display: block;

} .photo { 

   width: 83px;
   height: 250px;
   background-position: center;
   background-size: auto 100%;
   background-repeat: no-repeat;
   -webkit-filter: grayscale(80%);
   margin: 0;

} .photo:hover { 

   -webkit-filter: grayscale(0%);

} .photo.show { 

   width: 250px;
   height: 250px;
   -webkit-filter: grayscale(0%);

} .member-name { 

   text-transform: uppercase;
   margin: 0;

} .member-role { 

   font-style: italic;

} .member-about { 

   text-align: justify;
   text-justify: distribute;

} </style>

<script type="text/javascript"> var content = { 

   members: [{
       info: {
           name: "Lily",
           about: "Hi! I'm Lily majoring in Computer Science. It is lucky that I have a chance to work as a team in iGEM. I enjoy creating new things with knowledge. That's why I love computer-related work as well as synthetic biology in the same time. Hope you like the wiki.",
           chessColor: "red",
       },
       offset: {
           top: 104,
           left: 333
       },
       profilePic: {
           background: "0px 0px/100% 100% url('http://placehold.it/300x300')",
           offset: {
               top: 0,
               left: -100
           }
       },
       dialog: {
           background: "#ff0000",
           offset: {
               top: 0,
               left: 100
           }
       }
   }]

};

$(document).ready(function() { 

   $.each(content.members, function(index, value) {
var wrapper = $('
') 
           .addClass('member-wrapper')
           .css('position', 'relative')
           .offset(value.offset);
var dialog = $('
') 
           .addClass('profile-dialog')
           .css('font-size', '18')
           .css('background', value.dialog.background)
           .text(value.info.about)
           .offset(value.dialog.offset);
var profile_pic = $('
') 
           .addClass('profile-pic')
           .data("index", index)
           .css('background', value.profilePic.background)
           .offset(value.profilePic.offset);
var chess = $('
') 
           .addClass('chess')
           .data("index", index)
           .css('background-image', 'url(images/chess/chess_' + value.info.chessColor + '.png)');

       wrapper.append(chess);
       wrapper.append(profile_pic);
       wrapper.append(dialog);
       $("#board").append(wrapper);
   });

}); </script>

Retrieved from "http://2014.igem.org/Team:Hong_Kong-CUHK/team.html"