"
Team:Carnegie Mellon/Gallery
From 2014.igem.org
(Difference between revisions)
Acelentano (Talk | contribs) |
Acelentano (Talk | contribs) |
||
| Line 11: | Line 11: | ||
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> | <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> | ||
<style> | <style> | ||
| + | |||
| + | <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> | ||
| + | <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css"> | ||
| + | <link rel="stylesheet" href="css/bootstrap-image-gallery.min.css"> | ||
/* GLOBAL STYLES | /* GLOBAL STYLES | ||
| Line 248: | Line 252: | ||
| + | <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body --> | ||
| + | <div id="blueimp-gallery" class="blueimp-gallery"> | ||
| + | <!-- The container for the modal slides --> | ||
| + | <div class="slides"></div> | ||
| + | <!-- Controls for the borderless lightbox --> | ||
| + | <h3 class="title"></h3> | ||
| + | <a class="prev">‹</a> | ||
| + | <a class="next">›</a> | ||
| + | <a class="close">×</a> | ||
| + | <a class="play-pause"></a> | ||
| + | <ol class="indicator"></ol> | ||
| + | <!-- The modal dialog, which will be used to wrap the lightbox content --> | ||
| + | <div class="modal fade"> | ||
| + | <div class="modal-dialog"> | ||
| + | <div class="modal-content"> | ||
| + | <div class="modal-header"> | ||
| + | <button type="button" class="close" aria-hidden="true">×</button> | ||
| + | <h4 class="modal-title"></h4> | ||
| + | </div> | ||
| + | <div class="modal-body next"></div> | ||
| + | <div class="modal-footer"> | ||
| + | <button type="button" class="btn btn-default pull-left prev"> | ||
| + | <i class="glyphicon glyphicon-chevron-left"></i> | ||
| + | Previous | ||
| + | </button> | ||
| + | <button type="button" class="btn btn-primary next"> | ||
| + | Next | ||
| + | <i class="glyphicon glyphicon-chevron-right"></i> | ||
| + | </button> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div id="links"> | ||
| + | <a href="images/banana.jpg" title="Banana" data-gallery> | ||
| + | <img src="images/thumbnails/banana.jpg" alt="Banana"> | ||
| + | </a> | ||
| + | <a href="images/apple.jpg" title="Apple" data-gallery> | ||
| + | <img src="images/thumbnails/apple.jpg" alt="Apple"> | ||
| + | </a> | ||
| + | <a href="images/orange.jpg" title="Orange" data-gallery> | ||
| + | <img src="images/thumbnails/orange.jpg" alt="Orange"> | ||
| + | </a> | ||
| + | </div> | ||
| + | |||
| + | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | ||
| + | <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> | ||
| + | <script src="js/bootstrap-image-gallery.min.js"></script> | ||
Revision as of 03:07, 17 October 2014
