Difference between revisions of "Template:BUHW2016"

 
(83 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 46: 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 92: 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-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 142: 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;
 
}
 
  
  
.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;
 
}
 
  
  
/* 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 158:
 
     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;
Line 273: Line 165:
  
 
.navbar-default .navbar-header .navbar-brand {
 
.navbar-default .navbar-header .navbar-brand {
     color: #c0392b;
+
     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;
Line 281: Line 173:
 
.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: #c0392b;
+
     color: #222222;
 
}
 
}
  
Line 299: Line 191:
 
.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: #c0392b !important;
+
     color: #222222 !important;
 
     background-color: transparent;
 
     background-color: transparent;
 
}
 
}
Line 333: Line 225:
 
   }
 
   }
 
   .navbar-default.affix .navbar-header .navbar-brand {
 
   .navbar-default.affix .navbar-header .navbar-brand {
       color: #c0392b;
+
       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: #c0392b;
+
       color: #222222;
 
   }
 
   }
 
   .navbar-default.affix .nav > li > a,
 
   .navbar-default.affix .nav > li > a,
Line 346: Line 238:
 
   .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: #c0392b;
+
       color: #222222;
 
   }
 
   }
 
}
 
}
Line 355: Line 247:
  
  
 +
ul.nav li.dropdown:hover > ul.dropdown-menu {
 +
    display: block;   
 +
}
 +
 +
 +
 +
section {
 +
 +
padding-bottom: 70px;
 +
 +
}
  
  
Line 364: Line 267:
  
 
<body>
 
<body>
 +
  
  
Line 376: Line 280:
 
                 <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>
 
          
 
          
Line 395: Line 299:
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Description">Overview</a></li>
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Description">Overview</a></li>
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Results">Results</a></li>
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Results">Results</a></li>
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate">Project Fabrication</a></li>
+
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate">Project Build</a></li>
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Proof">Application</a></li>
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Proof">Application</a></li>
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Design">Documentation</a></li>
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Design">Documentation</a></li>
Line 430: Line 334:
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Model">Model</a></li>
 
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Model">Model</a></li>
 
                     </ul>
 
                     </ul>
                </li>
 
                <li>
 
                    <a class="page-scroll" href="#awards">Awards</a>
 
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
Line 446: Line 347:
  
  
 
 
    <!-- Header -->
 
<header id="top" class="header">
 
    <div class="text-vertical-center" style="color: white;">
 
        <h1></br> Fluigi</h1>
 
        <h3><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></h3>
 
        <h3>Boston University iGem Special Track 2016: Hardware</h3>
 
        <h3>Fluigi is a tool used to specify, design, and build a microfluidic device.</h3>
 
    </div>
 
</header>
 
 
 
<section id="description" class="services bg-primary">
 
    <div class="container">
 
        <div class="row text-center">
 
            <div class="col-lg-10 col-lg-offset-1">
 
                <h2>Project Description</h2>
 
                <hr class="small">
 
                <div class="row">
 
                    <div align="left">
 
                        <div class="service-item" >
 
                          <span class="fa-stack fa-4x" >
 
                              <i class="fa fa-circle fa-stack-2x" ></i>
 
                              <i class="fa fa-cloud fa-stack-1x text-primary"></i>
 
                          </span>
 
</br>
 
Fluigi is an end-to-end specify, design, and build workflow for the development of continuous flow microfluidics. With Fluigi, users can specify microfluidic devices through a high level description of liquid flow relations. Our application will automatically place and route the design schematic of the microfluidic, and our application is compatible with low cost and readily available CAD tools that will build the final microfluidic device.
 
</br> </br>
 
The Boston University 2016 iGem Hardware Team is completing this workflow by providing a front end user interface that allows simple and intuitive navigation of the application. This user interface encapsulates the whole of the workflow: users can write files that specify the function of the microfluidic. Users can then preview and edit their microfluidic design that was placed by the application. Users can use this application directly with CAD tools such as a CNC mill to fabricate their device. Finally, our application provides the ability to physically control valves and ports on the microfluidic chip through the user interface. The iGem team is also complementing this workflow by developing and releasing open source designs of our hardware, including parametric 3D print files, and firmware for microcontrollers that actuate the microfluidic valves. Finally, the iGem team is also involved in the development of the place and route software that converts a high level description of liquid flow relations into a microfluidic netlist that can that be converted into a design schematic.
 
 
                        </div>
 
                    </div>
 
                </div>           
 
            </div>                     
 
        </div>
 
    <!-- /.row (nested) -->
 
    </div>
 
<!-- /.col-lg-10 -->
 
</div>
 
 
<!-- /.row -->
 
</div>
 
<!-- /.container -->
 
</section>
 
 
 
<div id="uses" class="col-lg-10 col-lg-offset-1">
 
    <h2 align="center"> Where can we use Microfluidics? </h2>
 
    <br>
 
    - Synthetic Biology:
 
    <a href="http://pubs.rsc.org/en/content/articlepdf/2014/lc/c4lc00509k"> 'Lab on a Chip', 2014</a>
 
    </br>
 
    - Experiments to monitor precise control of the number and concentration of input:
 
    <a href="http://stke.sciencemag.org/content/5/213/ra17.full"> 'Diverse Sensitivity Thresholds in Dynamic Signaling  Response by Social Amoebae', 2012</a>
 
    </br>
 
    - Single-cell tracking:
 
    <a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC4836382"> 'Microfluidics for Synthetic Biology: From Design to Execution'</a>
 
    </br>
 
    - Microchemostat for environmental control:
 
    <a href="http://science.sciencemag.org/content/309/5731/137.full">'Long-Term Monitoring of Bacteria Undergoing Programmed Population Control in a Microchemostat', 2005</a>
 
    <br>
 
</div>
 
</div>
 
</div>
 
 
 
 
 
 
 
<div class="container">
 
    <div class="row">         
 
        <div class="col-lg-10 col-lg-offset-1 text-center">
 
        </br>
 
        </div>
 
    </div>
 
</div>
 
 
<!-- Services -->
 
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
 
<section id="flow" class="services bg-primary">
 
    <div class="container">
 
        <div class="row text-center">
 
            <div class="col-lg-10 col-lg-offset-1">
 
                <h2>Our Tool</h2>
 
                <hr class="small">
 
                <div class="row">
 
                    <div class="col-md-4 ">
 
                        <div class="service-item">
 
                            <span class="fa-stack fa-4x">
 
                                <i class="fa fa-circle fa-stack-2x"></i>
 
                                <i class="fa fa-cloud fa-stack-1x text-primary"></i>
 
                            </span>
 
                                <h3>Specify</h3>
 
                                <h4></br>
 
                                    <p>Let's start by defining what the inputs and outputs are to your microfluidic chip! Are there any limitations in terms of port size, channel width? Fluigi will best place and route the layers in your chip. </p>
 
                                    <p>iGem Work: The mapper (MM) tool within the place and routing functionality. Click the button below to learn more about our MM tool. </p>
 
                                    </br>
 
                                    <a href="#" class="btn btn-light">Learn More </a> 
 
                                </h4>         
 
                        </div>
 
                    </div>
 
                    <div class="col-md-4">
 
                        <div class="service-item">
 
                            <span class="fa-stack fa-4x">
 
                                <i class="fa fa-circle fa-stack-2x"></i>
 
                                <i class="fa fa-compass fa-stack-1x text-primary"></i>
 
                            </span>
 
                            <h3>Design</h3>
 
                            <h4></br>
 
                                <p>Check and visualize your device layout using the Fluigi graphical user interface. </p>
 
                                <p> This graphical user interface also allows you to edit your design and control the fluids in the microfluidic chip. The interface has been made completely by the iGEM Team</p>
 
                                <br/>
 
                                <a href="#" class="btn btn-light">Learn More </a>
 
                            </h4>
 
                        </div>
 
                    </div>
 
                    <div class="col-md-4">
 
                        <div class="service-item">
 
                            <span class="fa-stack fa-4x">
 
                                <i class="fa fa-circle fa-stack-2x"></i>
 
                                <i class="fa fa-flask fa-stack-1x text-primary"></i>
 
                            </span>
 
                            <h3>Build</h3>
 
                            <h4></br>
 
                                <p>Ready to make your chip? Import our design files into a 3D Printer and CNC mill to make the chip and the pump setup! You can also make/change the setup using our parameterized designs.</p>
 
                                <p> The design of the setup is BU iGEM work, whilst the chip manufacturing is the work of our mentors. </p>
 
                                </br>
 
                                <a href="#" class="btn btn-light">Learn More</a>
 
                            </h4>
 
                        </div>
 
                    </div>
 
                     
 
                </div>
 
                <!-- /.row (nested) -->
 
            </div>
 
            <!-- /.col-lg-10 -->
 
        </div>
 
        <!-- /.row -->
 
    </div>
 
    <!-- /.container -->
 
</section>
 
 
    <!-- Portfolio -->
 
    <section id="work" class="portfolio">
 
        <div class="container">
 
            <div class="row">
 
                <div class="col-lg-10 col-lg-offset-1 text-center">
 
                    <h2>Our Work</h2>
 
                    <hr class="small">
 
                    <div class="row">
 
                        <div class="col-md-6">
 
                           
 
 
                        </div>
 
                        <div class="col-md-6">
 
                           
 
 
 
                        </div>
 
                        <div class="col-md-6">
 
                         
 
 
 
                        </div>
 
                        <div class="col-md-6">
 
                           
 
 
                        </div>
 
                    </div>
 
                    <!-- /.row (nested) -->
 
                </div>
 
                <!-- /.col-lg-10 -->
 
            </div>
 
            <!-- /.row -->
 
        </div>
 
        <!-- /.container -->
 
    </section>
 
  
 
    
 
    
  
 
      
 
      
 
    <!-- Footer -->
 
    <footer id="contact">
 
        <div class="container">
 
            <div class="row">
 
             
 
<div class="col-lg-10 col-lg-offset-1 text-center">
 
                    <h2>Contact Us</h2>
 
                    <ul>
 
<div class="col-md-6 col-lg-offset-1">
 
<img src= "https://static.igem.org/mediawiki/2016/2/25/ValenciaUPV_twitterLogo.png" height="50px">
 
                      <a href="http://twitter.com/iGemHWBU">Twitter </a> 
 
</div>
 
<div class="col-md-2">
 
<img src= "https://static.igem.org/mediawiki/2016/2/2c/ValenciaUPV_mailLogo.png" height="50px">
 
                      <a href="mailto:bu.igemhw2016@gmail.com"> Email</a>
 
</div>
 
                      <br/><br/><br/>
 
                    </ul>
 
                    <hr class="small">
 
                    <p class="text-muted">Copyright &copy; Boston University Hardware Team Website 2016</p>
 
    </div>
 
</div>
 
        </div>
 
    </footer>
 
  
 
   <!-- Latest compiled and minified JavaScript -->
 
   <!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 
 
  
  
Line 674: 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();
 
    });
 
 
    // Closes the Responsive Menu on Menu Item Click
 
    $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
 
        $('.navbar-toggle:visible').click();
 
    });
 
 
 
 
  
 
     // Offset for Main Navigation
 
     // Offset for Main Navigation
Line 700: 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>
 
  
  
Line 743: Line 392:
  
 
</body>
 
</body>
 +
 +
 +
  
  
  
 
</html>
 
</html>

Latest revision as of 20:40, 11 July 2016