Difference between revisions of "Template:BUHW2016"

 
(85 intermediate revisions by 2 users not shown)
Line 3: Line 3:
  
 
<head>
 
<head>
 +
 +
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  
 
<!-- Latest compiled and minified CSS -->
 
<!-- Latest compiled and minified CSS -->
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 +
 +
 +
<script type="text/javascript">
 +
$(function () {
 +
    $("#myModal").modal({show:false});
 +
}); 
 +
</script>
 +
 +
 +
 +
 +
  
 
</head>
 
</head>
 +
 +
 +
  
  
Line 14: Line 31:
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
  
#sideMenu, #top_title {display:none;}
+
#sideMenu, #top_title {display:none;}
 
#content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
 
#content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
 +
 +
 +
  
 
/*!
 
/*!
Line 24: Line 46:
 
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 
  */
 
  */
 +
 +
 +
  
 
/* Global Styles */
 
/* Global Styles */
  
 
* {
 
* {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
+
    font-family: 'Open Sans', Open-Sans, sans-serif, 'Helvetica Neue', Arial, sans-serif;
 
+
 
}
 
}
 +
  
 
html,
 
html,
 
body {
 
body {
 
     width: 100%;
 
     width: 100%;
     height: 100%;
+
      
 
}
 
}
  
 +
 +
/*
 
body {
 
body {
     font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
+
     font-family: 'Open Sans', sans-serif, "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
 
}
 
}
 +
*/
 +
 +
  
 
.text-vertical-center {
 
.text-vertical-center {
Line 47: Line 77:
 
     padding-top: 30px;
 
     padding-top: 30px;
 
}
 
}
 +
 +
 +
 +
 +
  
 
.text-vertical-center h1 {
 
.text-vertical-center h1 {
     margin: 0;
+
     margin: 15px;
     padding: 0;
+
     padding: 30px;
 
     font-size: 4.5em;
 
     font-size: 4.5em;
 
     font-weight: 700;
 
     font-weight: 700;
 
font-color: white;
 
font-color: white;
 
}
 
}
 +
  
 
/* Custom Button Styles */
 
/* Custom Button Styles */
  
.btn-dark {
 
    border-radius: 0;
 
    color: #ffffff;
 
    background-color: rgba(0,0,0,0.4);
 
}
 
 
.btn-dark:hover,
 
.btn-dark:focus,
 
.btn-dark:active {
 
    border-radius: 0;
 
    color: #ffffff;
 
    background-color: rgba(0,0,0,0.7);
 
}
 
  
 
.btn-light {
 
.btn-light {
Line 84: Line 107:
 
     background-color: rgba(255,255,255,0.8);
 
     background-color: rgba(255,255,255,0.8);
 
}
 
}
 
  
 
/* Custom Horizontal Rule */
 
/* Custom Horizontal Rule */
Line 94: Line 116:
 
}
 
}
  
/* Side Menu */
+
hr.medium {
 
+
     max-width: 245px;
#sidebar-wrapper {
+
     margin: auto;
     z-index: 1000;
+
    position: fixed;
+
    right: 0;
+
    width: 250px;
+
    height: 100%;
+
     margin-right: -250px;
+
    overflow-y: auto;
+
    background: #222;
+
    -webkit-transition: all 0.4s ease 0s;
+
    -moz-transition: all 0.4s ease 0s;
+
    -ms-transition: all 0.4s ease 0s;
+
    -o-transition: all 0.4s ease 0s;
+
    transition: all 0.4s ease 0s;
+
 
}
 
}
  
.sidebar-nav {
 
    position: absolute;
 
    top: 0;
 
    width: 250px;
 
    margin: 0;
 
    padding: 0;
 
    list-style: none;
 
}
 
  
.sidebar-nav li {
 
    text-indent: 20px;
 
    line-height: 40px;
 
}
 
  
.sidebar-nav li a {
 
    display: block;
 
    text-decoration: none;
 
    color: #999;
 
}
 
  
.sidebar-nav li a:hover {
 
    text-decoration: none;
 
    color: #fff;
 
    background: rgba(255,255,255,0.2);
 
}
 
 
.sidebar-nav li a:active,
 
.sidebar-nav li a:focus {
 
    text-decoration: none;
 
}
 
 
.sidebar-nav > .sidebar-brand {
 
    height: 55px;
 
    font-size: 18px;
 
    line-height: 55px;
 
}
 
 
.sidebar-nav > .sidebar-brand a {
 
    color: #999;
 
}
 
 
.sidebar-nav > .sidebar-brand a:hover {
 
    color: #fff;
 
    background: none;
 
}
 
 
 
 
#sidebar-wrapper.active {
 
    right: 250px;
 
    width: 250px;
 
    -webkit-transition: all 0.4s ease 0s;
 
    -moz-transition: all 0.4s ease 0s;
 
    -ms-transition: all 0.4s ease 0s;
 
    -o-transition: all 0.4s ease 0s;
 
    transition: all 0.4s ease 0s;
 
}
 
 
.toggle {
 
    margin: 5px 5px 0 0;
 
}
 
  
 
