Template:Team:CBNU-Korea/css slide

From 2012.igem.org

(Difference between revisions)
 
(26 intermediate revisions not shown)
Line 4: Line 4:
         .slides_container
         .slides_container
         {
         {
-
             width: 570px;
+
            margin:0 auto;
-
             height: 270px;
+
             width: 650px;
 +
             height: 200px;
         }
         }
         .slides_container div
         .slides_container div
         {
         {
-
             width: 570px;
+
             width: 650px;
-
             height: 270px;
+
             height: 200px;
             display: block;
             display: block;
         }
         }
Line 20: Line 21:
         #slides
         #slides
         {
         {
-
             position: absolute;
+
             position: relative;
-
             top: 15px;
+
             #top: 15px;
-
             left: 4px;
+
             #left: 4px;
             z-index: 100;
             z-index: 100;
         }
         }
Line 35: Line 36:
         .slides_container
         .slides_container
         {
         {
-
             width: 570px;
+
             width: 650px;
             overflow: hidden;
             overflow: hidden;
             position: relative;
             position: relative;
Line 51: Line 52:
         .slides_container a
         .slides_container a
         {
         {
-
             width: 570px;
+
             width: 650px;
-
             height: 270px;
+
             height: 200px;
             display: block;
             display: block;
         }
         }
Line 60: Line 61:
             display: block;
             display: block;
         }
         }
-
    </style>
 
-
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
+
/*
 +
Pagination
 +
*/
-
    <script>
