Line 19: | Line 19: | ||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
+ | |||
+ | #people-carousel .picture { | ||
+ | width: 334px; | ||
+ | height: 500px; | ||
+ | border: 2px solid black; | ||
+ | float: left; | ||
+ | margin: 14px; | ||
+ | background-color: gray; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #people-carousel .texts { | ||
+ | width: 500px; | ||
+ | height: 500px; | ||
+ | float: left; | ||
+ | display: inline-block; | ||
+ | margin: 14px; | ||
+ | word-wrap: normal; | ||
+ | word-break: normal; | ||
+ | white-space: normal; | ||
+ | overflow: auto; | ||
+ | } | ||
+ | |||
+ | #people-carousel #previous { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 0; | ||
+ | margin-top: -32px; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/1/1e/Delft2014_lightbox_Controls.png) no-repeat top left; | ||
+ | width: 28px; | ||
+ | height: 65px; | ||
+ | text-indent: -9999px; | ||
+ | z-index: 100; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #people-carousel #next { | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | right: 0; | ||
+ | margin-top: -32px; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/1/1e/Delft2014_lightbox_Controls.png) no-repeat top right; | ||
+ | width: 28px; | ||
+ | height: 65px; | ||
+ | text-indent: -9999px; | ||
+ | z-index: 100; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
body { | body { | ||
Line 30: | Line 80: | ||
<div id="people-carousel" class="mscarousel" style="width: 900px; height: 532px; overflow: hidden; position: relative;"> | <div id="people-carousel" class="mscarousel" style="width: 900px; height: 532px; overflow: hidden; position: relative;"> | ||
<div id="previous"></div> | <div id="previous"></div> | ||
− | |||
− | |||
<div id="next"></div> | <div id="next"></div> | ||
− | + | ||
+ | <div class="child" id="people-carousel_mscchild" style="width: 13500px; left: 0px;"> | ||
<div class="person set people-carousel_mscss people-carouselmsc_0" id="rebecca"> | <div class="person set people-carousel_mscss people-carouselmsc_0" id="rebecca"> | ||
<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=""> | |
</div> | </div> | ||
<div class="texts"> | <div class="texts"> | ||
− | + | <h2>Rebecca Wolf</h2> | |
− | + | <p><b>Function:</b> Person 1</p> | |
− | + | <p><b>Majors:</b> Computer Engineering </p> | |
− | + | <br> | |
− | + | <p> | |
− | Hello! | + | Hello! |
− | + | </p> | |
− | + | <!-- For texts --> | |
− | + | </div> | |
+ | <!-- For person --> | ||
+ | </div> | ||
<div class="person set people-carousel_mscss people-carouselmsc_1" id="priya"> | <div class="person set people-carousel_mscss people-carouselmsc_1" id="priya"> | ||
<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=""> | |
</div> | </div> | ||
− | + | <div class="texts"> | |
− | + | <h2>Priya Kapadia</h2> | |
− | + | <p><b>Function:</b> Person 2</p> | |
− | + | <p><b>Major:</b> Computer Engineering</p> | |
− | + | <br> | |
− | + | <p> | |
− | Hello! | + | Hello! |
− | + | </p> | |
− | + | <!-- For texts --> | |
− | + | </div> | |
+ | <!-- For person --> | ||
+ | </div> | ||
+ | |||
+ | <div class="person set people-carousel_mscss people-carouselmsc_2" id="kestas"> | ||
<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=""> | |
</div> | </div> | ||
− | + | <div class="texts"> | |
− | + | <h2>Kestas</h2> | |
− | + | <p><b>Function:</b> Person 3</p> | |
− | + | <p><b>Major:</b> Computer Engineering and Biomedical Engineering</p> | |
<br> | <br> | ||
<p> | <p> | ||
− | Hello! | + | Hello! |
− | </p> | + | </p> |
− | + | <!-- For texts --> | |
− | </div><div class="person set people-carousel_mscss people-carouselmsc_3" id="shane"> | + | </div> |
+ | <!-- For person --> | ||
+ | </div> | ||
+ | |||
+ | <div class="person set people-carousel_mscss people-carouselmsc_3" id="shane"> | ||
<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=""> | |
</div> | </div> | ||
− | + | <div class="texts"> | |
− | + | <h2>Shane McCormack</h2> | |
− | + | <p><b>Function:</b> Person 4 </p> | |
− | + | <br> | |
<p> | <p> | ||
<p><b>Major:</b> Computer Engineering and Biomedical Engineering</p> | <p><b>Major:</b> Computer Engineering and Biomedical Engineering</p> | ||
<br> | <br> | ||
− | + | <p> | |
− | Hello! | + | Hello! |
− | </p> | + | </p> |
− | + | <!-- For texts --> | |
− | + | </div> | |
− | + | <!-- For person --> | |
+ | </div> | ||
+ | |||
+ | <div class="person set people-carousel_mscss people-carouselmsc_4" id="zach"> | ||
<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=""> | |
</div> | </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! | + | Hello! |
− | + | </p> | |
− | + | <!-- For text --> | |
− | + | </div> | |
− | <strong class="clear last"></strong></div></div> | + | <!-- For person --> |
+ | </div> | ||
+ | <strong class="clear last"></strong> | ||
+ | <!-- For child --> | ||
+ | </div> | ||
+ | <!-- For carousel --> | ||
+ | </div> | ||
Line 134: | Line 202: | ||
}); | }); | ||
− | $('area').click(function(event) { | + | // $('area').click(function(event) { |
− | + | // event.preventDefault(); | |
− | + | // mcarousel.goto(people[$(event.target).attr('href')]); | |
− | }); | + | // }); |
$('#people-carousel').hover(function() { | $('#people-carousel').hover(function() { |
Revision as of 14:36, 28 June 2016
Rebecca Wolf
Function: Person 1
Majors: Computer Engineering
Hello!
Priya Kapadia
Function: Person 2
Major: Computer Engineering
Hello!
Kestas
Function: Person 3
Major: Computer Engineering and Biomedical Engineering
Hello!
Shane McCormack
Function: Person 4
Major: Computer Engineering and Biomedical Engineering
Hello!
Zach Lasiuk
Function: Person 5
Major: Electrical Engineering
Hello!