|
|
| (51 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | {{Harvard/NavBar}} | | {{Harvard/NavBar}} |
| | | | |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | + | <html> |
| | | | |
| − | <style> | + | <body> |
| − | .img-circular{
| + | <div class="col-lg-16 col-centered"> |
| − | width: 300px;
| + | <center> |
| − | height: 300px;
| + | <img src="https://static.igem.org/mediawiki/2019/7/77/T--Harvard--TeamMemb.pdf" width="950"/> |
| − | margin: 0px 2em 2em 0px;
| + | <img src="https://static.igem.org/mediawiki/2019/9/97/T--Harvard--Tim.png" width="950"/> |
| − | display: block;
| + | </center> |
| − | border-radius: 50%;
| + | |
| − | border: 5px solid #ddd;
| + | |
| − | float:left;
| + | |
| − | }
| + | |
| − | .img-circular-small {
| + | |
| − | width: 140px;
| + | |
| − | height: 140px;
| + | |
| − | | + | |
| − | display: block;
| + | |
| − | border-radius: 50%;
| + | |
| − | border: 5px solid #ddd;
| + | |
| − | }
| + | |
| − | .wall1 {
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/3/3a/T--Harvard--MM.jpeg);
| + | |
| − | background-size: contain;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | }
| + | |
| − | .wall2 {
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2019/1/11/T--Harvard--RIheadshot.png);
| + | |
| − | background-size: contain;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | }
| + | |
| − | .wall3 {
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/8/87/T--Harvard--AH.jpeg);
| + | |
| − | background-size: contain;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | #a1 h1 {
| + | |
| − | font-family: 'Open Sans' !important;
| + | |
| − | color: #9d1c20 !important;
| + | |
| − | }
| + | |
| − | #a2 h1 {
| + | |
| − | font-family: 'Open Sans' !important;
| + | |
| − | color: #F8991D !important;
| + | |
| − | }
| + | |
| − | #a3 h1{
| + | |
| − | font-family: 'Open Sans' !important;
| + | |
| − | color: #009193 !important;
| + | |
| − | line-height: 70px !important;
| + | |
| − | }
| + | |
| − | #a4 h1 {
| + | |
| − | font-family: 'Open Sans' !important;
| + | |
| − | color: #009E73 !important;
| + | |
| − | }
| + | |
| − | #a5 h1 {
| + | |
| − | font-family: 'Open Sans' !important;
| + | |
| − | color: #ffd700 !important;
| + | |
| − | }
| + | |
| − | #a6 h1{
| + | |
| − | font-family: 'Open Sans' !important;
| + | |
| − | color: #005493 !important;
| + | |
| − | line-height: 70px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .slider {
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | padding-bottom: 50px;
| + | |
| − | height: auto;
| + | |
| − | transition: all .3s;
| + | |
| − | perspective: 900px;
| + | |
| − | transform-style: preserve-3d;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .slider .previous, .slider .next{
| + | |
| − | font-family: "FontAwesome";
| + | |
| − | font-size: 20px;
| + | |
| − | position: absolute;
| + | |
| − | top: 50%;
| + | |
| − | color: #2c2c2c;
| + | |
| − | padding: 20px;
| + | |
| − | text-decoration: none;
| + | |
| − | left: -100px;
| + | |
| − | margin-top: -34px;
| + | |
| − | transition: all .3s;
| + | |
| − | opacity: 0;
| + | |
| − | z-index: 10000;
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | .slider .next{
| + | |
| − | right: -100px;
| + | |
| − | content: "\f054";
| + | |
| − | left: auto;
| + | |
| − | }
| + | |
| − | .slider:hover .previous, .slider:hover .next{
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | .slider:hover .previous{
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | .slider:hover .next{
| + | |
| − | right: 0;
| + | |
| − | }
| + | |
| − | .slider .slides{
| + | |
| − | height: 100%;
| + | |
| − |
| + | |
| − | }
| + | |
| − | .slide{
| + | |
| − | text-align: center;
| + | |
| − | position: absolute;
| + | |
| − | transform: scale(0.5,0.5);
| + | |
| − | opacity: 0;
| + | |
| − | transition: all .3s;
| + | |
| − | padding: 50px;
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | .slide.active{
| + | |
| − | z-index: 10;
| + | |
| − | left: 0;
| + | |
| − | opacity: 1;
| + | |
| − | transform: scale(1,1);
| + | |
| − | }
| + | |
| − | .slider .bullets {
| + | |
| − | text-align: center;
| + | |
| − | position: absolute;
| + | |
| − | bottom: 0px;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | .slider .bullets .bullet{
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;
| + | |
| − | background: rgba(0, 0, 0,.8);
| + | |
| − | border-radius: 50%;
| + | |
| − | width: 8px;
| + | |
| − | height: 8px;
| + | |
| − | z-index: 14;
| + | |
| − | margin: 0 5px;
| + | |
| − | cursor: pointer;
| + | |
| − | border: 2px solid transparent;
| + | |
| − | transition: all .3s;
| + | |
| − | }
| + | |
| − | .slider .bullets .bullet.active{
| + | |
| − | background: rgba(0, 0, 0,.4);
| + | |
| − | }
| + | |
| − | .slider .bullets .bullet:hover{
| + | |
| − | border: 2px solid rgba(0, 0, 0,.8);
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | .arrows a {
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | .slider2{
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | padding-bottom: 50px;
| + | |
| − | height: auto;
| + | |
| − | transition: all .3s;
| + | |
| − | perspective: 900px;
| + | |
| − | transform-style: preserve-3d;
| + | |
| − | }
| + | |
| − | .slider2 .previous2, .slider2 .next2{
| + | |
| − | font-family: "FontAwesome";
| + | |
| − | font-size: 20px;
| + | |
| − | position: absolute;
| + | |
| − | top: 50%;
| + | |
| − | color: #2c2c2c;
| + | |
| − | padding: 20px;
| + | |
| − | text-decoration: none;
| + | |
| − | left: -100px;
| + | |
| − | margin-top: -34px;
| + | |
| − | transition: all .3s;
| + | |
| − | opacity: 0;
| + | |
| − | z-index: 10000;
| + | |
| − | }
| + | |
| − | .slider2 .next2{
| + | |
| − | right: -100px;
| + | |
| − | content: "\f054";
| + | |
| − | left: auto;
| + | |
| − | }
| + | |
| − | .slider2:hover .previous2, .slider2:hover .next2{
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | .slider2:hover .previous2{
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | .slider2:hover .next2{
| + | |
| − | right: 0;
| + | |
| − | }
| + | |
| − | .slider2 .slides2{
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | .slide2{
| + | |
| − | text-align: center;
| + | |
| − | position: absolute;
| + | |
| − | transform: scale(0.5,0.5);
| + | |
| − | opacity: 0;
| + | |
| − | transition: all .3s;
| + | |
| − | padding: 50px;
| + | |
| − | height: auto;
| + | |
| − | }
| + | |
| − | .slide2.active{
| + | |
| − | z-index: 10;
| + | |
| − | left: 0;
| + | |
| − | opacity: 1;
| + | |
| − | transform: scale(1,1);
| + | |
| − | }
| + | |
| − | .slider2 .bullets2{
| + | |
| − | text-align: center;
| + | |
| − | position: absolute;
| + | |
| − | bottom: 0px;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | .slider2 .bullets2 .bullet2{
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;
| + | |
| − | background: rgba(0, 0, 0,.8);
| + | |
| − | border-radius: 50%;
| + | |
| − | width: 8px;
| + | |
| − | height: 8px;
| + | |
| − | z-index: 14;
| + | |
| − | margin: 0 5px;
| + | |
| − | cursor: pointer;
| + | |
| − | border: 2px solid transparent;
| + | |
| − | transition: all .3s;
| + | |
| − | }
| + | |
| − | .slider2 .bullets2 .bullet2.active{
| + | |
| − | background: rgba(0, 0, 0,.4);
| + | |
| − | }
| + | |
| − | .slider2 .bullets2 .bullet2:hover{
| + | |
| − | border: 2px solid rgba(0, 0, 0,.8);
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | .arrows a {
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | .inner-slide {
| + | |
| − | -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
| + | |
| − | -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
| + | |
| − | box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);
| + | |
| − | padding: 20px;
| + | |
| − | min-height: 500px;
| + | |
| − |
| + | |
| − | }
| + | |
| − | .inner-slide > h1 {
| + | |
| − | line-height: 70px !important;
| + | |
| − | }
| + | |
| − | .member-text, .member-text > ul {
| + | |
| − | font-family: 'Open Sans' !important;
| + | |
| − | text-align: justify !important;
| + | |
| − | font-size: 20px !important;
| + | |
| − | font-weight: 300 !important;
| + | |
| − | }
| + | |
| − | .gallery-icon {
| + | |
| − | margin: 1em 1em 1em 1em;
| + | |
| − | }
| + | |
| − | .gallery-icon-2 {
| + | |
| − | margin: 1em 1em 1em 1em;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div style="background-color: white !important;">
| + | |
| − |
| + | |
| − | <div class="page-title" style="background-color: white !important; border-top: 5px solid #222;padding-bottom: 0px;">
| + | |
| − | <div class="container">
| + | |
| − | <div class="col-lg- 12 col- md-12 col-xs-12" style="padding-bottom: 0px !important;"> | + | |
| − | <div style="border-right: 5px solid #393939; margin-right: -20px; padding: 20px 20px 0px 20px">
| + | |
| − | <h2>Meet the Team</h2>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="container" style="position: relative; left: -10px; border-left: 5px solid #393939; border-top: 5px solid #393939 ;padding: 0 !important; margin-bottom: 20px;">
| + | |
| − | <div class="col-lg-12 col-md-12 col-xs-12 content" style="text-align: justify; text-color: #393939 !important; padding: 20px 5px 10px 20px !important; font-weight: bold !important; font-family: 'Open Sans' !important">
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div class="container" style="background-color: white !important">
| + | |
| − | | + | |
| − | <div class="row">
| + | |
| − | <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
| + | |
| − | <h1>Members</h1>
| + | |
| − | <div class="gallery" style="position: relative; padding: 60px; padding-top: 20px">
| + | |
| − | <div style="display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-content: center; justify-content: center; min-width: 380px;">
| + | |
| − | <div class="gallery-icon"><div class="wall1 img-circular-small"></div></div>
| + | |
| − | <div class="gallery-icon"><div class="wall2 img-circular-small"></div></div>
| + | |
| − | <div class="gallery-icon"><div class="wall3 img-circular-small"></div></div>
| + | |
| − | <div class="gallery-icon"><div class="wall4 img-circular-small"></div></div>
| + | |
| − | <div class="gallery-icon"><div class="wall5 img-circular-small"></div></div>
| + | |
| − | <div class="gallery-icon"><div class="wall6 img-circular-small"></div></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="row">
| + | |
| − | <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
| + | |
| − | <div class="slider">
| + | |
| − | <div class="arrows">
| + | |
| − | <a class="previous"></a>
| + | |
| − | <a class="next"></a>
| + | |
| − | </div>
| + | |
| − | <div class="slides">
| + | |
| − | <div class="slide active" id="a1">
| + | |
| − | <div class="inner-slide">
| + | |
| − | <h1>Patrick Dickinson</h1>
| + | |
| − | <div class="img-circular wall1"></div>
| + | |
| − | <div class="member-text">
| + | |
| − | Year: 2022
| + | |
| − | <br>Concentration: Applied Mathematics
| + | |
| − | <br>Patrick Dickinson is currently a Sophomore at Harvard College studying Applied Mathematics. His hometown is Dallas, Texas and he took a gap year sailing across the Atlantic Ocean after graduating high school in 2017. The HiGEM 2019 project is his first major self-directed biological research project, though he comes to the iGEM program with some prior lab experience. Outside of SynBio, his interests include Clarinet, Piano, Sailing, and Chess.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="slide" id="a2">
| + | |
| − | <div class="inner-slide">
| + | |
| − | <h1>Rahel Imru</h1>
| + | |
| − | <div class="img-circular wall2"></div>
| + | |
| − | <div class="member-text">
| + | |
| − | | + | |
| − | Year: 2021
| + | |
| − | <br> Concentration: Biomedical Engineering
| + | |
| − | <br>Secondary: Global Health and Public Policy
| + | |
| − | <br>Rahel Imru is a junior at Harvard studying Biomedical Engineering and Global Health and Health Policy, originally from South Florida. She was brought to the iGEM team because of her interest in using synthetic biology to tackle current challenges in medicine, while assessing the ethical implications that these genetically engineered solutions come with. Outside of the lab, she enjoys volunteering in the local community through diversity initiatives and tutoring, as well as dancing styles such as hip hop and Ethiopian traditional.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="slide" id="a3">
| + | |
| − | <div class="inner-slide">
| + | |
| − | <h1>Teagan Stedman</h1>
| + | |
| − | <div class="img-circular wall3"></div>
| + | |
| − | <div class="member-text">
| + | |
| − | | + | |
| − | Year: 2022
| + | |
| − | <br>Concentration: Bioengineering
| + | |
| − | <br> Teagan is a sophomore at Harvard studying Bioengineering, and is interested in using synthetic biology to treat disease, hoping to one day work on bacteria selectively colonizing tumors and delivering therapeutics. Before iGEM, he worked in the Silver Lab at Harvard Medical School on an engineered gut probiotic designed to kill foodborne pathogens, and in high school worked at UConn on rigging the motility and cell entry proteins of Listeria monocytogenes to liposomes to improve drug delivery within tumors. Outside the lab, he writes for Satire V, and loves running and comics. His aversion to jackets as a concept may explain his awkwardly sitting idle in the cold room to get away from the summer heat.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="bullets active"></div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="row">
| + | |
| − | <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
| + | |
| − | <h1 style="padding-top: 50px;">Supervisors</h1>
| + | |
| − | <div class="gallery" style="position: relative; padding: 60px;">
| + | |
| − | <div style="display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-content: center; justify-content: center; min-width: 380px;">
| + | |
| − | <div class="gallery-icon-2"><div class="wall11 img-circular-small"></div></div>
| + | |
| − | <div class="gallery-icon-2"><div class="wall12 img-circular-small"></div></div>
| + | |
| − | <div class="gallery-icon-2"><div class="wall13 img-circular-small"></div></div>
| + | |
| − | <div class="gallery-icon-2"><div class="wall14 img-circular-small"></div></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="row">
| + | |
| − | <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
| + | |
| − | <div class="slider2">
| + | |
| − | <div class="arrows">
| + | |
| − | <a class="previous2"></a>
| + | |
| − | <a class="next2"></a>
| + | |
| − | </div>
| + | |
| − | <div class="slides2">
| + | |
| − | <div class="slide2 active" id="a11">
| + | |
| − | <div class="inner-slide">
| + | |
| − | <h1>Neel Joshi</h1>
| + | |
| − | <div class="img-circular wall11"></div>
| + | |
| − | <div class="member-text">
| + | |
| − | Neel Joshi is an Associate Professor of Biological Engineering at the Harvard’s School of Engineering and Applied Sciences and also a Core Faculty member at the Wyss Institute for Biologically Inspired Engineering. He completed his PhD at UC Berkeley in the lab of Matt Francis and a postdoc at Boston University in the lab of Mark Grinstaff before starting a position at Harvard. He is broadly interested in topics related to biologically inspired materials, protein engineering, self-assembly, and biointerfaces. His group works at the intersection of biomaterials science and synthetic biology. Recent projects in the group have focused on repurposing bacterial biofilms and their matrix proteins for biotechnological and biomedical applications.
| + | |
| | | | |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="slide2" id="a12">
| |
| − | <div class="inner-slide">
| |
| − | <h1>Steve Dengelo</h1>
| |
| − | <div class="img-circular wall12"></div>
| |
| − | <div class="member-text">
| |
| − | Steve DeAngelo completed his BS in Biochemistry from Boston College in 2018 and is currently a Research Technician at the Dana Farber Cancer Institute in Boston, MA. He is interested in therapeutic discovery and translational medicine utilizing epigenetic therapies. Recent projects have focused on working towards novel mechanisms of targeting c-Myc and MLL in myeloid malignancies as well as developing and characterizing the mechanisms of IMiD-mediated targeted protein degradation
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="slide2" id="a13">
| |
| − | <div class="inner-slide">
| |
| − | <h1>Ezekiel Geffken</h1>
| |
| − | <div class="img-circular wall13"></div>
| |
| − | <div class="member-text">
| |
| − | Ezekiel Geffken has been a member of the Crystallography Core at Dana-Farber working to solve structures of oncogenic proteins and mapping their druggable domains. He received his B.S. in Biochemistry from Saint Michael’s College in Vermont, and is looking to enroll in MD,PhD programs in the near future. He loves being sideways.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="slide2" id="a14">
| |
| − | <div class="inner-slide">
| |
| − | <h1>Melissa Hancock</h1>
| |
| − | <div class="img-circular wall14"></div>
| |
| − | <div class="member-text">
| |
| − | Melissa Hancock is a member of the Active Learning Labs staff as a Biological Engineer at the Harvard John A. Paulson School of Engineering and Applied Sciences. She was an intergral member in assisting the Harvard iGEM Team with performing ELISA tests on their samples. Melissa likes to think outside the box (and upright circle)
| |
| | </div> | | </div> |
| | | | |
| − | <li></li>
| + | </body> |
| − | <li></li>
| + | |
| − | <li></li>
| + | |
| − | <li></li></ul>
| + | |
| | | | |
| − | <br/>
| |
| − | <br/>
| |
| − | <br/>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="bullets2 active"></div>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | var $slider = $(".slider"), $bullets = $(".bullets");
| |
| − |
| |
| − | function calculateHeight(){
| |
| − | var height = $(".slide.active").outerHeight();
| |
| − | $slider.height(height);
| |
| − | }
| |
| − |
| |
| − | $(window).resize(function() {
| |
| − | calculateHeight();
| |
| − | clearTimeout($.data(this, 'resizeTimer'));
| |
| − | });
| |
| − |
| |
| − | function resetSlides(){
| |
| − | $(".slide.inactive").removeClass("inactiveRight").removeClass("inactiveLeft");
| |
| − | }
| |
| − |
| |
| − | function gotoSlide($activeSlide, $slide, className){
| |
| − | $activeSlide.removeClass("active").addClass("inactive "+className);
| |
| − | $slide.removeClass("inactive").addClass("active");
| |
| − | calculateHeight();
| |
| − | resetBullets();
| |
| − | setTimeout(resetSlides, 300);
| |
| − | }
| |
| − |
| |
| − | $(".next").on("click", function(){
| |
| − | var $activeSlide = $(".slide.active"),
| |
| − | $nextSlide = $activeSlide.next(".slide").length != 0 ? $activeSlide.next(".slide") : $(".slide:first-child");
| |
| − | console.log($nextSlide);
| |
| − | gotoSlide($activeSlide, $nextSlide, "inactiveLeft");
| |
| − | });
| |
| − | $(".previous").on("click", function(){
| |
| − | var $activeSlide = $(".slide.active"),
| |
| − | $prevSlide = $activeSlide.prev(".slide").length != 0 ? $activeSlide.prev(".slide") : $(".slide:last-child");
| |
| − | console.log($prevSlide);
| |
| − | gotoSlide($activeSlide, $prevSlide, "inactiveRight");
| |
| − | });
| |
| − | $(".gallery-icon").on("click", function() {
| |
| − | var $activeSlide = $(".slide.active");
| |
| − | var get_div = "#a" + $(this).children().attr("class").split(" ")[0].substring(4, $(this).children().attr("class").split(" ")[0].length);
| |
| − | var $clickedSlide = $(get_div);
| |
| − | gotoSlide($activeSlide, $clickedSlide, 'nothing');
| |
| − |
| |
| − | })
| |
| − | $(document).on("click", ".bullet", function(){
| |
| − | if($(this).hasClass("active")){
| |
| − | return;
| |
| − | }
| |
| − | var $activeSlide = $(".slide.active");
| |
| − | var currentIndex = $activeSlide.index();
| |
| − | var targetIndex = $(this).index();
| |
| − | console.log(currentIndex, targetIndex);
| |
| − | var $theSlide = $(".slide:nth-child("+(targetIndex+1)+")");
| |
| − | gotoSlide($activeSlide, $theSlide, currentIndex > targetIndex ? "inactiveRight" : "inactiveLeft");
| |
| − | })
| |
| − | function addBullets(){
| |
| − | var total = $(".slide").length, index = $(".slide.active").index();
| |
| − | for (var i=0; i < total; i++){
| |
| − | var $bullet = $("<div>").addClass("bullet");
| |
| − | if(i==index){
| |
| − | $bullet.addClass("active");
| |
| − | }
| |
| − | $bullets.append($bullet);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function resetBullets(){
| |
| − | $(".bullet.active").removeClass("active");
| |
| − | var index = $(".slide.active").index()+1;
| |
| − | console.log(index);
| |
| − | $(".bullet:nth-child("+index+")").addClass("active");
| |
| − | }
| |
| − | addBullets();
| |
| − | calculateHeight();
| |
| − |
| |
| − | </script>
| |
| − | <script>
| |
| − | var $slider = $(".slider2"), $bullets = $(".bullets2");
| |
| − | function calculateHeight(){
| |
| − | var height = $(".slide2.active").outerHeight();
| |
| − | $slider.height(height);
| |
| − | }
| |
| − |
| |
| − | $(window).resize(function() {
| |
| − | calculateHeight();
| |
| − | clearTimeout($.data(this, 'resizeTimer'));
| |
| − | });
| |
| − |
| |
| − | function resetSlides(){
| |
| − | $(".slide2.inactive").removeClass("inactiveRight").removeClass("inactiveLeft");
| |
| − | }
| |
| − |
| |
| − | function gotoSlide($activeSlide, $slide, className){
| |
| − | $activeSlide.removeClass("active").addClass("inactive "+className);
| |
| − | $slide.removeClass("inactive").addClass("active");
| |
| − | calculateHeight();
| |
| − | resetBullets();
| |
| − | setTimeout(resetSlides, 300);
| |
| − | }
| |
| − |
| |
| − | $(".next2").on("click", function(){
| |
| − | var $activeSlide = $(".slide2.active"),
| |
| − | $nextSlide = $activeSlide.next(".slide2").length != 0 ? $activeSlide.next(".slide2") : $(".slide2:first-child");
| |
| − | console.log($nextSlide);
| |
| − | gotoSlide($activeSlide, $nextSlide, "inactiveLeft");
| |
| − | });
| |
| − | $(".previous2").on("click", function(){
| |
| − | var $activeSlide = $(".slide2.active"),
| |
| − | $prevSlide = $activeSlide.prev(".slide2").length != 0 ? $activeSlide.prev(".slide2") : $(".slide2:last-child");
| |
| − | console.log($prevSlide);
| |
| − | gotoSlide($activeSlide, $prevSlide, "inactiveRight");
| |
| − | });
| |
| − | $(".gallery-icon-2").on("click", function() {
| |
| − | var $activeSlide = $(".slide2.active");
| |
| − | console.log($(this).children().attr("class").split(" ")[0].substring(4, $(this).children().attr("class").split(" ")[0].length));
| |
| − | var get_div = "#a" + $(this).children().attr("class").split(" ")[0].substring(4, $(this).children().attr("class").split(" ")[0].length);
| |
| − | var $clickedSlide = $(get_div);
| |
| − | gotoSlide($activeSlide, $clickedSlide, 'nothing');
| |
| − |
| |
| − | })
| |
| − | $(document).on("click", ".bullet2", function(){
| |
| − | if($(this).hasClass("active")){
| |
| − | return;
| |
| − | }
| |
| − | var $activeSlide = $(".slide2.active");
| |
| − | var currentIndex = $activeSlide.index();
| |
| − | var targetIndex = $(this).index();
| |
| − | console.log(currentIndex, targetIndex);
| |
| − | var $theSlide = $(".slide2:nth-child("+(targetIndex+1)+")");
| |
| − | gotoSlide($activeSlide, $theSlide, currentIndex > targetIndex ? "inactiveRight" : "inactiveLeft");
| |
| − | })
| |
| − | function addBullets(){
| |
| − | var total = $(".slide2").length, index = $(".slide2.active").index();
| |
| − | for (var i=0; i < total; i++){
| |
| − | var $bullet = $("<div>").addClass("bullet2");
| |
| − | if(i==index){
| |
| − | $bullet.addClass("active");
| |
| − | }
| |
| − | $bullets.append($bullet);
| |
| − | }
| |
| − | }
| |
| − | function resetBullets(){
| |
| − | $(".bullet2.active").removeClass("active");
| |
| − | var index = $(".slide2.active").index()+1;
| |
| − | console.log(index);
| |
| − | $(".bullet2:nth-child("+index+")").addClass("active");
| |
| − | }
| |
| − | addBullets();
| |
| − | calculateHeight();
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | </div>
| |
| | </html> | | </html> |
| − |
| |
| | | | |
| | {{Harvard/Footer}} | | {{Harvard/Footer}} |