/* Header */
 
/* Header */
Line 183: Line 134:
 
     background: url('https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png') no-repeat center center scroll;
 
     background: url('https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png') no-repeat center center scroll;
 
     background-size: 100% 100%;
 
     background-size: 100% 100%;
}
 
 
/* About */
 
  
.about {
 
    padding: 50px 0;
 
 
}
 
}
  
/* Services */
 
  
.services {
 
    padding: 50px 0;
 
}
 
  
.service-item {
 
    margin-bottom: 30px;
 
}
 
  
/* Callout */
 
  
.callout {
 
    display: table;
 
    width: 100%;
 
    height: 400px;
 
    color: #fff;
 
    background: url(../img/callout.jpg) no-repeat center center scroll;
 
    -webkit-background-size: cover;
 
    -moz-background-size: cover;
 
    background-size: cover;
 
    -o-background-size: cover;
 
}
 
  
/* Portfolio */
 
  
.portfolio {
 
    padding: 50px 0;
 
}
 
  
.portfolio-item {
 
    margin-bottom: 30px;
 
}
 
  
.img-portfolio {
 
    margin: 0 auto;
 
}
 
  
.img-portfolio:hover {
 
    opacity: 0.8;
 
}
 
  
/* Call to Action */
 
  
.call-to-action {
 
    padding: 50px 0;
 
}
 
  
.call-to-action .btn {
 
    margin: 10px;
 
}
 
  
/* Map */
 
  
.map {
 
    height: 500px;
 
}
 
 
 
@media(max-width:768px) {
 
    .map {
 
        height: 75%;
 
    }
 
}
 
 
/* Footer */
 
 
footer {
 
    padding: 100px 0;
 
}
 
  
  
Line 266: Line 156:
  
 
.navbar-default {
 
.navbar-default {
  background-color: white;
+
    background-color: white;
  border-color: rgba(34, 34, 34, 0.05);
+
    border-color: rgba(34, 34, 34, 0.05);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+
    font-family: OpenSans, 'Helvetica Neue', Arial, sans-serif;
  -webkit-transition: all 0.35s;
+
    -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
+
    -moz-transition: all 0.35s;
  transition: all 0.35s;
+
    transition: all 0.35s;
 
}
 
}
 +
 
.navbar-default .navbar-header .navbar-brand {
 
.navbar-default .navbar-header .navbar-brand {
  color: #f05f40;
+
    color:#222222;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+
    font-family: 'Open Sans', sans-serif, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
+
    font-weight: 700;
  text-transform: uppercase;
+
    text-transform: uppercase;
 
}
 
}
 +
 
.navbar-default .navbar-header .navbar-brand:hover,
 
.navbar-default .navbar-header .navbar-brand:hover,
 
.navbar-default .navbar-header .navbar-brand:focus {
 
.navbar-default .navbar-header .navbar-brand:focus {
  color: #eb3812;
+
    color: #222222;
 
}
 
}
 +
 
.navbar-default .nav > li > a,
 
.navbar-default .nav > li > a,
 
.navbar-default .nav > li > a:focus {
 
.navbar-default .nav > li > a:focus {
  text-transform: uppercase;
+
    text-transform: uppercase;
  font-weight: 700;
+
    font-weight: 700;
  font-size: 13px;
+
    font-size: 13px;
  color: #222222;
+
    color: #222222;
 
}
 
}
 +
 
.navbar-default .nav > li > a:hover,
 
.navbar-default .nav > li > a:hover,
 
.navbar-default .nav > li > a:focus:hover {
 
.navbar-default .nav > li > a:focus:hover {
  color: #f05f40;
+
    color: #c0392b;
 
}
 
}
 +
 
.navbar-default .nav > li.active > a,
 
.navbar-default .nav > li.active > a,
 
.navbar-default .nav > li.active > a:focus {
 
.navbar-default .nav > li.active > a:focus {
  color: #f05f40 !important;
+
    color: #222222 !important;
  background-color: transparent;
+
    background-color: transparent;
 
}
 
}
 +
 
.navbar-default .nav > li.active > a:hover,
 
.navbar-default .nav > li.active > a:hover,
 
