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