Team:UiOslo Norway/Album

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<div class="container">
-
<head>
+
<div class="jumbotron text-center">
-
<title>UiOslo IGEM 2014</title>
+
<h1>Album</h1>
-
<meta name="viewport" content="width=device-width, initial-scale=1">
+
</div>
-
<meta charset="UTF-8">
+
-
<link rel="stylesheet" href="/Team:UiOslo_Norway/Include/bootstrap.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
<link rel="stylesheet" href="/Team:UiOslo_Norway/Include/styles.css?action=raw&ctype=text/css" rel="stylesheet">
+
-
<link rel="shortcut icon" href="images/uioslo-logo.ico" type="image/icon">
+
-
<link rel="icon" href="images/uioslo-logo.ico" type="image/icon">
+
-
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+
-
<script src="/Team:UiOslo_Norway/Include/bootstrap.js?action=raw&ctype=text/css"></script>
+
-
<style>
+
-
#globalWrapper{
+
-
width:100%;
+
-
}
+
-
#bodyContent{
+
-
width:100%;
+
-
position:absolute;
+
-
top:0;
+
-
}
+
-
#content{
+
-
width:100%;
+
-
}
+
-
#p-logo{
+
-
display:none;
+
-
}
+
-
#search-controls{
+
-
display:none;
+
-
}
+
-
#top-section{
+
-
border: none;
+
-
}
+
-
</style>
+
-
</head>
+
-
<body>
+
-
<div class="navbar navbar-default navbar-static-top">
 
-
<div class="navbar-inner">
 
-
<div class="container">
 
-
+
<div class="row">
-
<div>
+
<div class="span12 text-center">
-
<a href="index.php" class="navbar-brand">
+
<ul class="nav nav-pills" style="display:inline-block;">
-
<img
+
<li>
-
src="images/uioslo-logo.png"
+
<a
-
alt=""
+
href="#"
-
height="40px">
+
class="albumLink"
-
</a>
+
id="events-link">Events</a>
 +
</li>
 +
<li>
 +
<a
 +
href="#"
 +
class="albumLink"
 +
id="lab-link">Lab</a>
 +
</li>
 +
<li>
 +
<a
 +
href="#"
 +
class="albumLink"
 +
id="social-link">Social</a>
 +
</li>
 +
<li>
 +
<a href="our_team.php">Team</a>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 
 +
<div class="row borderTopRow">
 +
 
 +
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 +
<div class="modal-dialog">
 +
<div class="modal-content">       
 +
<div class="modal-body">               
</div>
</div>
 +
</div><!-- /.modal-content -->
 +
</div><!-- /.modal-dialog -->
 +
</div><!-- /.modal -->
-
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
+
<div id="events" class="albumDiv">
-
<span class="icon-bar"></span>
+
-
<span class="icon-bar"></span>
+
<ul class="row albumStuff">
-
<span class="icon-bar"></span>
+
-
</button>
+
-
<div class="collapse navbar-collapse navHeaderCollapse">
+
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 imageSpacer">
-
<ul class="nav navbar-nav navbar-right">
+
<img
-
<li class="active"><a href="index.php">Home</a></li>
+
class="maxImage"
-
<li class="dropdown">
+
src="images/album/masterpub.jpg"
-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <b class="caret"></b></a>
+
alt="Håkon presented iGEM and our team in a masterpub at the university."/>
-
<ul class="dropdown-menu">
+
</li>
-
<li><a href="our_team.php">Our Team</a></li>
+
 
-
<li><a href="album.php">Album</a></li>
+
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 imageSpacer">
-
<li><a href="acknowledgements.php">Acknowlegdements</a></li>
+
<img
-
</ul>
+
class="maxImage"
-
</li>
+
src="images/album/stand.jpg"
-
<li class="dropdown">
+
alt="Sumaya and William speaking about iGEM and our team with biology students at the university."/>
-
<a href="project_overview.php" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
+
</li>
-
<ul class="dropdown-menu">
+
 
-
<li><a href="project_overview.php">Overview</a></li>
+
</ul>
-
<li><a href="project_plan.php">Project Plan</a></li>
+
-
<li><a href="project_prospect.php">Prospect for the Future</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="dropdown">
+
-
<a href="achievements_overview.php" class="dropdown-toggle" data-toggle="dropdown">Achievements <b class="caret"></b></a>
+
-
<ul class="dropdown-menu">
+
-
<li><a href="achievements_overview.php">General</a></li>
+
-
<li><a href="achievements_parts.php">Parts</a></li>
+
-
<li><a href="achievements_results.php">Results</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="dropdown">
+
-
<a href="notebook.php" class="dropdown-toggle" data-toggle="dropdown">Notebook <b class="caret"></b></a>
+
-
<ul class="dropdown-menu">
+
-
<li><a href="notebook.php">Notebook</a></li>
+
-
<li><a href="notebook_protocols.php">Protocols</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="dropdown">
+
-
<a href="human_practice.php" class="dropdown-toggle" data-toggle="dropdown">Human Practice <b class="caret"></b></a>
+
-
<ul class="dropdown-menu">
+
-
<li><a href="human_practice.php">Human Practice</a></li>
+
-
<li><a href="humam_practice_media.php">Media</a></li>
+
-
<li><a href="humam_practice_social_media.php">Social</a></li>
+
-
<li><a href="humam_practice_schools.php">Schools</a></li>
+
-
<li><a href="humam_practice_events.php">Events</a></li>
+
-
<li><a href="humam_practice_collaboration.php">Collaboration</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="dropdown">
+
-
<a href="safety_protocols.php" class="dropdown-toggle" data-toggle="dropdown">Safety <b class="caret"></b></a>
+
-
<ul class="dropdown-menu">
+
-
<li><a href="safety_protocols.php">Safety Protocols</a></li>
+
-
<li><a href="safety_uio.php">University of Oslo Safety Measures</a></li>
+
-
<li><a href="safety_ethics.php">Ethics and Concerns</a></li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a href="https://2014.igem.org/Main_Page" class="navbar-brand">
+
-
<img
+
-
src="images/Igemlogo_300px.png"
+
-
alt="iGEM"
+
-
height="25px"
+
-
width="35px">
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
</div>
 