.navbar-default .nav > li.active > a:focus:hover {
 
.navbar-default .nav > li.active > a:focus:hover {
  background-color: transparent;
+
    background-color: transparent;
 
}
 
}
 +
 
@media (min-width: 768px) {
 
@media (min-width: 768px) {
 
   .navbar-default {
 
   .navbar-default {
    background-color: transparent;
+
      background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
+
      border-color: rgba(255, 255, 255, 0.3);
 
   }
 
   }
 
   .navbar-default .navbar-header .navbar-brand {
 
   .navbar-default .navbar-header .navbar-brand {
    color: rgba(255, 255, 255, 0.7);
+
      color: rgba(255, 255, 255, 0.7);
 
   }
 
   }
 
   .navbar-default .navbar-header .navbar-brand:hover,
 
   .navbar-default .navbar-header .navbar-brand:hover,
 
   .navbar-default .navbar-header .navbar-brand:focus {
 
   .navbar-default .navbar-header .navbar-brand:focus {
    color: white;
+
      color: white;
 
   }
 
   }
 
   .navbar-default .nav > li > a,
 
   .navbar-default .nav > li > a,
 
   .navbar-default .nav > li > a:focus {
 
   .navbar-default .nav > li > a:focus {
    color: rgba(255, 255, 255, 0.7);
+
      color: rgba(255, 255, 255, 0.7);
 
   }
 
   }
 
   .navbar-default .nav > li > a:hover,
 
   .navbar-default .nav > li > a:hover,
 
   .navbar-default .nav > li > a:focus:hover {
 
   .navbar-default .nav > li > a:focus:hover {
    color: white;
+
      color: white;
 
   }
 
   }
 
   .navbar-default.affix {
 
   .navbar-default.affix {
    background-color: white;
+
      background-color: white;
    border-color: rgba(34, 34, 34, 0.05);
+
      border-color: rgba(34, 34, 34, 0.05);
 
   }
 
   }
 
   .navbar-default.affix .navbar-header .navbar-brand {
 
   .navbar-default.affix .navbar-header .navbar-brand {
    color: #f05f40;
+
      color: #222222;
    font-size: 14px;
+
      font-size: 18px;
 
   }
 
   }
 
   .navbar-default.affix .navbar-header .navbar-brand:hover,
 
   .navbar-default.affix .navbar-header .navbar-brand:hover,
 
   .navbar-default.affix .navbar-header .navbar-brand:focus {
 
   .navbar-default.affix .navbar-header .navbar-brand:focus {
    color: #eb3812;
+
      color: #222222;
 
   }
 
   }
 
   .navbar-default.affix .nav > li > a,
 
   .navbar-default.affix .nav > li > a,
 
   .navbar-default.affix .nav > li > a:focus {
 
   .navbar-default.affix .nav > li > a:focus {
    color: #222222;
+
      color: #222222;
 
   }
 
   }
 
   .navbar-default.affix .nav > li > a:hover,
 
   .navbar-default.affix .nav > li > a:hover,
 
   .navbar-default.affix .nav > li > a:focus:hover {
 
   .navbar-default.affix .nav > li > a:focus:hover {
    color: #f05f40;
+
      color: #222222;
 
   }
 
   }
 
}
 
}
 
#mainNav {
 
#mainNav {
margin-top:15px;
+
  margin-top:15px;
background: black;
+
  transition:background-color .52s ease
 
}
 
}
 +
 +
 +
ul.nav li.dropdown:hover > ul.dropdown-menu {
 +
    display: block;   
 +
}
 +
 +
 +
 +
section {
 +
 +
padding-bottom: 70px;
 +
 +
}
 +
  
  
Line 356: Line 267:
  
 
<body>
 
<body>
 +
  
  
 
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
 
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
+
    <div class="container-fluid">
 
             <!-- Brand and toggle get grouped for better mobile display -->
 
             <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
+
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
+
                <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
                </button>
+
            </button>
                <a class="navbar-brand page-scroll" href="#page-top">BU HW 2016</a>
+
            <a class="navbar-brand page-scroll" href="https://2016.igem.org/Team:BostonU_HW">BU HW 2016</a>
            </div>
+
        </div>
 +
       
 +
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
            <ul class="nav navbar-nav navbar-right">
  
            <!-- Collect the nav links, forms, and other content for toggling -->
+
                <li class="dropdown">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team <span class="caret"></span></a>
                <ul class="nav navbar-nav navbar-right">
+
                    <ul class="dropdown-menu">
                    <li>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Team">Us</a></li>
                         <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Team">Team</a>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Collaborations">Collaborations</a></li>
                    </li>
+
                    </ul>
                    <li>
+
                </li>
                         <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Description">Project</a>
+
 
                     </li>
