Team:ITESM Mexico/Gallery

From 2011.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
 +
<!-- CSS -->
 +
<style type="text/css" media="screen">
 +
#slider {
 +
    width: 900px; /* important to be same as image width */
 +
    height: 600px; /* important to be same as image height */
 +
    position: relative; /* important */
 +
overflow: hidden; /* important */
 +
}
 +
#sliderContent {
 +
    width: 910px; /* important to be same as image width or wider */
 +
    position: absolute;
 +
top: 0;
 +
margin-left: 0;
 +
}
 +
.sliderImage {
 +
    float: left;
 +
    position: relative;
 +
display: none;
 +
}
 +
.sliderImage span {
 +
    position: absolute;
 +
font: 10px/15px Arial, Helvetica, sans-serif;
 +
    padding: 10px 13px;
 +
    width: 900px;
 +
    background-color: #000;
 +
    filter: alpha(opacity=70);
 +
    -moz-opacity: 0.7;
 +
-khtml-opacity: 0.7;
 +
    opacity: 0.7;
 +
    color: #fff;
 +
    display: none;
 +
}
 +
.clear {
 +
clear: both;
 +
}
 +
.sliderImage span strong {
 +
    font-size: 14px;
 +
}
 +
.top {
 +
top: 0;
 +
left: 0;
 +
}
 +
.bottom {
 +
bottom: 0;
 +
    left: 0;
 +
}
 +
ul { list-style-type: none;}
 +
</style>
 +
<!-- JavaScripts-->
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://productospumas.com/deviatan/sponsoring/s3Slider.js"></script>
 +
<script type="text/javascript">
 +
    $(document).ready(function() {
 +
        $('#slider').s3Slider({
 +
            timeOut: 3000
 +
        });
 +
    });
 +
</script>
-
<script type="text/javascript" src="http://productospumas.com/deviatan/sponsoring/galleria-1.2.5.js"></script>
 
-
        <div id="gallery">
+
<body>
-
            <img alt="Esto es una celula"  src="http://recursos.cnice.mec.es/biosfera/alumno/4ESO/seruni-pluricelulares/imagenes/actividad11/celula_vegetal.jpg" >
+
-
<img alt="Esto es otra celula"  src="http://recursos.cnice.mec.es/biosfera/alumno/4ESO/seruni-pluricelulares/imagenes/actividad11/celula_vegetal.jpg" >
+
-
        <img alt="Y esto es lo mismo"  src="http://recursos.cnice.mec.es/biosfera/alumno/4ESO/seruni-pluricelulares/imagenes/actividad11/celula_vegetal.jpg" >
+
-
        </div>
+
 +
    <div id="slider">
 +
        <ul id="sliderContent">
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_01.JPG"/></a>
 +
                <span class="top"><strong>Foto 01</strong><br />Foto</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_02.JPG"/></a>
 +
                <span class="top"><strong>Foto 02</strong><br />Foto</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_03.JPG" /></a>
 +
                <span class="top"><strong>Foto 03</strong><br />Foto</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_04.JPG"/></a>
 +
                <span class="top"><strong>Foto 04</strong><br />Foto</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_05.JPG" /></a>
 +
                <span class="top"><strong>Foto 05</strong><br />Foto</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_06.JPG" /></a>
 +
                <span class="top"><strong>Foto 06</strong><br />Foto</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_07.JPG" /></a>
 +
                <span class="top"><strong>Foto 07</strong><br />Foto</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_08.JPG" /></a>
 +
                <span class="top"><strong>Foto 08</strong><br />Foto</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_09.JPG" /></a>
 +
                <span class="top"><strong>Foto 09</strong><br />Foto</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="http://productospumas.com/deviatan/sponsoring/fotos_equipo/equipo_10.JPG" /></a>
 +
                <span class="top"><strong>Foto 10</strong><br />Foto</span>
 +
            </li>
 +
         
 +
            <div class="clear sliderImage"></div>
 +
        </ul>
 +
    </div>
 +
    <!-- // slider -->
-
 
+
</body>
-
        <script type="text/javascript">
+
-
Galleria.loadTheme('http://productospumas.com/deviatan/sponsoring/galleria.classic.min.js');
+
-
            $("#gallery").galleria({
+
-
                width: 800,
+
-
                height: 500,
+
-
autoplay: 5000,
+
-
lightbox: true
+
-
            });
+
-
    </script>
+
</html>
</html>

Revision as of 03:07, 28 September 2011

ITESM MÉXICO

SensE.coli

Igem Itesm

  • Foto 01
    Foto
  • Foto 02
    Foto
  • Foto 03
    Foto
  • Foto 04
    Foto
  • Foto 05
    Foto
  • Foto 06
    Foto
  • Foto 07
    Foto
  • Foto 08
    Foto
  • Foto 09
    Foto
  • Foto 10
    Foto

Retrieved from "http://2011.igem.org/Team:ITESM_Mexico/Gallery"