Team:UCSF/lily2

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) -->
 
<html>  
<html>  
<head>  
<head>  
Line 38: Line 37:
position: relative;
position: relative;
z-index: 0;
z-index: 0;
-
}
+
}/*调整位置*/
.camera_wrap img {
.camera_wrap img {
max-width: none!important;
max-width: none!important;
Line 48: Line 47:
width: 100%;
width: 100%;
z-index: 1;
z-index: 1;
-
}
+
}/* 调整camera高度*/
.camera_wrap {
.camera_wrap {
width: 100%;
width: 100%;
-
}
+
}/*调整camera宽度*/
.camera_src {
.camera_src {
display: none;
display: none;
Line 111: Line 110:
}
}
.camera_target_content .camera_link {
.camera_target_content .camera_link {
-
     background: url(../images/blank.gif);
+
     background: url(https://static.igem.org/mediawiki/2013/3/3e/USTC-Software_Blank.gif);
display: block;
display: block;
height: 100%;
height: 100%;
Line 117: Line 116:
}
}
.camera_loader {
.camera_loader {
-
     background: #fff url(../images/camera-loader.gif) no-repeat center;
+
     background: #fff url(https://static.igem.org/mediawiki/2013/1/14/USTC-Software_Camera-loader.gif) no-repeat center;
background: rgba(255, 255, 255, 0.9) url(../images/camera-loader.gif) no-repeat center;
background: rgba(255, 255, 255, 0.9) url(../images/camera-loader.gif) no-repeat center;
border: 1px solid #ffffff;
border: 1px solid #ffffff;
Line 165: Line 164:
position: absolute;
position: absolute;
width: 100%;
width: 100%;
 +
}
 +
.camera_caption em {
 +
font-family: "Helvetica Neue","Arial",sans-serif;
 +
font-style:normal;
 +
font-size: 12px;
 +
/*margin-left:0px;*/
}
}
.camera_caption > div {
.camera_caption > div {
Line 187: Line 192:
}
}
.camera_prevThumbs div {
.camera_prevThumbs div {
-
background: url(camera_skins.png) no-repeat -160px 0;
+
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -160px 0;
display: block;
display: block;
height: 40px;
height: 40px;
Line 206: Line 211:
}
}
.camera_nextThumbs div {
.camera_nextThumbs div {
-
background: url(camera_skins.png) no-repeat -190px 0;
+
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -190px 0;
display: block;
display: block;
height: 40px;
height: 40px;
Line 306: Line 311:
}
}
.camera_prev > span {
.camera_prev > span {
-
background: url(camera_skins.png) no-repeat 0 0;
+
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat 0 0;
display: block;
display: block;
height: 40px;
height: 40px;
Line 315: Line 320:
}
}
.camera_next > span {
.camera_next > span {
-
background: url(camera_skins.png) no-repeat -40px 0;
+
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -40px 0;
display: block;
display: block;
height: 40px;
height: 40px;
Line 324: Line 329:
}
}
.camera_commands > .camera_play {
.camera_commands > .camera_play {
-
background: url(camera_skins.png) no-repeat -80px 0;
+
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -80px 0;
height: 40px;
height: 40px;
width: 40px;
width: 40px;
}
}
.camera_commands > .camera_stop {
.camera_commands > .camera_stop {
-
background: url(camera_skins.png) no-repeat -120px 0;
+
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -120px 0;
display: block;
display: block;
height: 40px;
height: 40px;
Line 408: Line 413:
**************************/
**************************/
.pattern_1 .camera_overlayer {
.pattern_1 .camera_overlayer {
-
background: url(overlay1.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/7/7f/USTC-Software_Overlay1.png) repeat;
}
}
.pattern_2 .camera_overlayer {
.pattern_2 .camera_overlayer {
-
background: url(overlay2.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/4/44/USTC-Software_Overlay2.png) repeat;
}
}
.pattern_3 .camera_overlayer {
.pattern_3 .camera_overlayer {
-
background: url(overlay3.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/c/c9/USTC-Software_Overlay3.png) repeat;
}
}
.pattern_4 .camera_overlayer {
.pattern_4 .camera_overlayer {
-
background: url(overlay4.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/e/ec/USTC-Software_Overlay4.png) repeat;
}
}
.pattern_5 .camera_overlayer {
.pattern_5 .camera_overlayer {
-
background: url(overlay5.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/f/f3/USTC-Software_Overlay5.png) repeat;
}
}
.pattern_6 .camera_overlayer {
.pattern_6 .camera_overlayer {
-
background: url(overlay6.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/4/41/USTC-Software_Overlay6.png) repeat;
}
}
.pattern_7 .camera_overlayer {
.pattern_7 .camera_overlayer {
-
background: url(overlay7.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/2/28/USTC-Software_Overlay7.png) repeat;
}
}
.pattern_8 .camera_overlayer {
.pattern_8 .camera_overlayer {
-
background: url(overlay8.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/3/3a/USTC-Software_Overlay8.png) repeat;
}
}
.pattern_9 .camera_overlayer {
.pattern_9 .camera_overlayer {
-
background: url(overlay9.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/b/b3/USTC-Software_Overlay9.png) repeat;
}
}
.pattern_10 .camera_overlayer {
.pattern_10 .camera_overlayer {
-
background: url(overlay10.png) repeat;
+
background: url(https://static.igem.org/mediawiki/2013/4/4e/USTC-Software_Overlay10.png) repeat;
}
}
.camera_caption {
.camera_caption {
Line 1,370: Line 1,375:
   
   
</head>
</head>
 +
<body>
<body>
<div id="back_to_camera">
<div id="back_to_camera">
Line 1,378: Line 1,384:
     <p>Pagination circles with the height relative to the width</p>
     <p>Pagination circles with the height relative to the width</p>
         <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
         <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
-
             <div data-thumb="bridge.jpg" data-src="bridge.jpg">
+
             <div data-thumb="https://static.igem.org/mediawiki/2013/4/4a/USTC-Software_1.jpg" data-src="https://static.igem.org/mediawiki/2013/4/4a/USTC-Software_1.jpg">
                 <div class="camera_caption fadeFromBottom">
                 <div class="camera_caption fadeFromBottom">
                     Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                     Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                 </div>
                 </div>
             </div>
             </div>
-
             <div data-thumb="leaf.jpg" data-src="leaf.jpg">
+
             <div data-thumb="https://static.igem.org/mediawiki/2013/1/19/Ustc-software_2s.jpg" data-src="https://static.igem.org/mediawiki/2013/1/19/Ustc-software_2s.jpg">
                 <div class="camera_caption fadeFromBottom">
                 <div class="camera_caption fadeFromBottom">
                     It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                     It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                 </div>
                 </div>
             </div>
             </div>
-
             <div data-thumb="road.jpg" data-src="road.jpg">
+
             <div data-thumb="https://static.igem.org/mediawiki/2013/9/9c/USTC-Software_3.jpg" data-src="https://static.igem.org/mediawiki/2013/9/9c/USTC-Software_3.jpg">
                 <div class="camera_caption fadeFromBottom">
                 <div class="camera_caption fadeFromBottom">
                     <em>It's completely free</em> (even if a donation is appreciated)
                     <em>It's completely free</em> (even if a donation is appreciated)
                 </div>
                 </div>
             </div>
             </div>
-
             <div data-thumb="sea.jpg" data-src="sea.jpg">
+
             <div data-thumb="https://static.igem.org/mediawiki/2013/e/e0/USTC-Software_4.jpg" data-src="https://static.igem.org/mediawiki/2013/e/e0/USTC-Software_4.jpg">
                 <div class="camera_caption fadeFromBottom">
                 <div class="camera_caption fadeFromBottom">
                     Camera slideshow provides many options <em>to customize your project</em> as more as possible
                     Camera slideshow provides many options <em>to customize your project</em> as more as possible
                 </div>
                 </div>
             </div>
             </div>
-
             <div data-thumb="shelter.jpg" data-src="shelter.jpg">
+
             <div data-thumb="https://static.igem.org/mediawiki/2013/e/ed/USTC-Software_5.jpg" data-src="https://static.igem.org/mediawiki/2013/e/ed/USTC-Software_5.jpg">
                 <div class="camera_caption fadeFromBottom">
                 <div class="camera_caption fadeFromBottom">
                     It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
                     It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
                 </div>
                 </div>
             </div>
             </div>
 +
            <!--
             <div data-thumb="tree.jpg" data-src="tree.jpg">
             <div data-thumb="tree.jpg" data-src="tree.jpg">
                 <div class="camera_caption fadeFromBottom">
                 <div class="camera_caption fadeFromBottom">
Line 1,408: Line 1,415:
                 </div>
                 </div>
             </div>
             </div>
 +
            -->
         </div><!-- #camera_wrap_1 -->
         </div><!-- #camera_wrap_1 -->
</body>
</body>
</html>
</html>

Revision as of 06:47, 21 August 2013

Camera | a free jQuery slideshow by Pixedelic

Pagination circles with the height relative to the width

Camera is a responsive/adaptive slideshow. Try to resize the browser window
It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
It's completely free (even if a donation is appreciated)
Camera slideshow provides many options to customize your project as more as possible
It supports captions, HTML elements and videos and it's validated in HTML5 (have a look)

Retrieved from "http://2013.igem.org/Team:UCSF/lily2"