+
                <li class="dropdown">
                    <li>
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
                        <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Notebook">Notebook</a>
+
                    <ul class="dropdown-menu">
                    </li>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Description">Overview</a></li>
                    <li>
+
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Results">Results</a></li>
                        <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Safety">Safety</a>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate">Project Build</a></li>
                     </li>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Proof">Application</a></li>
                    <li>
+
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Design">Documentation</a></li>
                        <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Attributions">Attributions</a>
+
                        <li role="separator" class="divider"></li>
                    </li>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Attributions">Attributions</a></li>
                    <li>
+
                     </ul>
                         <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Human_Practices">Human Practices</a>
+
                </li>
                    </li>
+
 
                     <li>
+
                <li class="dropdown">
                        <a class="page-scroll" href="#awards">Awards</a>
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notebook <span class="caret"></span></a>
                     </li>
+
                    <ul class="dropdown-menu">
                </ul>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Notebook">Timeline</a></li>
            </div>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Experiments">Experiments</a></li>
             <!-- /.navbar-collapse -->
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Safety">Safety</a></li>
 +
                     </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human Practices <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Human_Practices">Overview</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/HP/Silver">Silver</a></li>
 +
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/HP/Gold">Gold</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Integrated_Practices">Integrated Practices</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Engagement">Engagement</a></li>
 +
                     </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Awards <span class="caret"></span></a>
 +
                     <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Hardware">Hardware</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Software">Software</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Entrepreneurship">Entrepreneurship</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Measurement">Measurement</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Model">Model</a></li>
 +
                    </ul>
 +
                </li>
 +
             </ul>
 
         </div>
 
         </div>
 +
            <!-- /.navbar-collapse -->
 +
    </div>
 
         <!-- /.container-fluid -->
 
         <!-- /.container-fluid -->
    </nav>
+
</nav>
  
   
 
  
  
  <!-- Latest compiled and minified JavaScript -->
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 
  
  
 +
 +
 +
 
  
 
      
 
      
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
 
<script src="jquery.fittext.js"></script>
+
  <!-- Latest compiled and minified JavaScript -->
<script>
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  jQuery("#responsive_headline").fitText();
+
 
</script>
+
 
  
  
Line 429: Line 369:
 
  * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 
  * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 
  */
 
  */
 +
  
 
(function($) {
 
(function($) {
 
     "use strict"; // Start of use strict
 
     "use strict"; // Start of use strict
  
    // jQuery for page scrolling feature - requires jQuery Easing plugin
 
    $('a.page-scroll').bind('click', function(event) {
 
        var $anchor = $(this);
 
        $('html, body').stop().animate({
 
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
 
        }, 1250, 'easeInOutExpo');
 
        event.preventDefault();
 
    });
 
 
    // Highlight the top nav as scrolling occurs
 
    $('body').scrollspy({
 
        target: '.navbar-fixed-top',
 
        offset: 51
 
    })
 
 
    // Closes the Responsive Menu on Menu Item Click
 
    $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
 
        $('.navbar-toggle:visible').click();
 
    });
 
 
    // Fit Text Plugin for Main Header
 
    $("h1").fitText(
 
        1.2, {
 
            minFontSize: '35px',
 
            maxFontSize: '65px'
 
        }
 
    );
 
  
 
     // Offset for Main Navigation
 
     // Offset for Main Navigation
Line 467: Line 381:
 
         }
 
         }
 
     })
 
     })
 +
})(jQuery); // End of use strict
  
    // Initialize and Configure Scroll Reveal Animation
 
    window.sr = ScrollReveal();
 
    sr.reveal('.sr-icons', {
 
        duration: 600,
 
        scale: 0.3,
 
        distance: '0px'
 
    }, 200);
 
    sr.reveal('.sr-button', {
 
        duration: 1000,
 
        delay: 200
 
    });
 
    sr.reveal('.sr-contact', {
 
        duration: 600,
 
        scale: 0.3,
 
        distance: '0px'
 
    }, 300);
 
  
    // Initialize and Configure Magnific Popup Lightbox Plugin
+
</script>
    $('.popup-gallery').magnificPopup({
+
        delegate: 'a',
+
        type: 'image',
+
        tLoading: 'Loading image #%curr%...',
+
        mainClass: 'mfp-img-mobile',
+
        gallery: {
+
            enabled: true,
+
            navigateByImgClick: true,
+
            preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
+
        },
+
        image: {
+
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
+
        }
+
    });
+
  
})(jQuery); // End of use strict
 
  
  
</script>
 
  
  
  
 
</body>
 
</body>
 +
 +
 +
  
  
  
 
</html>
 
</html>

Latest revision as of 20:40, 11 July 2016