Difference between revisions of "Team:BostonU HW/Team"

Line 5: Line 5:
  
  
−
#people-carousel {
+
#myCarousel {
 
     border: 2px solid black;
 
     border: 2px solid black;
 
     padding: 0;
 
     padding: 0;
 
     margin-left: 28px;
 
     margin-left: 28px;
 
}
 
}
−
.mscarousel {
+
.carousel {
 
     overflow-x: hidden;
 
     overflow-x: hidden;
 
     overflow-y: hidden;
 
     overflow-y: hidden;
Line 20: Line 20:
 
}
 
}
  
−
#people-carousel .picture {
+
#myCarousel .picture {
 
     width: 334px;
 
     width: 334px;
 
     height: 500px;
 
     height: 500px;
Line 30: Line 30:
 
   }
 
   }
  
−
#people-carousel .texts {
+
#myCarousel .texts {
 
     width: 500px;
 
     width: 500px;
 
     height: 500px;
 
     height: 500px;
Line 52: Line 52:
  
  
−
<div id="people-carousel" class="mscarousel" style="width: 900px; height: 532px; overflow: hidden; position: relative;">
+
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width: 900px; height: 532px; overflow: hidden; position: relative;">
  
−
<div class="child" id="people-carousel_mscchild" style="width: 13500px; left: 0px;">
+
  <!-- Wrapper for slides -->
−
 
+
  <div class="carousel-inner" role="listbox">
−
<div class="person set people-carousel_mscss people-carouselmsc_0" id="rebecca">
+
    <div class="item active">
−
            <div class="picture">
+
      <div class="picture">
 
         <img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img="">   
 
         <img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img="">   
 
             </div>
 
             </div>
Line 70: Line 70:
 
         <!-- For texts -->
 
         <!-- For texts -->
 
       </div>
 
       </div>
−
      <!-- For person -->
 
 
     </div>
 
     </div>
  
−
<div class="person set people-carousel_mscss people-carouselmsc_1" id="priya">
+
    <div class="item">
−
            <div class="picture">
+
      <div class="picture">
 
         <img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img="">   
 
         <img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img="">   
 
             </div>
 
             </div>
Line 87: Line 86:
 
         <!-- For texts -->
 
         <!-- For texts -->
 
       </div>
 
       </div>
−
      <!-- For person -->
 
 
     </div>
 
     </div>
  
−
<div class="person set people-carousel_mscss people-carouselmsc_2" id="kestas">
+
    <div class="item">
−
            <div class="picture">
+
  <div class="picture">
 
         <img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img="">   
 
         <img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img="">   
 
             </div>
 
             </div>
Line 104: Line 102:
 
     <!-- For texts -->
 
     <!-- For texts -->
 
       </div>
 
       </div>
−
      <!-- For person -->
+
    </div>
−
        </div>
+
  
−
<div class="person set people-carousel_mscss people-carouselmsc_3" id="shane">
+
    <div class="item">
−
            <div class="picture">
+
      <div class="picture">
 
         <img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img="">   
 
         <img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img="">   
 
             </div>
 
             </div>
Line 123: Line 120:
 
         <!-- For texts -->
 
         <!-- For texts -->
 
       </div>
 
       </div>
−
      <!-- For person -->
 
 
     </div>
 
     </div>
 +
  </div>
  
−
<div class="person set people-carousel_mscss people-carouselmsc_4" id="zach">
+
   <!-- Left and right controls -->
−
            <div class="picture">
+
−
        <img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img="">    
+
−
            </div>
+
−
      <div class="texts">
+
−
        <h2>Zach Lasiuk</h2>
+
−
        <p><b>Function:</b> Person 5</p>
+
−
        <p><b>Major:</b> Electrical Engineering</p>
+
−
        <br>
+
−
        <p>
+
−
        Hello!
+
−
        </p>
+
−
        <!-- For text -->
+
−
      </div>
+
−
      <!-- For person -->
+
−
    </div>
+
−
<strong class="clear last"></strong>
+
−
<!-- For child -->
+
−
</div>
+
−
<!-- For carousel -->
+
−
</div>
+
−
 
+
−
<a class="left carousel-control" href="#people-carousel" role="button" data-slide="prev">
+
−
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+
−
    <span class="sr-only">Previous</span>
+
−
  </a>
+
−
  <a class="right carousel-control" href="#people-carousel" role="button" data-slide="next">
+
−
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+
−
    <span class="sr-only">Next</span>
+
−
  </a>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<script type="text/javascript">
+
−
$(document).ready(function() {
+
−
 
+
−
    var people = new Array();
+
−
 
+
−
    people['rebecca'] = 0;
+
−
    people['priya'] = 1;
+
−
    people['kestas'] = 2;
+
−
    people['shane'] = 3;
+
−
    people['zach'] = 4;
+
−
 
+
−
    mcarousel = $("#people-carousel").msCarousel({
+
−
        boxClass: 'div.person',
+
−
        height: 532,
+
−
        width: 900
+
−
    }).data("msCarousel");
+
−
 
+
−
    $("#next").click(function() {
+
−
        mcarousel.next();
+
−
    });
+
−
 
+
−
    $("#previous").click(function() {
+
−
        mcarousel.previous();
+
−
    });
+
−
 
+
−
    // $('area').click(function(event) {
+
−
    //    event.preventDefault();
+
−
    //    mcarousel.goto(people[$(event.target).attr('href')]);
+
−
    // });
+
−
 
+
−
    $('#people-carousel').hover(function() {
+
−
        $('#previous, #next').fadeIn();
+
−
    }, function() {
+
−
        $('#previous, #next').fadeOut();
+
−
    });
+
−
});
+
−
    </script>
+
−
 
+
  
 
</html>
 
</html>

Revision as of 17:47, 28 June 2016