Template:Team:Marburg/Template:Slider

From 2014.igem.org

(Difference between revisions)
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 186: Line 226:
             <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>
 
-
            /*
 
-
            .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>
 
         <!-- 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;">
Line 244: Line 236:
     </div>
     </div>
     <!-- Jssor Slider End -->
     <!-- Jssor Slider End -->
-
 
-
<style>
 
-
#slider2_container {
 
-
position: relative;
 
-
width: 600px;
 
-
height: 300px;
 
-
margin: 0px auto;
 
-
border: 10px solid #FFF;
 
-
box-shadow: 2px 7px 5px #888;
 
-
top: -35px;
 
-
}
 
-
</style>
 
</html>
</html>

Revision as of 14:03, 7 October 2014