-
</div>
 
-
</div>
 
</div>
</div>
-
<div class="container">
+
 
 +
<div id="lab" class="albumDiv">
 +
 +
<ul class="row albumStuff">
 +
 
 +
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 imageSpacer">
 +
<img
 +
class="maxImage"
 +
src="images/album/girls-lab.png"
 +
alt="The girls having fun in the lab."/>
 +
</li>
 +
</ul>
 +
 
 +
</div>
 +
 
 +
<div id="social" class="albumDiv">
 +
 +
<ul class="row albumStuff">
 +
 
 +
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 imageSpacer">
 +
<img
 +
class="maxImage"
 +
src="images/album/coffee.jpg"
 +
alt="We found a relic of a coffee maker in our meeting room. People are sceptical, but people must have coffee."/>
 +
</li>
 +
 
 +
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 imageSpacer">
 +
<img
 +
class="maxImage"
 +
src="images/album/meeting.jpg"
 +
alt="One of our early planning meetings."/>
 +
</li>
 +
 
 +
</ul>
 +
 
 +
</div>
 +
 
 +
</div>Pal
 +
 
 +
<script>
 +
$(document).ready(function(){
 +
 
 +
    // set default visible category
 +
    $('.albumDiv').hide();
 +
    $('#events').show();
 +
    $('#events-link').parent().attr('class','active');
 +
 
 +
    // handler for changing categories
 +
    $('.albumLink').on('click', function() {
 +
        var id = $(this).attr('id').split("-");
 +
        id = id[0];
 +
        // hide all categories
 +
        $('.albumDiv').hide();
 +
        // remove class active from all li-elements
 +
        $('.albumLink').parent().removeClass('active');
 +
        // show this specific category
 +
        $('#' + id).show();
 +
        $('#' + id + '-link').parent().attr('class','active');
 +
    });
 +
 
 +
    // handler for showing modal
 +
    $('li img').on('click',function(){
 +
 
 +
        var category = $(this).parent().parent().parent().attr('id');
 +
        var src = $(this).attr('src');
 +
        var alt = $(this).attr('alt');
 +
        var img = '<img src="' + src + '" class="img-responsive"/>';
 +
        var imgDesc = '<div class="imgDesc">' + alt + '</div>'
 +
 
 +
        //start of new code new code
 +
        var index = $(this).parent('li').index();
 +
 
 +
        var html = '';
 +
        html += img;
 +
        html += imgDesc;
 +
 
 +
        $('#myModal').modal();
 +
        $('#myModal .modal-body').html(html);
 +
       
 +
  });
 +
 
 +
})
 +
 
 +
</script>

Revision as of 12:10, 12 August 2014

Album


  • <a href="#" class="albumLink" id="events-link">Events</a>
  • <a href="#" class="albumLink" id="lab-link">Lab</a>
  • <a href="#" class="albumLink" id="social-link">Social</a>
  • <a href="our_team.php">Team</a>
  • <img class="maxImage" src="images/album/masterpub.jpg" alt="Håkon presented iGEM and our team in a masterpub at the university."/>
  • <img class="maxImage" src="images/album/stand.jpg" alt="Sumaya and William speaking about iGEM and our team with biology students at the university."/>
  • <img class="maxImage" src="images/album/girls-lab.png" alt="The girls having fun in the lab."/>
  • <img class="maxImage" src="images/album/coffee.jpg" alt="We found a relic of a coffee maker in our meeting room. People are sceptical, but people must have coffee."/>
  • <img class="maxImage" src="images/album/meeting.jpg" alt="One of our early planning meetings."/>
Pal

<script> $(document).ready(function(){ 

   // set default visible category
   $('.albumDiv').hide();
   $('#events').show();
   $('#events-link').parent().attr('class','active');

   // handler for changing categories
   $('.albumLink').on('click', function() {
       var id = $(this).attr('id').split("-");
       id = id[0];
       // hide all categories
       $('.albumDiv').hide();
       // remove class active from all li-elements
       $('.albumLink').parent().removeClass('active');
       // show this specific category
       $('#' + id).show();
       $('#' + id + '-link').parent().attr('class','active');
   });

   // handler for showing modal
   $('li img').on('click',function(){

       var category = $(this).parent().parent().parent().attr('id');
       var src = $(this).attr('src');
       var alt = $(this).attr('alt');
       var img = '<img src="' + src + '" class="img-responsive"/>';
var imgDesc = '
' + alt + '
' 
       //start of new code new code
       var index = $(this).parent('li').index();

       var html = ;
       html += img;
       html += imgDesc;

       $('#myModal').modal();
       $('#myModal .modal-body').html(html);
       
  });

})

</script>
Retrieved from "http://2014.igem.org/Team:UiOslo_Norway/Album"