Template:Team:Marburg/Template:Slider

From 2014.igem.org

(Difference between revisions)
 
(24 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html></p>
     <style>  
     <style>  
         .captionOrange, .captionBlack
         .captionOrange, .captionBlack
Line 36: Line 36:
             background: url(../img/browser-icons.png);
             background: url(../img/browser-icons.png);
         }
         }
 +
 +
            /*
 +
            .jssorb01 div          (normal)
 +
            .jssorb01 div:hover    (normal mouseover)
 +
            .jssorb01 .av          (active)
 +
            .jssorb01 .av:hover    (active mouseover)
 +
            .jssorb01 .dn          (mousedown)
 +
            */
 +
            .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av
 +
            {
 +
                filter: alpha(opacity=70);
 +
                opacity: .7;
 +
                overflow:hidden;
 +
                cursor: pointer;
 +
                border: #000 1px solid;
 +
            }
 +
            .jssorb01 div { background-color: gray; }
 +
            .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
 +
            .jssorb01 .av { background-color: #fff; }
 +
            .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
 +
 +
            /* jssor slider arrow navigator skin 05 css */
 +
            /*
 +
            .jssora05l              (normal)
 +
            .jssora05r              (normal)
 +
            .jssora05l:hover        (normal mouseover)
 +
            .jssora05r:hover        (normal mouseover)
 +
            .jssora05ldn            (mousedown)
 +
            .jssora05rdn            (mousedown)
 +
            */
 +
            .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
 +
            {
 +
            position: absolute;
 +
            cursor: pointer;
 +
            display: block;
 +
                background: url("https://static.igem.org/mediawiki/2014/d/d3/ULB2014ARROWS.png") no-repeat;
 +
                overflow:hidden;
 +
            }
 +
            .jssora05l { background-position: -10px -40px; }
 +
            .jssora05r { background-position: -70px -40px; }
 +
            .jssora05l:hover { background-position: -130px -40px; }
 +
            .jssora05r:hover { background-position: -190px -40px; }
 +
            .jssora05ldn { background-position: -250px -40px; }
 +
            .jssora05rdn { background-position: -310px -40px; }
     </style>
     </style>
-
    <!-- it works the same with all jquery version from 1.x to 2.x -->
 
-
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
 
-
    <!-- use jssor.slider.mini.js (40KB) or jssor.sliderc.mini.js (32KB, with caption, no slideshow) or jssor.sliders.mini.js (28KB, no caption, no slideshow) instead for release -->
 
-
    <!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.js + jssor.slider.js) -->
 
<script type="text/javascript" src="https://2014.igem.org/Template:Team:Marburg/Template:jssor18.js?action=raw"></script>
<script type="text/javascript" src="https://2014.igem.org/Template:Team:Marburg/Template:jssor18.js?action=raw"></script>
<script type="text/javascript" src="https://2014.igem.org/Template:Team:Marburg/Template:jssor.slider.js?action=raw"></script>
<script type="text/javascript" src="https://2014.igem.org/Template:Team:Marburg/Template:jssor.slider.js?action=raw"></script>
Line 49: Line 89:
             var _SlideshowTransitions = [
             var _SlideshowTransitions = [
-
            //Swing Outside in Stairs
 
-
            {$Duration: 1200, x: 0.2, y: -0.1, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInWave, $Top: $JssorEasing$.$EaseInWave, $Clip: $JssorEasing$.$EaseOutQuad }, $Outside: true, $Round: { $Left: 1.3, $Top: 2.5} }
 
-
 
-
            //Dodge Dance Outside out Stairs
 
-
            , { $Duration: 1500, x: 0.3, y: -0.3, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.1, 0.9], $Top: [0.1, 0.9] }, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInJump, $Top: $JssorEasing$.$EaseInJump, $Clip: $JssorEasing$.$EaseOutQuad }, $Outside: true, $Round: { $Left: 0.8, $Top: 2.5} }
 
-
 
-
            //Dodge Pet Outside in Stairs
 
-
            , { $Duration: 1500, x: 0.2, y: -0.1, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInWave, $Top: $JssorEasing$.$EaseInWave, $Clip: $JssorEasing$.$EaseOutQuad }, $Outside: true, $Round: { $Left: 0.8, $Top: 2.5} }
 
-
 
-
            //Dodge Dance Outside in Random
 
-
            , { $Duration: 1500, x: 0.3, y: -0.3, $Delay: 80, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $Easing: { $Left: $JssorEasing$.$EaseInJump, $Top: $JssorEasing$.$EaseInJump, $Clip: $JssorEasing$.$EaseOutQuad }, $Outside: true, $Round: { $Left: 0.8, $Top: 2.5} }
 
-
 
-
            //Flutter out Wind
 
-
            , { $Duration: 1800, x: 1, y: 0.2, $Delay: 30, $Cols: 10, $Rows: 5, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $Reverse: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 2050, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseOutWave, $Clip: $JssorEasing$.$EaseInOutQuad }, $Outside: true, $Round: { $Top: 1.3} }
 
-
 
-
            //Collapse Stairs
 
-
            , { $Duration: 1200, $Delay: 30, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 2049, $Easing: $JssorEasing$.$EaseOutQuad }
 
-
 
             //Collapse Random
             //Collapse Random
-
             , { $Duration: 1000, $Delay: 80, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad }
+
             { $Duration: 1000, $Delay: 80, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad }
-
 
+
-
            //Vertical Chess Stripe
+
-
            , { $Duration: 1000, y: -1, $Cols: 12, $Formation: $JssorSlideshowFormations$.$FormationStraight, $ChessMode: { $Column: 12} }
