Team:Nevada/gallery

From 2011.igem.org

(Difference between revisions)
m
m
Line 10: Line 10:
<title>s3Slider jQuery plugin</title>
<title>s3Slider jQuery plugin</title>
<!-- CSS -->
<!-- CSS -->
-
{{Nevada_Java_CSS}}
+
<style type="text/css" media="screen">
 +
#slider {
 +
    width: 850px; /* important to be same as image width */
 +
    height: 600px; /* important to be same as image height */
 +
    position: relative; /* important */
 +
overflow: hidden; /* important */
 +
}
 +
#sliderContent {
 +
    width: 850px; /* 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/s3Slider.js?action=raw&amp;ctype=text/js"></script>
<script type="text/javascript">
<script type="text/javascript">
     $(document).ready(function() {
     $(document).ready(function() {

Revision as of 23:44, 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...