|
|
| (One intermediate revision not shown) |
| Line 1: |
Line 1: |
| | {{:Team:BCCS-Bristol/Header}} | | {{:Team:BCCS-Bristol/Header}} |
| | | | |
| - | <html>
| |
| - | <style type="text/css">
| |
| - | div.img
| |
| - | {
| |
| - | margin:2px;
| |
| - | border:1px solid #0000ff;
| |
| - | height:239px;
| |
| - | width:207px;
| |
| - | float:left;
| |
| - | text-align:center;
| |
| - | }
| |
| - | div.img img
| |
| - | {
| |
| - | display:inline-block;
| |
| - | height:auto;
| |
| - | width:auto;
| |
| - | max-height:150px;
| |
| - | max-width:200px;
| |
| - | margin:3px;
| |
| - | border:1px solid #ffffff;
| |
| - | }
| |
| - | div.img a:hover img
| |
| - | {
| |
| - | border:1px solid #0000ff;
| |
| - | }
| |
| - | div.desc
| |
| - | {
| |
| - | text-align:center;
| |
| - | font-weight:normal;
| |
| - | width:200px;
| |
| - | height:auto;
| |
| - | margin:2px;
| |
| - | }
| |
| - | </style>
| |
| | | | |
| - |
| |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
| |
| - |
| |
| - | <script type="text/javascript" src="http://dl.dropbox.com/u/1944619/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
| |
| - |
| |
| - | <link rel="stylesheet" href="http://dl.dropbox.com/u/1944619/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
| |
| - |
| |
| - |
| |
| - |
| |
| - | <script>
| |
| - | $(document).ready(function() {
| |
| - |
| |
| - | /* This is basic - uses default settings */
| |
| - |
| |
| - | $("a#single_image").fancybox({
| |
| - | 'titlePosition' : 'inside'
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - |
| |
| - | </html>
| |
| | | | |
| | ==Image Gallery== | | ==Image Gallery== |
| | | | |
| | Gallery containing all of the nice pictures, e.g. glowing E.coli, beads, test tubes, petri dishes, us hard at work etc | | Gallery containing all of the nice pictures, e.g. glowing E.coli, beads, test tubes, petri dishes, us hard at work etc |
| - |
| |
| - | =Test Gallery=
| |
| - |
| |
| - | TODO
| |
| - | - gallery container with auto-centering and title
| |
| - | - proper colours etc
| |
| - |
| |
| - | <html>
| |
| - | <div class="img">
| |
| - | <a id="single_image" href="http://dl.dropbox.com/u/1944619/big.jpg"
| |
| - | title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
| |
| - | <img src="http://dl.dropbox.com/u/1944619/thumb.jpg"
| |
| - | alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
| |
| - | <div class="desc">This is a short description that will appear in the gallery.</div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="img">
| |
| - | <a id="single_image" href="http://dl.dropbox.com/u/1944619/pie.jpg"
| |
| - | title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
| |
| - | <img src="http://dl.dropbox.com/u/1944619/pie.jpg"
| |
| - | alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
| |
| - | <div class="desc">This is a short description that will appear in the gallery.</div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="img">
| |
| - | <a id="single_image" href="http://dl.dropbox.com/u/1944619/million_dollar_pie.jpg"
| |
| - | title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
| |
| - | <img src="http://dl.dropbox.com/u/1944619/million_dollar_pie.jpg"
| |
| - | alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
| |
| - | <div class="desc">This is a short description that will appear in the gallery.</div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="img">
| |
| - | <a id="single_image" href="http://dl.dropbox.com/u/1944619/pie_main.jpg"
| |
| - | title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
| |
| - | <img src="http://dl.dropbox.com/u/1944619/pie_main.jpg"
| |
| - | alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
| |
| - | <div class="desc">This is a short description that will appear in the gallery.</div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="img">
| |
| - | <a id="single_image" href="http://dl.dropbox.com/u/1944619/FFACZEF3X5EV1BEGXU.medium.jpg"
| |
| - | title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
| |
| - | <img src="http://dl.dropbox.com/u/1944619/FFACZEF3X5EV1BEGXU.medium.jpg"
| |
| - | alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
| |
| - | <div class="desc">This is a short description that will appear in the gallery.</div>
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - | </html>
| |
Gallery containing all of the nice pictures, e.g. glowing E.coli, beads, test tubes, petri dishes, us hard at work etc
"