+
.pagination {
-
        (function (a) { a.fn.slides = function (b) { return b = a.extend({}, a.fn.slides.option, b), this.each(function () { function w(g, h, i) { if (!p && o) { p = !0, b.animationStart(n + 1); switch (g) { case "next": l = n, k = n + 1, k = e === k ? 0 : k, r = f * 2, g = -f * 2, n = k; break; case "prev": l = n, k = n - 1, k = k === -1 ? e - 1 : k, r = 0, g = 0, n = k; break; case "pagination": k = parseInt(i, 10), l = a("." + b.paginationClass + " li." + b.currentClass + " a", c).attr("href").match("[^#/]+$"), k > l ? (r = f * 2, g = -f * 2) : (r = 0, g = 0), n = k } h === "fade" ? b.crossfade ? d.children(":eq(" + k + ")", c).css({ zIndex: 10 }).fadeIn(b.fadeSpeed, b.fadeEasing, function () { b.autoHeight ? d.animate({ height: d.children(":eq(" + k + ")", c).outerHeight() }, b.autoHeightSpeed, function () { d.children(":eq(" + l + ")", c).css({ display: "none", zIndex: 0 }), d.children(":eq(" + k + ")", c).css({ zIndex: 0 }), b.animationComplete(k + 1), p = !1 }) : (d.children(":eq(" + l + ")", c).css({ display: "none", zIndex: 0 }), d.children(":eq(" + k + ")", c).css({ zIndex: 0 }), b.animationComplete(k + 1), p = !1) }) : d.children(":eq(" + l + ")", c).fadeOut(b.fadeSpeed, b.fadeEasing, function () { b.autoHeight ? d.animate({ height: d.children(":eq(" + k + ")", c).outerHeight() }, b.autoHeightSpeed, function () { d.children(":eq(" + k + ")", c).fadeIn(b.fadeSpeed, b.fadeEasing) }) : d.children(":eq(" + k + ")", c).fadeIn(b.fadeSpeed, b.fadeEasing, function () { a.browser.msie && a(this).get(0).style.removeAttribute("filter") }), b.animationComplete(k + 1), p = !1 }) : (d.children(":eq(" + k + ")").css({ left: r, display: "block" }), b.autoHeight ? d.animate({ left: g, height: d.children(":eq(" + k + ")").outerHeight() }, b.slideSpeed, b.slideEasing, function () { d.css({ left: -f }), d.children(":eq(" + k + ")").css({ left: f, zIndex: 5 }), d.children(":eq(" + l + ")").css({ left: f, display: "none", zIndex: 0 }), b.animationComplete(k + 1), p = !1 }) : d.animate({ left: g }, b.slideSpeed, b.slideEasing, function () { d.css({ left: -f }), d.children(":eq(" + k + ")").css({ left: f, zIndex: 5 }), d.children(":eq(" + l + ")").css({ left: f, display: "none", zIndex: 0 }), b.animationComplete(k + 1), p = !1 })), b.pagination && (a("." + b.paginationClass + " li." + b.currentClass, c).removeClass(b.currentClass), a("." + b.paginationClass + " li:eq(" + k + ")", c).addClass(b.currentClass)) } } function x() { clearInterval(c.data("interval")) } function y() { b.pause ? (clearTimeout(c.data("pause")), clearInterval(c.data("interval")), u = setTimeout(function () { clearTimeout(c.data("pause")), v = setInterval(function () { w("next", i) }, b.play), c.data("interval", v) }, b.pause), c.data("pause", u)) : x() } a("." + b.container, a(this)).children().wrapAll('<div class="slides_control"/>'); var c = a(this), d = a(".slides_control", c), e = d.children().size(), f = d.children().outerWidth(), g = d.children().outerHeight(), h = b.start - 1, i = b.effect.indexOf(",") < 0 ? b.effect : b.effect.replace(" ", "").split(",")[0], j = b.effect.indexOf(",") < 0 ? i : b.effect.replace(" ", "").split(",")[1], k = 0, l = 0, m = 0, n = 0, o, p, q, r, s, t, u, v; if (e < 2) return a("." + b.container, a(this)).fadeIn(b.fadeSpeed, b.fadeEasing, function () { o = !0, b.slidesLoaded() }), a("." + b.next + ", ." + b.prev).fadeOut(0), !1; if (e < 2) return; h < 0 && (h = 0), h > e && (h = e - 1), b.start && (n = h), b.randomize && d.randomize(), a("." + b.container, c).css({ overflow: "hidden", position: "relative" }), d.children().css({ position: "absolute", top: 0, left: d.children().outerWidth(), zIndex: 0, display: "none" }), d.css({ position: "relative", width: f * 3, height: g, left: -f }), a("." + b.container, c).css({ display: "block" }), b.autoHeight && (d.children().css({ height: "auto" }), d.animate({ height: d.children(":eq(" + h + ")").outerHeight() }, b.autoHeightSpeed)); if (b.preload && d.find("img:eq(" + h + ")").length) { a("." + b.container, c).css({ background: "url(" + b.preloadImage + ") no-repeat 50% 50%" }); var z = d.find("img:eq(" + h + ")").attr("src") + "?" + (new Date).getTime(); a("img", c).parent().attr("class") != "slides_control" ? t = d.children(":eq(0)")[0].tagName.toLowerCase() : t = d.find("img:eq(" + h + ")"), d.find("img:eq(" + h + ")").attr("src", z).load(function () { d.find(t + ":eq(" + h + ")").fadeIn(b.fadeSpeed, b.fadeEasing, function () { a(this).css({ zIndex: 5 }), a("." + b.container, c).css({ background: "" }), o = !0, b.slidesLoaded() }) }) } else d.children(":eq(" + h + ")").fadeIn(b.fadeSpeed, b.fadeEasing, function () { o = !0, b.slidesLoaded() }); b.bigTarget && (d.children().css({ cursor: "pointer" }), d.children().click(function () { return w("next", i), !1 })), b.hoverPause && b.play && (d.bind("mouseover", function () { x() }), d.bind("mouseleave", function () { y() })), b.generateNextPrev && (a("." + b.container, c).after('<a href="#" class="' + b.prev + '">Prev</a>'), a("." + b.prev, c).after('<a href="#" class="' + b.next + '">Next</a>')), a("." + b.next, c).click(function (a) { a.preventDefault(), b.play && y(), w("next", i) }), a("." + b.prev, c).click(function (a) { a.preventDefault(), b.play && y(), w("prev", i) }), b.generatePagination ? (b.prependPagination ? c.prepend("<ul class=" + b.paginationClass + "></ul>") : c.append("<ul class=" + b.paginationClass + "></ul>"), d.children().each(function () { a("." + b.paginationClass, c).append('<li><a href="#' + m + '">' + (m + 1) + "</a></li>"), m++ })) : a("." + b.paginationClass + " li a", c).each(function () { a(this).attr("href", "#" + m), m++ }), a("." + b.paginationClass + " li:eq(" + h + ")", c).addClass(b.currentClass), a("." + b.paginationClass + " li a", c).click(function () { return b.play && y(), q = a(this).attr("href").match("[^#/]+$"), n != q && w("pagination", j, q), !1 }), a("a.link", c).click(function () { return b.play && y(), q = a(this).attr("href").match("[^#/]+$") - 1, n != q && w("pagination", j, q), !1 }), b.play && (v = setInterval(function () { w("next", i) }, b.play), c.data("interval", v)) }) }, a.fn.slides.option = { preload: !1, preloadImage: "/img/loading.gif", container: "slides_container", generateNextPrev: !1, next: "next", prev: "prev", pagination: !0, generatePagination: !0, prependPagination: !1, paginationClass: "pagination", currentClass: "current", fadeSpeed: 350, fadeEasing: "", slideSpeed: 350, slideEasing: "", start: 1, effect: "slide", crossfade: !1, randomize: !1, play: 0, pause: 0, hoverPause: !1, autoHeight: !1, autoHeightSpeed: 350, bigTarget: !1, animationStart: function () { }, animationComplete: function () { }, slidesLoaded: function () { } }, a.fn.randomize = function (b) { function c() { return Math.round(Math.random()) - .5 } return a(this).each(function () { var d = a(this), e = d.children(), f = e.length; if (f > 1) { e.hide(); var g = []; for (i = 0; i < f; i++) g[g.length] = i; g = g.sort(c), a.each(g, function (a, c) { var f = e.eq(c), g = f.clone(!0); g.show().appendTo(d), b !== undefined && b(f, g), f.remove() }) } }) } })(jQuery);
+
margin:10px auto 0;
-
    </script>
+
width:100px;
 +
        padding-left: 38px;
 +
}
 +
 
 +
