Team:BCCS-Bristol/Human Practices/Public Engagement/School Visit

From 2010.igem.org

(Difference between revisions)
(School Visit)
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>
 +
 +
 +
==School Visit==
==School Visit==
Line 5: Line 64:
engagement, photos etc
engagement, photos etc
-
{|
+
TODO
-
|[[Image:BCCS-Bristol-ClevedonVisit-02.jpg|200px|thumb|left]]
+
- gallery container with auto-centering and title
-
|[[Image:BCCS-Bristol-ClevedonVisit-03.jpg|200px|thumb|left]]
+
- proper colours etc
-
|[[Image:BCCS-Bristol-ClevedonVisit-04.jpg|200px|thumb|left]]
+
 
-
|[[Image:BCCS-Bristol-ClevedonVisit-05.jpg|200px|thumb|left]]
+
<html>
-
|-
+
<div class="img">
-
|[[Image:BCCS-Bristol-ClevedonVisit-06.jpg|200px|thumb|left]]
+
  <a id="single_image" href="https://static.igem.org/mediawiki/2010/a/a4/BCCS-Bristol-ClevedonVisit-02.jpg"
-
|[[Image:BCCS-Bristol-ClevedonVisit-07.jpg|200px|thumb|left]]
+
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
-
|[[Image:BCCS-Bristol-ClevedonVisit-08.jpg|200px|thumb|left]]
+
  <img src="https://static.igem.org/mediawiki/2010/a/a4/BCCS-Bristol-ClevedonVisit-02.jpg"
-
|[[Image:BCCS-Bristol-ClevedonVisit-09.jpg|200px|thumb|left]]
+
  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>
-
|[[Image:BCCS-Bristol-ClevedonVisit-10.jpg|200px|thumb|left]]
+
</div>
-
|[[Image:BCCS-Bristol-ClevedonVisit-11.jpg|200px|thumb|left]]
+
 
-
|[[Image:BCCS-Bristol-ClevedonVisit-14.jpg|200px|thumb|left]]
+
<div class="img">
-
|[[Image:BCCS-Bristol-ClevedonVisit-15.jpg|200px|thumb|left]]
+
  <a id="single_image" href="https://static.igem.org/mediawiki/2010/3/3b/BCCS-Bristol-ClevedonVisit-03.jpg"
-
|-
+
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
-
|[[Image:BCCS-Bristol-ClevedonVisit-12.jpg|200px|thumb|left]]
+
  <img src="https://static.igem.org/mediawiki/2010/3/3b/BCCS-Bristol-ClevedonVisit-03.jpg"
-
|[[Image:BCCS-Bristol-ClevedonVisit-13.jpg|200px|thumb|left]]
+
  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="https://static.igem.org/mediawiki/2010/e/e3/BCCS-Bristol-ClevedonVisit-04.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/e/e3/BCCS-Bristol-ClevedonVisit-04.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="https://static.igem.org/mediawiki/2010/2/24/BCCS-Bristol-ClevedonVisit-05.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/2/24/BCCS-Bristol-ClevedonVisit-05.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="https://static.igem.org/mediawiki/2010/b/bb/BCCS-Bristol-ClevedonVisit-06.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/b/bb/BCCS-Bristol-ClevedonVisit-06.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="https://static.igem.org/mediawiki/2010/c/c5/BCCS-Bristol-ClevedonVisit-07.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/c/c5/BCCS-Bristol-ClevedonVisit-07.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="https://static.igem.org/mediawiki/2010/5/5d/BCCS-Bristol-ClevedonVisit-08.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/5/5d/BCCS-Bristol-ClevedonVisit-08.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="https://static.igem.org/mediawiki/2010/d/de/BCCS-Bristol-ClevedonVisit-09.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/d/de/BCCS-Bristol-ClevedonVisit-09.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="https://static.igem.org/mediawiki/2010/8/8f/BCCS-Bristol-ClevedonVisit-10.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/8/8f/BCCS-Bristol-ClevedonVisit-10.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="https://static.igem.org/mediawiki/2010/4/46/BCCS-Bristol-ClevedonVisit-11.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/4/46/BCCS-Bristol-ClevedonVisit-11.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="https://static.igem.org/mediawiki/2010/9/91/BCCS-Bristol-ClevedonVisit-14.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/9/91/BCCS-Bristol-ClevedonVisit-14.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="https://static.igem.org/mediawiki/2010/d/d6/BCCS-Bristol-ClevedonVisit-15.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/d/d6/BCCS-Bristol-ClevedonVisit-15.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="https://static.igem.org/mediawiki/2010/7/74/BCCS-Bristol-ClevedonVisit-12.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/7/74/BCCS-Bristol-ClevedonVisit-12.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="https://static.igem.org/mediawiki/2010/d/d7/BCCS-Bristol-ClevedonVisit-13.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="https://static.igem.org/mediawiki/2010/d/d7/BCCS-Bristol-ClevedonVisit-13.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>

Revision as of 17:22, 20 October 2010



School Visit

engagement, photos etc

TODO - gallery container with auto-centering and title - proper colours etc

This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.