Team:Nevada/gallery

From 2011.igem.org

(Difference between revisions)
m
m
Line 1: Line 1:
{{Nevada_Header_CSS}}
{{Nevada_Header_CSS}}
{{Nevada_Gallery_CSS}}
{{Nevada_Gallery_CSS}}
 +
{{Nevada_Java_CSS}}
<html>
<html>
<p><br>
<p><br>
Line 9: Line 10:
<title>s3Slider jQuery plugin</title>
<title>s3Slider jQuery plugin</title>
<!-- CSS -->
<!-- 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:43, 4 September 2011


#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;}


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"