Team:Braunschweig/Gallery
From 2014.igem.org
(Difference between revisions)
Line 31: | Line 31: | ||
<script src="https://2014.igem.org/Template:Team:Braunschweig/JS_template?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script src="https://2014.igem.org/Template:Team:Braunschweig/JS_template?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
<style> | <style> | ||
+ | |||
+ | /* smart image enlarger starts here */ | ||
+ | /* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */ | ||
+ | |||
+ | .ienlarger { | ||
+ | float: left; | ||
+ | clear: none; /* set to left or right if needed */ | ||
+ | padding-bottom: 5px; /* space between thumbs. Don't change this to margin */ | ||
+ | padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */ | ||
+ | } | ||
+ | |||
+ | .ienlarger a { | ||
+ | display:block; | ||
+ | text-decoration: none; | ||
+ | /* add cursor:default; to this rule to disable the hand cursor */ | ||
+ | } | ||
+ | |||
+ | .ienlarger a:hover{ /* don't move this positioning to normal state */ | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .ienlarger span img { | ||
+ | border: 1px solid #FFFFFF; /* adds a border around the image */ | ||
+ | margin-bottom: 8px; /* pushes the text down from the image */ | ||
+ | } | ||
+ | |||
+ | .ienlarger a span { /* this is for the large image and the caption */ | ||
+ | position: absolute; | ||
+ | display:none; | ||
+ | color: #000000; /* caption text colour */ | ||
+ | text-decoration: none; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 13px; /* caption text size */ | ||
+ | font-weight: bold; | ||
+ | padding-top: 10px; | ||
+ | padding-right: 10px; | ||
+ | padding-bottom: 13px; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | |||
+ | .ienlarger img { /* leave or IE puts a border around links */ | ||
+ | border-width: 0; | ||
+ | } | ||
+ | |||
+ | .ienlarger a:hover span { | ||
+ | display:block; | ||
+ | top: -30px; /* means the pop-up's top is 50px away from thumb's top */ | ||
+ | left: 300px; | ||
+ | z-index: 100; | ||
+ | |||
+ | /* If you want the pop-up open to the left of thumb, remove the left: 90px; and add | ||
+ | right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */ | ||
+ | |||
+ | /* If you want the pop-up open above the thumb, remove the top: 50px; and add | ||
+ | bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ | ||
+ | |||
+ | /* add cursor:default; to this rule to disable the hand cursor only for the large image */ | ||
+ | } | ||
+ | |||
+ | .resize_thumb { | ||
+ | width: 300px; /* enter desired thumb width here */ | ||
+ | height : auto; | ||
+ | } | ||
+ | |||
+ | /* smart image enlarger ends here */ | ||
#contentSub { | #contentSub { | ||
Line 181: | Line 246: | ||
- | <!---------- | + | <!---------- GALLERY -------> |
<div class="templatemo-welcome" id="templatemo-welcome"> | <div class="templatemo-welcome" id="templatemo-welcome"> | ||
<div class="container"> | <div class="container"> | ||
- | <div class="pagesummary"> | + | <div style="background-image: url(https://static.igem.org/mediawiki/2014/2/2c/TU-BS_gallery_timeline.png); background-position: left; background-repeat: no-repeat" class="pagesummary"> |
<h1>Gallery</h1> | <h1>Gallery</h1> | ||
- | < | + | <table> |
- | + | <tr> | |
- | <br> | + | <td> |
- | + | <div class="ienlarger"><a href="#nogo"><img src="http://www.technik-specials.de/wp-content/uploads/mil_falcon_rc.jpg" alt="thumb" class="resize_thumb" /><span> | |
- | + | <img src="http://www.technik-specials.de/wp-content/uploads/mil_falcon_rc.jpg" alt="large" /><br /></span></a> | |
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <center><h3>Caption X</h3></center> | ||
+ | This was one of our events! In this text you find a short description what you can see on the picture. | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <br> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <div style="float: right" class="ienlarger"><a href="#nogo"><img src="http://www.technik-specials.de/wp-content/uploads/mil_falcon_rc.jpg" alt="thumb" class="resize_thumb" /><span> | ||
+ | <img src="http://www.technik-specials.de/wp-content/uploads/mil_falcon_rc.jpg" alt="large" /><br /></span></a> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <center><h3>Caption X</h3></center> | ||
+ | This was one of our events! In this text you find a short description what you can see on the picture. | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <br> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <div class="ienlarger"><a href="#nogo"><img src="http://www.technik-specials.de/wp-content/uploads/mil_falcon_rc.jpg" alt="thumb" class="resize_thumb" /><span> | ||
+ | <img src="http://www.technik-specials.de/wp-content/uploads/mil_falcon_rc.jpg" alt="large" /><br /></span></a> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <center><h3>Caption X</h3></center> | ||
+ | This was one of our events! In this text you find a short description what you can see on the picture. | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 197: | Line 298: | ||
<!---------- REST ------------> | <!---------- REST ------------> | ||
<div class="container section"><a name="collaboration" class="anchor"></a><a name="attributions" class="anchor"></a><a name="gallery" class="anchor"></a> | <div class="container section"><a name="collaboration" class="anchor"></a><a name="attributions" class="anchor"></a><a name="gallery" class="anchor"></a> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<!---------- SPONSOREN -----------> | <!---------- SPONSOREN -----------> |
Revision as of 16:46, 11 October 2014
Gallery
Caption X |
Caption X |
Caption X |