"
Team:UiOslo Norway/Album
From 2014.igem.org
(Difference between revisions)
StianLagstad (Talk | contribs) |
StianLagstad (Talk | contribs) |
||
| Line 2: | Line 2: | ||
<html> | <html> | ||
| - | |||
| - | |||
| - | |||
<body> | <body> | ||
| Line 101: | Line 98: | ||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | <script type="text/javascript"> | ||
| + | $(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> | ||
<div class="footer"> | <div class="footer"> | ||
Revision as of 10:49, 17 October 2014