.pagination li {
 +
float:left;
 +
margin:0 1px;
 +
list-style:none;
 +
}
 +
 
 +
.pagination li a {
 +
display:block;
 +
width:12px;
 +
height:0;
 +
padding-top:12px;
 +
background-image:url(https://static.igem.org/mediawiki/2012/a/af/Pagination.png);
 +
background-position:0 0;
 +
float:left;
 +
overflow:hidden;
 +
}
 +
 
 +
.pagination li.current a {
 +
background-position:0 -12px;
 +
}
 +
 
 +
    </style>
 +
 
 +
    <script src="https://2012.igem.org/Template:Team:CBNU-Korea/js_jquery?action=raw"></script>
 +
    <script src="https://2012.igem.org/Template:Team:CBNU-Korea/js_slide?action=raw"></script>
 +
    <!--<script type="text/javascript" src="http://slidesjs.com/examples/standard/js/slides.min.jquery.js"></script>-->
     <script>
     <script>
         $(function () {
         $(function () {
Line 73: Line 104:
     </script>
     </script>
</head>
</head>
-
<body>
+
 
-
    <div id="slides">
+
-
        <div class="slides_container">
+
-
            <div>
+
-
                <img src="http://placehold.it/570x270">
+
-
            </div>
+
-
            <div>
+
-
                <img src="http://placehold.it/570x270">
+
-
            </div>
+
-
            <div>
+
-
                <img src="http://placehold.it/570x270">
+
-
            </div>
+
-
            <div>
+
-
                <img src="http://placehold.it/570x270">
+
-
            </div>
+
-
        </div>
+
-
    </div>
+
-
</body>
+
</html>
</html>

Latest revision as of 07:03, 23 August 2012