+
-
 
+
-
            //Extrude out Stripe
+
-
            , { $Duration: 1000, x: -0.2, $Delay: 40, $Cols: 12, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInOutExpo, $Opacity: $JssorEasing$.$EaseInOutQuad }, $Opacity: 2, $Outside: true, $Round: { $Top: 0.5} }
+
-
            //Dominoes Stripe
 
-
            , { $Duration: 2000, y: -1, $Delay: 60, $Cols: 15, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Easing: $JssorEasing$.$EaseOutJump, $Round: { $Top: 1.5} }
 
             ];
             ];
Line 157: Line 171:
                 background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
                 background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
             </div>
             </div>
-
             <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
+
             <div style="position: absolute; display: block; background: url('https://static.igem.org/mediawiki/2014/b/b9/Mr_slider_loading.gif') no-repeat center center;
                 top: 0px; left: 0px;width: 100%;height:100%;">
                 top: 0px; left: 0px;width: 100%;height:100%;">
             </div>
             </div>
Line 166: Line 180:
             overflow: hidden;">
             overflow: hidden;">
             <div>
             <div>
-
                 <a u=image href="#"><img src="https://static.igem.org/mediawiki/2014/d/d1/Mr_s1.jpg" /></a>
+
                 <a u=image href="https://2014.igem.org/Team:Marburg:Team"><img src="https://static.igem.org/mediawiki/2014/9/93/MR_slider_team.jpg" /></a>
             </div>
             </div>
             <div>
             <div>
-
                 <a u=image href="#"><img src="https://static.igem.org/mediawiki/2014/6/60/Mr_s2.jpg" /></a>
+
                 <a u=image href="https://2014.igem.org/Team:Marburg:Policy_Practices:Hessentag"><img src="https://static.igem.org/mediawiki/2014/9/9f/MR_slider_hessen.jpg" /></a>
             </div>
             </div>
             <div>
             <div>
-
                 <a u=image href="#"><img src="https://static.igem.org/mediawiki/2014/5/5f/Mr_s3.jpg" /></a>
+
                 <a u=image href="https://2014.igem.org/Team:Marburg:Policy_Practices"><img src="https://static.igem.org/mediawiki/2014/6/6f/MR_slider_blista.jpg" /></a>
             </div>
             </div>
             <div>
             <div>
-
                 <a u=image href="#"><img src="https://static.igem.org/mediawiki/2014/5/50/Mr_s4.jpg" /></a>
+
                 <a u=image href="https://static.igem.org/mediawiki/2014/f/fa/IGEM_Marburg_2014_-_The_SURFkiller.mp4" target="_blank"><img src="https://static.igem.org/mediawiki/2014/8/8e/MR_slider_surfkiller.jpg" /></a>
             </div>
             </div>
         </div>
         </div>
Line 181: Line 195:
         <!-- Bullet Navigator Skin Begin -->
         <!-- Bullet Navigator Skin Begin -->
         <!-- jssor slider bullet navigator skin 01 -->
         <!-- jssor slider bullet navigator skin 01 -->
-
        <style>
 
-
            /*
 
-
            .jssorb01 div          (normal)
 
-
            .jssorb01 div:hover    (normal mouseover)
 
-
            .jssorb01 .av          (active)
 
-
            .jssorb01 .av:hover    (active mouseover)
 
-
            .jssorb01 .dn          (mousedown)
 
-
            */
 
-
            .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av
 
-
            {
 
-
                filter: alpha(opacity=70);
 
-
                opacity: .7;
 
-
                overflow:hidden;
 
-
                cursor: pointer;
 
-
                border: #000 1px solid;
 
-
            }
 
-
            .jssorb01 div { background-color: gray; }
 
-
            .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
 
-
            .jssorb01 .av { background-color: #fff; }
 
-
            .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
 
-
        </style>
 
         <!-- bullet navigator container -->
         <!-- bullet navigator container -->
         <div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;">
         <div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;">
Line 207: Line 200:
             <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
             <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
         </div>
         </div>
-
        <!-- Bullet Navigator Skin End -->
 
-
       
 
-
        <!-- Arrow Navigator Skin Begin -->
 
-
        <style>
 
-
            /* jssor slider arrow navigator skin 05 css */
 
-
            /*
 
-
            .jssora05l              (normal)
 
-
            .jssora05r              (normal)
 
-
            .jssora05l:hover        (normal mouseover)
 
-
            .jssora05r:hover        (normal mouseover)
 
-
            .jssora05ldn            (mousedown)
 
-
            .jssora05rdn            (mousedown)
 
-
            */
 
-
            .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
 
-
            {
 
-
            position: absolute;
 
-
            cursor: pointer;
 
-
            display: block;
 
-
                background: url(../img/a17.png) no-repeat;
 
-
                overflow:hidden;
 
-
            }
 
-
            .jssora05l { background-position: -10px -40px; }
 
-
            .jssora05r { background-position: -70px -40px; }
 
-
            .jssora05l:hover { background-position: -130px -40px; }
 
-
            .jssora05r:hover { background-position: -190px -40px; }
 
-
            .jssora05ldn { background-position: -250px -40px; }
 
-
            .jssora05rdn { background-position: -310px -40px; }
 
-
        </style>
 
         <!-- Arrow Left -->
         <!-- Arrow Left -->
         <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;">
         <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;">

Latest revision as of 02:10, 18 October 2014

Retrieved from "http://2014.igem.org/Template:Team:Marburg/Template:Slider"