Team:Nevada/gallery

From 2011.igem.org

(Difference between revisions)
m
m
Line 10: Line 10:
  </html>
  </html>
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>s3Slider jQuery plugin</title>
 +
<!-- CSS -->
 +
<style type="text/css" media="screen">
 +
#slider {
 +
    width: 410px; /* important to be same as image width */
 +
    height: 300px; /* important to be same as image height */
 +
    position: relative; /* important */
 +
overflow: hidden; /* important */
 +
}
 +
#sliderContent {
 +
    width: 410px; /* 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: 384px;
 +
    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="https://2011.igem.org/Template:Nevada_Java"></script>
 +
<script type="text/javascript">
 +
    $(document).ready(function() {
 +
        $('#slider').s3Slider({
 +
            timeOut: 3000
 +
        });
 +
    });
 +
</script>
 +
</head>
 +
 +
<body>
 +
 +
    <h2>Example 1</h2>
 +
    <p>This show the layer appears from top or bottom.</p>
 +
    <div id="slider">
 +
        <ul id="sliderContent">
 +
            <li class="sliderImage">
 +
                <a href=""><img src="example_images/410/1.jpg" alt="1" /></a>
 +
 +
                <span class="top"><strong>Title text 1</strong><br />Content text...</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <a href=""><img src="example_images/410/2.jpg" alt="2" /></a>
 +
                <span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
 +
                <img src="example_images/410/3.jpg" alt="3" />
 +
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
 +
            </li>
 +
            <li class="sliderImage">
 +
                <img src="example_images/410/4.jpg" alt="4" />
 +
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
 +
            </li>
 +
 +
            <li class="sliderImage">
 +
                <img src="example_images/410/5.jpg" alt="5" />
 +
                <span class="top"><strong>Title text 2</strong><br />Content text...</span>
 +
            </li>
 +
            <div class="clear sliderImage"></div>
 +
        </ul>
 +
    </div>
 +
    <!-- // slider -->
 +
 +
</body>
 +
</html>

Revision as of 21:54, 4 September 2011







s3Slider jQuery plugin

Example 1

This show the layer appears from top or bottom.

  • 1 Title text 1
    Content text...
  • 2 Title text 2
    Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...
  • 3 Title text 2
    Content text...
  • 4 Title text 2
    Content text...
  • 5 Title text 2
    Content text...

Retrieved from "http://2011.igem.org/Team:Nevada/gallery"