Team:UCSF/lily3

From 2013.igem.org

(Difference between revisions)
(Created page with "{{Template:UCSF/MainHeader}} <html> <head> <!--<script type="text/javascript" async="" src="https://2013.igem.org/Team:USTC-Software/js/camera?action=raw&ctype=text/javascript">--...")
Line 1: Line 1:
{{Template:UCSF/MainHeader}}
{{Template:UCSF/MainHeader}}
-
<html>
+
{{Template:UCSF/SlideShow}}
-
<head>
+
<style>
-
<!--<script type="text/javascript" async="" src="https://2013.igem.org/Team:USTC-Software/js/camera?action=raw&ctype=text/javascript">-->
+
/*======
-
<script type="text/javascript" async="">
+
Desktop Styling
-
    jQuery.easing['jswing'] = jQuery.easing['swing'];
+
======*/
-
 
+
-
    jQuery.extend(jQuery.easing,
+
/***Body styling***/
-
{
+
h1{
-
    def: 'easeOutQuad',
+
font-size: 2.5em;
-
    swing: function (x, t, b, c, d) {
+
-
        //alert(jQuery.easing.default);
+
-
        return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
+
-
    },
+
-
    easeInQuad: function (x, t, b, c, d) {
+
-
        return c * (t /= d) * t + b;
+
-
    },
+
-
    easeOutQuad: function (x, t, b, c, d) {
+
-
        return -c * (t /= d) * (t - 2) + b;
+
-
    },
+
-
    easeInOutQuad: function (x, t, b, c, d) {
+
-
        if ((t /= d / 2) < 1) return c / 2 * t * t + b;
+
-
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
+
-
    },
+
-
    easeInCubic: function (x, t, b, c, d) {
+
-
        return c * (t /= d) * t * t + b;
+
-
    },
+
-
    easeOutCubic: function (x, t, b, c, d) {
+
-
        return c * ((t = t / d - 1) * t * t + 1) + b;
+
-
    },
+
-
    easeInOutCubic: function (x, t, b, c, d) {
+
-
        if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
+
-
        return c / 2 * ((t -= 2) * t * t + 2) + b;
+
-
    },
+
-
    easeInQuart: function (x, t, b, c, d) {
+
-
        return c * (t /= d) * t * t * t + b;
+
-
    },
+
-
    easeOutQuart: function (x, t, b, c, d) {
+
-
        return -c * ((t = t / d - 1) * t * t * t - 1) + b;
+
-
    },
+
-
    easeInOutQuart: function (x, t, b, c, d) {
+
-
        if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
+
-
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
+
-
    },
+
-
    easeInQuint: function (x, t, b, c, d) {
+
-
        return c * (t /= d) * t * t * t * t + b;
+
-
    },
+
-
    easeOutQuint: function (x, t, b, c, d) {
+
-
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+
-
    },
+
-
    easeInOutQuint: function (x, t, b, c, d) {
+
-
        if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
+
-
        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+
-
    },
+
-
    easeInSine: function (x, t, b, c, d) {
+
-
        return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
+
-
    },
+
-
    easeOutSine: function (x, t, b, c, d) {
+
-
        return c * Math.sin(t / d * (Math.PI / 2)) + b;
+
-
    },
+
-
    easeInOutSine: function (x, t, b, c, d) {
+
-
        return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
+
-
    },
+
-
    easeInExpo: function (x, t, b, c, d) {
+
-
        return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
+
-
    },
+
-
    easeOutExpo: function (x, t, b, c, d) {
+
-
        return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
+
-
    },
+
-
    easeInOutExpo: function (x, t, b, c, d) {
+
-
        if (t == 0) return b;
+
-
        if (t == d) return b + c;
+
-
        if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
+
-
        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
+
-
    },
+
-
    easeInCirc: function (x, t, b, c, d) {
+
-
        return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
+
-
    },
+
-
    easeOutCirc: function (x, t, b, c, d) {
+
-
        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
+
-
    },
+
-
    easeInOutCirc: function (x, t, b, c, d) {
+
-
        if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
+
-
        return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
+
-
    },
+
-
    easeInElastic: function (x, t, b, c, d) {
+
-
        var s = 1.70158; var p = 0; var a = c;
+
-
        if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
+
-
        if (a < Math.abs(c)) { a = c; var s = p / 4; }
+
-
        else var s = p / (2 * Math.PI) * Math.asin(c / a);
+
-
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+
-
    },
+
-
    easeOutElastic: function (x, t, b, c, d) {
+
-
        var s = 1.70158; var p = 0; var a = c;
+
-
        if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
+
-
        if (a < Math.abs(c)) { a = c; var s = p / 4; }
+
-
        else var s = p / (2 * Math.PI) * Math.asin(c / a);
+
-
        return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
+
-
    },
+
-
    easeInOutElastic: function (x, t, b, c, d) {
+
-
        var s = 1.70158; var p = 0; var a = c;
+
-
        if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
+
-
        if (a < Math.abs(c)) { a = c; var s = p / 4; }
+
-
        else var s = p / (2 * Math.PI) * Math.asin(c / a);
+
-
        if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+
-
        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
+
-
    },
+
-
    easeInBack: function (x, t, b, c, d, s) {
+
-
        if (s == undefined) s = 1.70158;
+
-
        return c * (t /= d) * t * ((s + 1) * t - s) + b;
+
-
    },
+
-
    easeOutBack: function (x, t, b, c, d, s) {
+
-
        if (s == undefined) s = 1.70158;
+
-
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+
-
    },
+
-
    easeInOutBack: function (x, t, b, c, d, s) {
+
-
        if (s == undefined) s = 1.70158;
+
-
        if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
+
-
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
+
-
    },
+
-
    easeInBounce: function (x, t, b, c, d) {
+
-
        return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b;
+
-
    },
+
-
    easeOutBounce: function (x, t, b, c, d) {
+
-
        if ((t /= d) < (1 / 2.75)) {
+
-
            return c * (7.5625 * t * t) + b;
+
-
        } else if (t < (2 / 2.75)) {
+
-
            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
+
-
        } else if (t < (2.5 / 2.75)) {
+
-
            return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
+
-
        } else {
+
-
            return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
+
-
        }
+
-
    },
+
-
    easeInOutBounce: function (x, t, b, c, d) {
+
-
        if (t < d / 2) return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b;
+
-
        return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b;
+
-
    }
+
-
});
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
    ; (function (a) { a.fn.camera = function (b, c) { function e() { if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { return true } } function H() { var b = a(s).width(); a("li", s).removeClass("camera_visThumb"); a("li", s).each(function () { var c = a(this).position(), d = a("ul", s).outerWidth(), e = a("ul", s).offset().left, f = a("> div", s).offset().left, g = f - e; if (g > 0) { a(".camera_prevThumbs", V).removeClass("hideNav") } else { a(".camera_prevThumbs", V).addClass("hideNav") } if (d - g > b) { a(".camera_nextThumbs", V).removeClass("hideNav") } else { a(".camera_nextThumbs", V).addClass("hideNav") } var h = c.left, i = c.left + a(this).width(); if (i - g <= b && h - g >= 0) { a(this).addClass("camera_visThumb") } }) } function K() { function d() { t = f.width(); if (b.height.indexOf("%") != -1) { var c = Math.round(t / (100 / parseFloat(b.height))); if (b.minHeight != "" && c < parseFloat(b.minHeight)) { u = parseFloat(b.minHeight) } else { u = c } f.css({ height: u }) } else if (b.height == "auto") { u = f.height() } else { u = parseFloat(b.height); f.css({ height: u }) } a(".camerarelative", k).css({ width: t, height: u }); a(".imgLoaded", k).each(function () { var c = a(this), d = c.attr("width"), e = c.attr("height"), f = c.index(), g, h, i = c.attr("data-alignment"), j = c.attr("data-portrait"); if (typeof i === "undefined" || i === false || i === "") { i = b.alignment } if (typeof j === "undefined" || j === false || j === "") { j = b.portrait } if (j == false || j == "false") { if (d / e < t / u) { var k = t / d; var l = Math.abs(u - e * k) * .5; switch (i) { case "topLeft": g = 0; break; case "topCenter": g = 0; break; case "topRight": g = 0; break; case "centerLeft": g = "-" + l + "px"; break; case "center": g = "-" + l + "px"; break; case "centerRight": g = "-" + l + "px"; break; case "bottomLeft": g = "-" + l * 2 + "px"; break; case "bottomCenter": g = "-" + l * 2 + "px"; break; case "bottomRight": g = "-" + l * 2 + "px"; break } c.css({ height: e * k, "margin-left": 0, "margin-top": g, position: "absolute", visibility: "visible", width: t }) } else { var k = u / e; var l = Math.abs(t - d * k) * .5; switch (i) { case "topLeft": h = 0; break; case "topCenter": h = "-" + l + "px"; break; case "topRight": h = "-" + l * 2 + "px"; break; case "centerLeft": h = 0; break; case "center": h = "-" + l + "px"; break; case "centerRight": h = "-" + l * 2 + "px"; break; case "bottomLeft": h = 0; break; case "bottomCenter": h = "-" + l + "px"; break; case "bottomRight": h = "-" + l * 2 + "px"; break } c.css({ height: u, "margin-left": h, "margin-top": 0, position: "absolute", visibility: "visible", width: d * k }) } } else { if (d / e < t / u) { var k = u / e; var l = Math.abs(t - d * k) * .5; switch (i) { case "topLeft": h = 0; break; case "topCenter": h = l + "px"; break; case "topRight": h = l * 2 + "px"; break; case "centerLeft": h = 0; break; case "center": h = l + "px"; break; case "centerRight": h = l * 2 + "px"; break; case "bottomLeft": h = 0; break; case "bottomCenter": h = l + "px"; break; case "bottomRight": h = l * 2 + "px"; break } c.css({ height: u, "margin-left": h, "margin-top": 0, position: "absolute", visibility: "visible", width: d * k }) } else { var k = t / d; var l = Math.abs(u - e * k) * .5; switch (i) { case "topLeft": g = 0; break; case "topCenter": g = 0; break; case "topRight": g = 0; break; case "centerLeft": g = l + "px"; break; case "center": g = l + "px"; break; case "centerRight": g = l + "px"; break; case "bottomLeft": g = l * 2 + "px"; break; case "bottomCenter": g = l * 2 + "px"; break; case "bottomRight": g = l * 2 + "px"; break } c.css({ height: e * k, "margin-left": 0, "margin-top": g, position: "absolute", visibility: "visible", width: t }) } } }) } var c; if (I == true) { clearTimeout(c); c = setTimeout(d, 200) } else { d() } I = true } function X(a) { for (var b, c, d = a.length; d; b = parseInt(Math.random() * d), c = a[--d], a[d] = a[b], a[b] = c); return a } function Y(a) { return Math.ceil(a) == Math.floor(a) } function hb() { if (a(s).length && !a(r).length) { var b = a(s).outerWidth(), c = a("ul > li", s).outerWidth(), d = a("li.cameracurrent", s).length ? a("li.cameracurrent", s).position() : "", e = a("ul > li", s).length * a("ul > li", s).outerWidth(), g = a("ul", s).offset().left, h = a("> div", s).offset().left, i; if (g < 0) { i = "-" + (h - g) } else { i = h - g } if (gb == true) { a("ul", s).width(a("ul > li", s).length * a("ul > li", s).outerWidth()); if (a(s).length && !a(r).lenght) { f.css({ marginBottom: a(s).outerHeight() }) } H(); a("ul", s).width(a("ul > li", s).length * a("ul > li", s).outerWidth()); if (a(s).length && !a(r).lenght) { f.css({ marginBottom: a(s).outerHeight() }) } } gb = false; var j = a("li.cameracurrent", s).length ? d.left : "", k = a("li.cameracurrent", s).length ? d.left + a("li.cameracurrent", s).outerWidth() : ""; if (j < a("li.cameracurrent", s).outerWidth()) { j = 0 } if (k - i > b) { if (j + b < e) { a("ul", s).animate({ "margin-left": "-" + j + "px" }, 500, H) } else { a("ul", s).animate({ "margin-left": "-" + (a("ul", s).outerWidth() - b) + "px" }, 500, H) } } else if (j - i < 0) { a("ul", s).animate({ "margin-left": "-" + j + "px" }, 500, H) } else { a("ul", s).css({ "margin-left": "auto", "margin-right": "auto" }); setTimeout(H, 100) } } } function ib() { bb = 0; var c = a(".camera_bar_cont", V).width(), d = a(".camera_bar_cont", V).height(); if (h != "pie") { switch (U) { case "leftToRight": a("#" + i).css({ right: c }); break; case "rightToLeft": a("#" + i).css({ left: c }); break; case "topToBottom": a("#" + i).css({ bottom: d }); break; case "bottomToTop": a("#" + i).css({ top: d }); break } } else { db.clearRect(0, 0, b.pieDiameter, b.pieDiameter) } } function jb(c) { j.addClass("camerasliding"); R = false; var d = parseFloat(a("div.cameraSlide.cameracurrent", k).index()); if (c > 0) { var l = c - 1 } else if (d == B - 1) { var l = 0 } else { var l = d + 1 } var m = a(".cameraSlide:eq(" + l + ")", k); var n = a(".cameraSlide:eq(" + (l + 1) + ")", k).addClass("cameranext"); if (d != l + 1) { n.hide() } a(".cameraContent", g).fadeOut(600); a(".camera_caption", g).show(); a(".camerarelative", m).append(a("> div ", j).eq(l).find("> div.camera_effected")); a(".camera_target_content .cameraContent:eq(" + l + ")", f).append(a("> div ", j).eq(l).find("> div")); if (!a(".imgLoaded", m).length) { var o = v[l]; var p = new Image; p.src = o + "?" + (new Date).getTime(); m.css("visibility", "hidden"); m.prepend(a(p).attr("class", "imgLoaded").css("visibility", "hidden")); var q, w; if (!a(p).get(0).complete || q == "0" || w == "0" || typeof q === "undefined" || q === false || typeof w === "undefined" || w === false) { a(".camera_loader", f).delay(500).fadeIn(400); p.onload = function () { q = p.naturalWidth; w = p.naturalHeight; a(p).attr("data-alignment", z[l]).attr("data-portrait", y[l]); a(p).attr("width", q); a(p).attr("height", w); k.find(".cameraSlide_" + l).hide().css("visibility", "visible"); K(); jb(l + 1) } } } else { if (v.length > l + 1 && !a(".imgLoaded", n).length) { var x = v[l + 1]; var A = new Image; A.src = x + "?" + (new Date).getTime(); n.prepend(a(A).attr("class", "imgLoaded").css("visibility", "hidden")); A.onload = function () { q = A.naturalWidth; w = A.naturalHeight; a(A).attr("data-alignment", z[l + 1]).attr("data-portrait", y[l + 1]); a(A).attr("width", q); a(A).attr("height", w); K() } } b.onLoaded.call(this); if (a(".camera_loader", f).is(":visible")) { a(".camera_loader", f).fadeOut(400) } else { a(".camera_loader", f).css({ visibility: "hidden" }); a(".camera_loader", f).fadeOut(400, function () { a(".camera_loader", f).css({ visibility: "visible" }) }) } var C = b.rows, D = b.cols, F = 1, G = 0, H, I, J, N, O, P = new Array("simpleFade", "curtainTopLeft", "curtainTopRight", "curtainBottomLeft", "curtainBottomRight", "curtainSliceLeft", "curtainSliceRight", "blindCurtainTopLeft", "blindCurtainTopRight", "blindCurtainBottomLeft", "blindCurtainBottomRight", "blindCurtainSliceBottom", "blindCurtainSliceTop", "stampede", "mosaic", "mosaicReverse", "mosaicRandom", "mosaicSpiral", "mosaicSpiralReverse", "topLeftBottomRight", "bottomRightTopLeft", "bottomLeftTopRight", "topRightBottomLeft", "scrollLeft", "scrollRight", "scrollTop", "scrollBottom", "scrollHorz"); marginLeft = 0, marginTop = 0, opacityOnGrid = 0; if (b.opacityOnGrid == true) { opacityOnGrid = 0 } else { opacityOnGrid = 1 } var Q = a(" > div", j).eq(l).attr("data-fx"); if (e() && b.mobileFx != "" && b.mobileFx != "default") { N = b.mobileFx } else { if (typeof Q !== "undefined" && Q !== false && Q !== "default") { N = Q } else { N = b.fx } } if (N == "random") { N = X(P); N = N[0] } else { N = N; if (N.indexOf(",") > 0) { N = N.replace(/ /g, ""); N = N.split(","); N = X(N); N = N[0] } } dataEasing = a(" > div", j).eq(l).attr("data-easing"); mobileEasing = a(" > div", j).eq(l).attr("data-mobileEasing"); if (e() && b.mobileEasing != "" && b.mobileEasing != "default") { if (typeof mobileEasing !== "undefined" && mobileEasing !== false && mobileEasing !== "default") { O = mobileEasing } else { O = b.mobileEasing } } else { if (typeof dataEasing !== "undefined" && dataEasing !== false && dataEasing !== "default") { O = dataEasing } else { O = b.easing } } H = a(" > div", j).eq(l).attr("data-slideOn"); if (typeof H !== "undefined" && H !== false) { T = H } else { if (b.slideOn == "random") { var T = new Array("next", "prev"); T = X(T); T = T[0] } else { T = b.slideOn } } var Y = a(" > div", j).eq(l).attr("data-time"); if (typeof Y !== "undefined" && Y !== false && Y !== "") { I = parseFloat(Y) } else { I = b.time } var Z = a(" > div", j).eq(l).attr("data-transPeriod"); if (typeof Z !== "undefined" && Z !== false && Z !== "") { J = parseFloat(Z) } else { J = b.transPeriod } if (!a(j).hasClass("camerastarted")) { N = "simpleFade"; T = "next"; O = ""; J = 400; a(j).addClass("camerastarted") } switch (N) { case "simpleFade": D = 1; C = 1; break; case "curtainTopLeft": if (b.slicedCols == 0) { D = b.cols } else { D = b.slicedCols } C = 1; break; case "curtainTopRight": if (b.slicedCols == 0) { D = b.cols } else { D = b.slicedCols } C = 1; break; case "curtainBottomLeft": if (b.slicedCols == 0) { D = b.cols } else { D = b.slicedCols } C = 1; break; case "curtainBottomRight": if (b.slicedCols == 0) { D = b.cols } else { D = b.slicedCols } C = 1; break; case "curtainSliceLeft": if (b.slicedCols == 0) { D = b.cols } else { D = b.slicedCols } C = 1; break; case "curtainSliceRight": if (b.slicedCols == 0) { D = b.cols } else { D = b.slicedCols } C = 1; break; case "blindCurtainTopLeft": if (b.slicedRows == 0) { C = b.rows } else { C = b.slicedRows } D = 1; break; case "blindCurtainTopRight": if (b.slicedRows == 0) { C = b.rows } else { C = b.slicedRows } D = 1; break; case "blindCurtainBottomLeft": if (b.slicedRows == 0) { C = b.rows } else { C = b.slicedRows } D = 1; break; case "blindCurtainBottomRight": if (b.slicedRows == 0) { C = b.rows } else { C = b.slicedRows } D = 1; break; case "blindCurtainSliceTop": if (b.slicedRows == 0) { C = b.rows } else { C = b.slicedRows } D = 1; break; case "blindCurtainSliceBottom": if (b.slicedRows == 0) { C = b.rows } else { C = b.slicedRows } D = 1; break; case "stampede": G = "-" + J; break; case "mosaic": G = b.gridDifference; break; case "mosaicReverse": G = b.gridDifference; break; case "mosaicRandom": break; case "mosaicSpiral": G = b.gridDifference; F = 1.7; break; case "mosaicSpiralReverse": G = b.gridDifference; F = 1.7; break; case "topLeftBottomRight": G = b.gridDifference; F = 6; break; case "bottomRightTopLeft": G = b.gridDifference; F = 6; break; case "bottomLeftTopRight": G = b.gridDifference; F = 6; break; case "topRightBottomLeft": G = b.gridDifference; F = 6; break; case "scrollLeft": D = 1; C = 1; break; case "scrollRight": D = 1; C = 1; break; case "scrollTop": D = 1; C = 1; break; case "scrollBottom": D = 1; C = 1; break; case "scrollHorz": D = 1; C = 1; break } var _ = 0; var ab = C * D; var eb = t - Math.floor(t / D) * D; var fb = u - Math.floor(u / C) * C; var gb; var kb; var lb = 0; var mb = 0; var nb = new Array; var ob = new Array; var pb = new Array; while (_ < ab) { nb.push(_); ob.push(_); E.append('<div class="cameraappended" style="display:none; overflow:hidden; position:absolute; z-index:1000" />'); var qb = a(".cameraappended:eq(" + _ + ")", k); if (N == "scrollLeft" || N == "scrollRight" || N == "scrollTop" || N == "scrollBottom" || N == "scrollHorz") { S.eq(l).clone().show().appendTo(qb) } else { if (T == "next") { S.eq(l).clone().show().appendTo(qb) } else { S.eq(d).clone().show().appendTo(qb) } } if (_ % D < eb) { gb = 1 } else { gb = 0 } if (_ % D == 0) { lb = 0 } if (Math.floor(_ / D) < fb) { kb = 1 } else { kb = 0 } qb.css({ height: Math.floor(u / C + kb + 1), left: lb, top: mb, width: Math.floor(t / D + gb + 1) }); a("> .cameraSlide", qb).css({ height: u, "margin-left": "-" + lb + "px", "margin-top": "-" + mb + "px", width: t }); lb = lb + qb.width() - 1; if (_ % D == D - 1) { mb = mb + qb.height() - 1 } _++ } switch (N) { case "curtainTopLeft": break; case "curtainBottomLeft": break; case "curtainSliceLeft": break; case "curtainTopRight": nb = nb.reverse(); break; case "curtainBottomRight": nb = nb.reverse(); break; case "curtainSliceRight": nb = nb.reverse(); break; case "blindCurtainTopLeft": break; case "blindCurtainBottomLeft": nb = nb.reverse(); break; case "blindCurtainSliceTop": break; case "blindCurtainTopRight": break; case "blindCurtainBottomRight": nb = nb.reverse(); break; case "blindCurtainSliceBottom": nb = nb.reverse(); break; case "stampede": nb = X(nb); break; case "mosaic": break; case "mosaicReverse": nb = nb.reverse(); break; case "mosaicRandom": nb = X(nb); break; case "mosaicSpiral": var rb = C / 2, sb, tb, ub, vb = 0; for (ub = 0; ub < rb; ub++) { tb = ub; for (sb = ub; sb < D - ub - 1; sb++) { pb[vb++] = tb * D + sb } sb = D - ub - 1; for (tb = ub; tb < C - ub - 1; tb++) { pb[vb++] = tb * D + sb } tb = C - ub - 1; for (sb = D - ub - 1; sb > ub; sb--) { pb[vb++] = tb * D + sb } sb = ub; for (tb = C - ub - 1; tb > ub; tb--) { pb[vb++] = tb * D + sb } } nb = pb; break; case "mosaicSpiralReverse": var rb = C / 2, sb, tb, ub, vb = ab - 1; for (ub = 0; ub < rb; ub++) { tb = ub; for (sb = ub; sb < D - ub - 1; sb++) { pb[vb--] = tb * D + sb } sb = D - ub - 1; for (tb = ub; tb < C - ub - 1; tb++) { pb[vb--] = tb * D + sb } tb = C - ub - 1; for (sb = D - ub - 1; sb > ub; sb--) { pb[vb--] = tb * D + sb } sb = ub; for (tb = C - ub - 1; tb > ub; tb--) { pb[vb--] = tb * D + sb } } nb = pb; break; case "topLeftBottomRight": for (var tb = 0; tb < C; tb++) for (var sb = 0; sb < D; sb++) { pb.push(sb + tb) } ob = pb; break; case "bottomRightTopLeft": for (var tb = 0; tb < C; tb++) for (var sb = 0; sb < D; sb++) { pb.push(sb + tb) } ob = pb.reverse(); break; case "bottomLeftTopRight": for (var tb = C; tb > 0; tb--) for (var sb = 0; sb < D; sb++) { pb.push(sb + tb) } ob = pb; break; case "topRightBottomLeft": for (var tb = 0; tb < C; tb++) for (var sb = D; sb > 0; sb--) { pb.push(sb + tb) } ob = pb; break } a.each(nb, function (c, e) { function o() { a(this).addClass("cameraeased"); if (a(".cameraeased", k).length >= 0) { a(s).css({ visibility: "visible" }) } if (a(".cameraeased", k).length == ab) { hb(); a(".moveFromLeft, .moveFromRight, .moveFromTop, .moveFromBottom, .fadeIn, .fadeFromLeft, .fadeFromRight, .fadeFromTop, .fadeFromBottom", g).each(function () { a(this).css("visibility", "hidden") }); S.eq(l).show().css("z-index", "999").removeClass("cameranext").addClass("cameracurrent"); S.eq(d).css("z-index", "1").removeClass("cameracurrent"); a(".cameraContent", g).eq(l).addClass("cameracurrent"); if (d >= 0) { a(".cameraContent", g).eq(d).removeClass("cameracurrent") } b.onEndTransition.call(this); if (a("> div", j).eq(l).attr("data-video") != "hide" && a(".cameraContent.cameracurrent .imgFake", g).length) { a(".cameraContent.cameracurrent .imgFake", g).click() } var c = S.eq(l).find(".fadeIn").length; var e = a(".cameraContent", g).eq(l).find(".moveFromLeft, .moveFromRight, .moveFromTop, .moveFromBottom, .fadeIn, .fadeFromLeft, .fadeFromRight, .fadeFromTop, .fadeFromBottom").length; if (c != 0) { a(".cameraSlide.cameracurrent .fadeIn", g).each(function () { if (a(this).attr("data-easing") != "") { var b = a(this).attr("data-easing") } else { var b = O } var d = a(this); if (typeof d.attr("data-outerWidth") === "undefined" || d.attr("data-outerWidth") === false || d.attr("data-outerWidth") === "") { var e = d.outerWidth(); d.attr("data-outerWidth", e) } else { var e = d.attr("data-outerWidth") } if (typeof d.attr("data-outerHeight") === "undefined" || d.attr("data-outerHeight") === false || d.attr("data-outerHeight") === "") { var f = d.outerHeight(); d.attr("data-outerHeight", f) } else { var f = d.attr("data-outerHeight") } var g = d.position(); var h = g.left; var i = g.top; var j = d.attr("class"); var k = d.index(); var l = d.parents(".camerarelative").outerHeight(); var m = d.parents(".camerarelative").outerWidth(); if (j.indexOf("fadeIn") != -1) { d.animate({ opacity: 0 }, 0).css("visibility", "visible").delay(I / c * .1 * (k - 1)).animate({ opacity: 1 }, I / c * .15, b) } else { d.css("visibility", "visible") } }) } a(".cameraContent.cameracurrent", g).show(); if (e != 0) { a(".cameraContent.cameracurrent .moveFromLeft, .cameraContent.cameracurrent .moveFromRight, .cameraContent.cameracurrent .moveFromTop, .cameraContent.cameracurrent .moveFromBottom, .cameraContent.cameracurrent .fadeIn, .cameraContent.cameracurrent .fadeFromLeft, .cameraContent.cameracurrent .fadeFromRight, .cameraContent.cameracurrent .fadeFromTop, .cameraContent.cameracurrent .fadeFromBottom", g).each(function () { if (a(this).attr("data-easing") != "") { var b = a(this).attr("data-easing") } else { var b = O } var c = a(this); var d = c.position(); var f = d.left; var g = d.top; var h = c.attr("class"); var i = c.index(); var j = c.outerHeight(); if (h.indexOf("moveFromLeft") != -1) { c.css({ left: "-" + t + "px", right: "auto" }); c.css("visibility", "visible").delay(I / e * .1 * (i - 1)).animate({ left: d.left }, I / e * .15, b) } else if (h.indexOf("moveFromRight") != -1) { c.css({ left: t + "px", right: "auto" }); c.css("visibility", "visible").delay(I / e * .1 * (i - 1)).animate({ left: d.left }, I / e * .15, b) } else if (h.indexOf("moveFromTop") != -1) { c.css({ top: "-" + u + "px", bottom: "auto" }); c.css("visibility", "visible").delay(I / e * .1 * (i - 1)).animate({ top: d.top }, I / e * .15, b, function () { c.css({ top: "auto", bottom: 0 }) }) } else if (h.indexOf("moveFromBottom") != -1) { c.css({ top: u + "px", bottom: "auto" }); c.css("visibility", "visible").delay(I / e * .1 * (i - 1)).animate({ top: d.top }, I / e * .15, b) } else if (h.indexOf("fadeFromLeft") != -1) { c.animate({ opacity: 0 }, 0).css({ left: "-" + t + "px", right: "auto" }); c.css("visibility", "visible").delay(I / e * .1 * (i - 1)).animate({ left: d.left, opacity: 1 }, I / e * .15, b) } else if (h.indexOf("fadeFromRight") != -1) { c.animate({ opacity: 0 }, 0).css({ left: t + "px", right: "auto" }); c.css("visibility", "visible").delay(I / e * .1 * (i - 1)).animate({ left: d.left, opacity: 1 }, I / e * .15, b) } else if (h.indexOf("fadeFromTop") != -1) { c.animate({ opacity: 0 }, 0).css({ top: "-" + u + "px", bottom: "auto" }); c.css("visibility", "visible").delay(I / e * .1 * (i - 1)).animate({ top: d.top, opacity: 1 }, I / e * .15, b, function () { c.css({ top: "auto", bottom: 0 }) }) } else if (h.indexOf("fadeFromBottom") != -1) { c.animate({ opacity: 0 }, 0).css({ bottom: "-" + j + "px" }); c.css("visibility", "visible").delay(I / e * .1 * (i - 1)).animate({ bottom: "0", opacity: 1 }, I / e * .15, b) } else if (h.indexOf("fadeIn") != -1) { c.animate({ opacity: 0 }, 0).css("visibility", "visible").delay(I / e * .1 * (i - 1)).animate({ opacity: 1 }, I / e * .15, b) } else { c.css("visibility", "visible") } }) } a(".cameraappended", k).remove(); j.removeClass("camerasliding"); S.eq(d).hide(); var f = a(".camera_bar_cont", V).width(), m = a(".camera_bar_cont", V).height(), o; if (h != "pie") { o = .05 } else { o = .005 } a("#" + i).animate({ opacity: b.loaderOpacity }, 200); L = setInterval(function () { if (j.hasClass("stopped")) { clearInterval(L) } if (h != "pie") { if (bb <= 1.002 && !j.hasClass("stopped") && !j.hasClass("paused") && !j.hasClass("hovered")) { bb = bb + o } else if (bb <= 1 && (j.hasClass("stopped") || j.hasClass("paused") || j.hasClass("stopped") || j.hasClass("hovered"))) { bb = bb } else { if (!j.hasClass("stopped") && !j.hasClass("paused") && !j.hasClass("hovered")) { clearInterval(L); W(); a("#" + i).animate({ opacity: 0 }, 200, function () { clearTimeout(M); M = setTimeout(ib, n); jb(); b.onStartLoading.call(this) }) } } switch (U) { case "leftToRight": a("#" + i).animate({ right: f - f * bb }, I * o, "linear"); break; case "rightToLeft": a("#" + i).animate({ left: f - f * bb }, I * o, "linear"); break; case "topToBottom": a("#" + i).animate({ bottom: m - m * bb }, I * o, "linear"); break; case "bottomToTop": a("#" + i).animate({ bottom: m - m * bb }, I * o, "linear"); break } } else { cb = bb; db.clearRect(0, 0, b.pieDiameter, b.pieDiameter); db.globalCompositeOperation = "destination-over"; db.beginPath(); db.arc(b.pieDiameter / 2, b.pieDiameter / 2, b.pieDiameter / 2 - b.loaderStroke, 0, Math.PI * 2, false); db.lineWidth = b.loaderStroke; db.strokeStyle = b.loaderBgColor; db.stroke(); db.closePath(); db.globalCompositeOperation = "source-over"; db.beginPath(); db.arc(b.pieDiameter / 2, b.pieDiameter / 2, b.pieDiameter / 2 - b.loaderStroke, 0, Math.PI * 2 * cb, false); db.lineWidth = b.loaderStroke - b.loaderPadding * 2; db.strokeStyle = b.loaderColor; db.stroke(); db.closePath(); if (bb <= 1.002 && !j.hasClass("stopped") && !j.hasClass("paused") && !j.hasClass("hovered")) { bb = bb + o } else if (bb <= 1 && (j.hasClass("stopped") || j.hasClass("paused") || j.hasClass("hovered"))) { bb = bb } else { if (!j.hasClass("stopped") && !j.hasClass("paused") && !j.hasClass("hovered")) { clearInterval(L); W(); a("#" + i + ", .camera_canvas_wrap", V).animate({ opacity: 0 }, 200, function () { clearTimeout(M); M = setTimeout(ib, n); jb(); b.onStartLoading.call(this) }) } } } }, I * o) } } if (e % D < eb) { gb = 1 } else { gb = 0 } if (e % D == 0) { lb = 0 } if (Math.floor(e / D) < fb) { kb = 1 } else { kb = 0 } switch (N) { case "simpleFade": height = u; width = t; opacityOnGrid = 0; break; case "curtainTopLeft": height = 0, width = Math.floor(t / D + gb + 1), marginTop = "-" + Math.floor(u / C + kb + 1) + "px"; break; case "curtainTopRight": height = 0, width = Math.floor(t / D + gb + 1), marginTop = "-" + Math.floor(u / C + kb + 1) + "px"; break; case "curtainBottomLeft": height = 0, width = Math.floor(t / D + gb + 1), marginTop = Math.floor(u / C + kb + 1) + "px"; break; case "curtainBottomRight": height = 0, width = Math.floor(t / D + gb + 1), marginTop = Math.floor(u / C + kb + 1) + "px"; break; case "curtainSliceLeft": height = 0, width = Math.floor(t / D + gb + 1); if (e % 2 == 0) { marginTop = Math.floor(u / C + kb + 1) + "px" } else { marginTop = "-" + Math.floor(u / C + kb + 1) + "px" } break; case "curtainSliceRight": height = 0, width = Math.floor(t / D + gb + 1); if (e % 2 == 0) { marginTop = Math.floor(u / C + kb + 1) + "px" } else { marginTop = "-" + Math.floor(u / C + kb + 1) + "px" } break; case "blindCurtainTopLeft": height = Math.floor(u / C + kb + 1), width = 0, marginLeft = "-" + Math.floor(t / D + gb + 1) + "px"; break; case "blindCurtainTopRight": height = Math.floor(u / C + kb + 1), width = 0, marginLeft = Math.floor(t / D + gb + 1) + "px"; break; case "blindCurtainBottomLeft": height = Math.floor(u / C + kb + 1), width = 0, marginLeft = "-" + Math.floor(t / D + gb + 1) + "px"; break; case "blindCurtainBottomRight": height = Math.floor(u / C + kb + 1), width = 0, marginLeft = Math.floor(t / D + gb + 1) + "px"; break; case "blindCurtainSliceBottom": height = Math.floor(u / C + kb + 1), width = 0; if (e % 2 == 0) { marginLeft = "-" + Math.floor(t / D + gb + 1) + "px" } else { marginLeft = Math.floor(t / D + gb + 1) + "px" } break; case "blindCurtainSliceTop": height = Math.floor(u / C + kb + 1), width = 0; if (e % 2 == 0) { marginLeft = "-" + Math.floor(t / D + gb + 1) + "px" } else { marginLeft = Math.floor(t / D + gb + 1) + "px" } break; case "stampede": height = 0; width = 0; marginLeft = t * .2 * (c % D - (D - Math.floor(D / 2))) + "px"; marginTop = u * .2 * (Math.floor(c / D) + 1 - (C - Math.floor(C / 2))) + "px"; break; case "mosaic": height = 0; width = 0; break; case "mosaicReverse": height = 0; width = 0; marginLeft = Math.floor(t / D + gb + 1) + "px"; marginTop = Math.floor(u / C + kb + 1) + "px"; break; case "mosaicRandom": height = 0; width = 0; marginLeft = Math.floor(t / D + gb + 1) * .5 + "px"; marginTop = Math.floor(u / C + kb + 1) * .5 + "px"; break; case "mosaicSpiral": height = 0; width = 0; marginLeft = Math.floor(t / D + gb + 1) * .5 + "px"; marginTop = Math.floor(u / C + kb + 1) * .5 + "px"; break; case "mosaicSpiralReverse": height = 0; width = 0; marginLeft = Math.floor(t / D + gb + 1) * .5 + "px"; marginTop = Math.floor(u / C + kb + 1) * .5 + "px"; break; case "topLeftBottomRight": height = 0; width = 0; break; case "bottomRightTopLeft": height = 0; width = 0; marginLeft = Math.floor(t / D + gb + 1) + "px"; marginTop = Math.floor(u / C + kb + 1) + "px"; break; case "bottomLeftTopRight": height = 0; width = 0; marginLeft = 0; marginTop = Math.floor(u / C + kb + 1) + "px"; break; case "topRightBottomLeft": height = 0; width = 0; marginLeft = Math.floor(t / D + gb + 1) + "px"; marginTop = 0; break; case "scrollRight": height = u; width = t; marginLeft = -t; break; case "scrollLeft": height = u; width = t; marginLeft = t; break; case "scrollTop": height = u; width = t; marginTop = u; break; case "scrollBottom": height = u; width = t; marginTop = -u; break; case "scrollHorz": height = u; width = t; if (d == 0 && l == B - 1) { marginLeft = -t } else if (d < l || d == B - 1 && l == 0) { marginLeft = t } else { marginLeft = -t } break } var m = a(".cameraappended:eq(" + e + ")", k); if (typeof L !== "undefined") { clearInterval(L); clearTimeout(M); M = setTimeout(ib, J + G) } if (a(r).length) { a(".camera_pag li", f).removeClass("cameracurrent"); a(".camera_pag li", f).eq(l).addClass("cameracurrent") } if (a(s).length) { a("li", s).removeClass("cameracurrent"); a("li", s).eq(l).addClass("cameracurrent"); a("li", s).not(".cameracurrent").find("img").animate({ opacity: .5 }, 0); a("li.cameracurrent img", s).animate({ opacity: 1 }, 0); a("li", s).hover(function () { a("img", this).stop(true, false).animate({ opacity: 1 }, 150) }, function () { if (!a(this).hasClass("cameracurrent")) { a("img", this).stop(true, false).animate({ opacity: .5 }, 150) } }) } var n = parseFloat(J) + parseFloat(G); if (N == "scrollLeft" || N == "scrollRight" || N == "scrollTop" || N == "scrollBottom" || N == "scrollHorz") { b.onStartTransition.call(this); n = 0; m.delay((J + G) / ab * ob[c] * F * .5).css({ display: "block", height: height, "margin-left": marginLeft, "margin-top": marginTop, width: width }).animate({ height: Math.floor(u / C + kb + 1), "margin-top": 0, "margin-left": 0, width: Math.floor(t / D + gb + 1) }, J - G, O, o); S.eq(d).delay((J + G) / ab * ob[c] * F * .5).animate({ "margin-left": marginLeft * -1, "margin-top": marginTop * -1 }, J - G, O, function () { a(this).css({ "margin-top": 0, "margin-left": 0 }) }) } else { b.onStartTransition.call(this); n = parseFloat(J) + parseFloat(G); if (T == "next") { m.delay((J + G) / ab * ob[c] * F * .5).css({ display: "block", height: height, "margin-left": marginLeft, "margin-top": marginTop, width: width, opacity: opacityOnGrid }).animate({ height: Math.floor(u / C + kb + 1), "margin-top": 0, "margin-left": 0, opacity: 1, width: Math.floor(t / D + gb + 1) }, J - G, O, o) } else { S.eq(l).show().css("z-index", "999").addClass("cameracurrent"); S.eq(d).css("z-index", "1").removeClass("cameracurrent"); a(".cameraContent", g).eq(l).addClass("cameracurrent"); a(".cameraContent", g).eq(d).removeClass("cameracurrent"); m.delay((J + G) / ab * ob[c] * F * .5).css({ display: "block", height: Math.floor(u / C + kb + 1), "margin-top": 0, "margin-left": 0, opacity: 1, width: Math.floor(t / D + gb + 1) }).animate({ height: height, "margin-left": marginLeft, "margin-top": marginTop, width: width, opacity: opacityOnGrid }, J - G, O, o) } } }) } } var d = { alignment: "center", autoAdvance: true, mobileAutoAdvance: true, barDirection: "leftToRight", barPosition: "bottom", cols: 6, easing: "easeInOutExpo", mobileEasing: "", fx: "random", mobileFx: "", gridDifference: 250, height: "50%", imagePath: "images/", hover: true, loader: "pie", loaderColor: "#eeeeee", loaderBgColor: "#222222", loaderOpacity: .8, loaderPadding: 2, loaderStroke: 7, minHeight: "200px", navigation: true, navigationHover: true, mobileNavHover: true, opacityOnGrid: false, overlayer: true, pagination: true, playPause: true, pauseOnClick: true, pieDiameter: 38, piePosition: "rightTop", portrait: false, rows: 4, slicedCols: 12, slicedRows: 8, slideOn: "random", thumbnails: false, time: 7e3, transPeriod: 1500, onEndTransition: function () { }, onLoaded: function () { }, onStartLoading: function () { }, onStartTransition: function () { } }; var b = a.extend({}, d, b); var f = a(this).addClass("camera_wrap"); f.wrapInner('<div class="camera_src" />').wrapInner('<div class="camera_fakehover" />'); var g = a(".camera_fakehover", f); g.append('<div class="camera_target"></div>'); if (b.overlayer == true) { g.append('<div class="camera_overlayer"></div>') } g.append('<div class="camera_target_content"></div>'); var h; if (b.loader == "pie" && a.browser.msie && a.browser.version < 9) { h = "bar" } else { h = b.loader } if (h == "pie") { g.append('<div class="camera_pie"></div>') } else if (h == "bar") { g.append('<div class="camera_bar"></div>') } else { g.append('<div class="camera_bar" style="display:none"></div>') } if (b.playPause == true) { g.append('<div class="camera_commands"></div>') } if (b.navigation == true) { g.append('<div class="camera_prev"><span></span></div>').append('<div class="camera_next"><span></span></div>') } if (b.thumbnails == true) { f.append('<div class="camera_thumbs_cont" />') } if (b.thumbnails == true && b.pagination != true) { a(".camera_thumbs_cont", f).wrap("<div />").wrap('<div class="camera_thumbs" />').wrap("<div />").wrap('<div class="camera_command_wrap" />') } if (b.pagination == true) { f.append('<div class="camera_pag"></div>') } f.append('<div class="camera_loader"></div>'); a(".camera_caption", f).each(function () { a(this).wrapInner("<div />") }); var i = "pie_" + f.index(), j = a(".camera_src", f), k = a(".camera_target", f), l = a(".camera_target_content", f), m = a(".camera_pie", f), n = a(".camera_bar", f), o = a(".camera_prev", f), p = a(".camera_next", f), q = a(".camera_commands", f), r = a(".camera_pag", f), s = a(".camera_thumbs_cont", f); var t, u; var v = new Array; a("> div", j).each(function () { v.push(a(this).attr("data-src")) }); var w = new Array; a("> div", j).each(function () { if (a(this).attr("data-link")) { w.push(a(this).attr("data-link")) } else { w.push("") } }); var x = new Array; a("> div", j).each(function () { if (a(this).attr("data-target")) { x.push(a(this).attr("data-target")) } else { x.push("") } }); var y = new Array; a("> div", j).each(function () { if (a(this).attr("data-portrait")) { y.push(a(this).attr("data-portrait")) } else { y.push("") } }); var z = new Array; a("> div", j).each(function () { if (a(this).attr("data-alignment")) { z.push(a(this).attr("data-alignment")) } else { z.push("") } }); var A = new Array; a("> div", j).each(function () { if (a(this).attr("data-thumb")) { A.push(a(this).attr("data-thumb")) } else { A.push("") } }); var B = v.length; a(l).append('<div class="cameraContents" />'); var C; for (C = 0; C < B; C++) { a(".cameraContents", l).append('<div class="cameraContent" />'); if (w[C] != "") { var D = a("> div ", j).eq(C).attr("data-box"); if (typeof D !== "undefined" && D !== false && D != "") { D = 'data-box="' + a("> div ", j).eq(C).attr("data-box") + '"' } else { D = "" } a(".camera_target_content .cameraContent:eq(" + C + ")", f).append('<a class="camera_link" href="' + w[C] + '" ' + D + ' target="' + x[C] + '"></a>') } } a(".camera_caption", f).each(function () { var b = a(this).parent().index(), c = f.find(".cameraContent").eq(b); a(this).appendTo(c) }); k.append('<div class="cameraCont" />'); var E = a(".cameraCont", f); var F; for (F = 0; F < B; F++) { E.append('<div class="cameraSlide cameraSlide_' + F + '" />'); var G = a("> div:eq(" + F + ")", j); k.find(".cameraSlide_" + F).clone(G) } a(window).bind("load resize pageshow", function () { hb(); H() }); E.append('<div class="cameraSlide cameraSlide_' + F + '" />'); var I; f.show(); var t = k.width(); var u = k.height(); var J; a(window).bind("resize pageshow", function () { if (I == true) { K() } a("ul", s).animate({ "margin-top": 0 }, 0, hb); if (!j.hasClass("paused")) { j.addClass("paused"); if (a(".camera_stop", V).length) { a(".camera_stop", V).hide(); a(".camera_play", V).show(); if (h != "none") { a("#" + i).hide() } } else { if (h != "none") { a("#" + i).hide() } } clearTimeout(J); J = setTimeout(function () { j.removeClass("paused"); if (a(".camera_play", V).length) { a(".camera_play", V).hide(); a(".camera_stop", V).show(); if (h != "none") { a("#" + i).fadeIn() } } else { if (h != "none") { a("#" + i).fadeIn() } } }, 1500) } }); var L, M; var N, O, P, q, r; var Q, R; if (e() && b.mobileAutoAdvance != "") { O = b.mobileAutoAdvance } else { O = b.autoAdvance } if (O == false) { j.addClass("paused") } if (e() && b.mobileNavHover != "") { P = b.mobileNavHover } else { P = b.navigationHover } if (j.length != 0) { var S = a(".cameraSlide", k); S.wrapInner('<div class="camerarelative" />'); var T; var U = b.barDirection; var V = f; a("iframe", g).each(function () { var b = a(this); var c = b.attr("src"); b.attr("data-src", c); var d = b.parent().index(".camera_src > div"); a(".camera_target_content .cameraContent:eq(" + d + ")", f).append(b) }); function W() { a("iframe", g).each(function () { a(".camera_caption", g).show(); var c = a(this); var d = c.attr("data-src"); c.attr("src", d); var e = b.imagePath + "blank.gif"; var h = new Image; h.src = e; if (b.height.indexOf("%") != -1) { var i = Math.round(t / (100 / parseFloat(b.height))); if (b.minHeight != "" && i < parseFloat(b.minHeight)) { u = parseFloat(b.minHeight) } else { u = i } } else if (b.height == "auto") { u = f.height() } else { u = parseFloat(b.height) } c.after(a(h).attr({ "class": "imgFake", width: t, height: u })); var j = c.clone(); c.remove(); a(h).bind("click", function () { if (a(this).css("position") == "absolute") { a(this).remove(); if (d.indexOf("vimeo") != -1 || d.indexOf("youtube") != -1) { if (d.indexOf("?") != -1) { autoplay = "&autoplay=1" } else { autoplay = "?autoplay=1" } } else if (d.indexOf("dailymotion") != -1) { if (d.indexOf("?") != -1) { autoplay = "&autoPlay=1" } else { autoplay = "?autoPlay=1" } } j.attr("src", d + autoplay); R = true } else { a(this).css({ position: "absolute", top: 0, left: 0, zIndex: 10 }).after(j); j.css({ position: "absolute", top: 0, left: 0, zIndex: 9 }) } }) }) } W(); if (b.hover == true) { if (!e()) { g.hover(function () { j.addClass("hovered") }, function () { j.removeClass("hovered") }) } } if (P == true) { a(o, f).animate({ opacity: 0 }, 0); a(p, f).animate({ opacity: 0 }, 0); a(q, f).animate({ opacity: 0 }, 0); if (e()) { g.live("vmouseover", function () { a(o, f).animate({ opacity: 1 }, 200); a(p, f).animate({ opacity: 1 }, 200); a(q, f).animate({ opacity: 1 }, 200) }); g.live("vmouseout", function () { a(o, f).delay(500).animate({ opacity: 0 }, 200); a(p, f).delay(500).animate({ opacity: 0 }, 200); a(q, f).delay(500).animate({ opacity: 0 }, 200) }) } else { g.hover(function () { a(o, f).animate({ opacity: 1 }, 200); a(p, f).animate({ opacity: 1 }, 200); a(q, f).animate({ opacity: 1 }, 200) }, function () { a(o, f).animate({ opacity: 0 }, 200); a(p, f).animate({ opacity: 0 }, 200); a(q, f).animate({ opacity: 0 }, 200) }) } } a(".camera_stop", V).live("click", function () { O = false; j.addClass("paused"); if (a(".camera_stop", V).length) { a(".camera_stop", V).hide(); a(".camera_play", V).show(); if (h != "none") { a("#" + i).hide() } } else { if (h != "none") { a("#" + i).hide() } } }); a(".camera_play", V).live("click", function () { O = true; j.removeClass("paused"); if (a(".camera_play", V).length) { a(".camera_play", V).hide(); a(".camera_stop", V).show(); if (h != "none") { a("#" + i).show() } } else { if (h != "none") { a("#" + i).show() } } }); if (b.pauseOnClick == true) { a(".camera_target_content", g).mouseup(function () { O = false; j.addClass("paused"); a(".camera_stop", V).hide(); a(".camera_play", V).show(); a("#" + i).hide() }) } a(".cameraContent, .imgFake", g).hover(function () { Q = true }, function () { Q = false }); a(".cameraContent, .imgFake", g).bind("click", function () { if (R == true && Q == true) { O = false; a(".camera_caption", g).hide(); j.addClass("paused"); a(".camera_stop", V).hide(); a(".camera_play", V).show(); a("#" + i).hide() } }) } if (h != "pie") { n.append('<span class="camera_bar_cont" />'); a(".camera_bar_cont", n).animate({ opacity: b.loaderOpacity }, 0).css({ position: "absolute", left: 0, right: 0, top: 0, bottom: 0, "background-color": b.loaderBgColor }).append('<span id="' + i + '" />'); a("#" + i).animate({ opacity: 0 }, 0); var Z = a("#" + i); Z.css({ position: "absolute", "background-color": b.loaderColor }); switch (b.barPosition) { case "left": n.css({ right: "auto", width: b.loaderStroke }); break; case "right": n.css({ left: "auto", width: b.loaderStroke }); break; case "top": n.css({ bottom: "auto", height: b.loaderStroke }); break; case "bottom": n.css({ top: "auto", height: b.loaderStroke }); break } switch (U) { case "leftToRight": Z.css({ left: 0, right: 0, top: b.loaderPadding, bottom: b.loaderPadding }); break; case "rightToLeft": Z.css({ left: 0, right: 0, top: b.loaderPadding, bottom: b.loaderPadding }); break; case "topToBottom": Z.css({ left: b.loaderPadding, right: b.loaderPadding, top: 0, bottom: 0 }); break; case "bottomToTop": Z.css({ left: b.loaderPadding, right: b.loaderPadding, top: 0, bottom: 0 }); break } } else { m.append('<canvas id="' + i + '"></canvas>'); var _; var Z = document.getElementById(i); Z.setAttribute("width", b.pieDiameter); Z.setAttribute("height", b.pieDiameter); var ab; switch (b.piePosition) { case "leftTop": ab = "left:0; top:0;"; break; case "rightTop": ab = "right:0; top:0;"; break; case "leftBottom": ab = "left:0; bottom:0;"; break; case "rightBottom": ab = "right:0; bottom:0;"; break } Z.setAttribute("style", "position:absolute; z-index:1002; " + ab); var bb; var cb; if (Z && Z.getContext) { var db = Z.getContext("2d"); db.rotate(Math.PI * (3 / 2)); db.translate(-b.pieDiameter, 0) } } if (h == "none" || O == false) { a("#" + i).hide(); a(".camera_canvas_wrap", V).hide() } if (a(r).length) { a(r).append('<ul class="camera_pag_ul" />'); var eb; for (eb = 0; eb < B; eb++) { a(".camera_pag_ul", f).append('<li class="pag_nav_' + eb + '" style="position:relative; z-index:1002"><span><span>' + eb + "</span></span></li>") } a(".camera_pag_ul li", f).hover(function () { a(this).addClass("camera_hover"); if (a(".camera_thumb", this).length) { var b = a(".camera_thumb", this).outerWidth(), c = a(".camera_thumb", this).outerHeight(), d = a(this).outerWidth(); a(".camera_thumb", this).show().css({ top: "-" + c + "px", left: "-" + (b - d) / 2 + "px" }).animate({ opacity: 1, "margin-top": "-3px" }, 200); a(".thumb_arrow", this).show().animate({ opacity: 1, "margin-top": "-3px" }, 200) } }, function () { a(this).removeClass("camera_hover"); a(".camera_thumb", this).animate({ "margin-top": "-20px", opacity: 0 }, 200, function () { a(this).css({ marginTop: "5px" }).hide() }); a(".thumb_arrow", this).animate({ "margin-top": "-20px", opacity: 0 }, 200, function () { a(this).css({ marginTop: "5px" }).hide() }) }) } if (a(s).length) { var fb; if (!a(r).length) { a(s).append("<div />"); a(s).before('<div class="camera_prevThumbs hideNav"><div></div></div>').before('<div class="camera_nextThumbs hideNav"><div></div></div>'); a("> div", s).append("<ul />"); a.each(A, function (b, c) { if (a("> div", j).eq(b).attr("data-thumb") != "") { var d = a("> div", j).eq(b).attr("data-thumb"), e = new Image; e.src = d; a("ul", s).append('<li class="pix_thumb pix_thumb_' + b + '" />'); a("li.pix_thumb_" + b, s).append(a(e).attr("class", "camera_thumb")) } }) } else { a.each(A, function (b, c) { if (a("> div", j).eq(b).attr("data-thumb") != "") { var d = a("> div", j).eq(b).attr("data-thumb"), e = new Image; e.src = d; a("li.pag_nav_" + b, r).append(a(e).attr("class", "camera_thumb").css({ position: "absolute" }).animate({ opacity: 0 }, 0)); a("li.pag_nav_" + b + " > img", r).after('<div class="thumb_arrow" />'); a("li.pag_nav_" + b + " > .thumb_arrow", r).animate({ opacity: 0 }, 0) } }); f.css({ marginBottom: a(r).outerHeight() }) } } else if (!a(s).length && a(r).length) { f.css({ marginBottom: a(r).outerHeight() }) } var gb = true; if (a(q).length) { a(q).append('<div class="camera_play"></div>').append('<div class="camera_stop"></div>'); if (O == true) { a(".camera_play", V).hide(); a(".camera_stop", V).show() } else { a(".camera_stop", V).hide(); a(".camera_play", V).show() } } ib(); a(".moveFromLeft, .moveFromRight, .moveFromTop, .moveFromBottom, .fadeIn, .fadeFromLeft, .fadeFromRight, .fadeFromTop, .fadeFromBottom", g).each(function () { a(this).css("visibility", "hidden") }); b.onStartLoading.call(this); jb(); if (a(o).length) { a(o).click(function () { if (!j.hasClass("camerasliding")) { var c = parseFloat(a(".cameraSlide.cameracurrent", k).index()); clearInterval(L); W(); a("#" + i + ", .camera_canvas_wrap", f).animate({ opacity: 0 }, 0); ib(); if (c != 0) { jb(c) } else { jb(B) } b.onStartLoading.call(this) } }) } if (a(p).length) { a(p).click(function () { if (!j.hasClass("camerasliding")) { var c = parseFloat(a(".cameraSlide.cameracurrent", k).index()); clearInterval(L); W(); a("#" + i + ", .camera_canvas_wrap", V).animate({ opacity: 0 }, 0); ib(); if (c == B - 1) { jb(1) } else { jb(c + 2) } b.onStartLoading.call(this) } }) } if (e()) { g.bind("swipeleft", function (c) { if (!j.hasClass("camerasliding")) { var d = parseFloat(a(".cameraSlide.cameracurrent", k).index()); clearInterval(L); W(); a("#" + i + ", .camera_canvas_wrap", V).animate({ opacity: 0 }, 0); ib(); if (d == B - 1) { jb(1) } else { jb(d + 2) } b.onStartLoading.call(this) } }); g.bind("swiperight", function (c) { if (!j.hasClass("camerasliding")) { var d = parseFloat(a(".cameraSlide.cameracurrent", k).index()); clearInterval(L); W(); a("#" + i + ", .camera_canvas_wrap", V).animate({ opacity: 0 }, 0); ib(); if (d != 0) { jb(d) } else { jb(B) } b.onStartLoading.call(this) } }) } if (a(r).length) { a(".camera_pag li", f).click(function () { if (!j.hasClass("camerasliding")) { var c = parseFloat(a(this).index()); var d = parseFloat(a(".cameraSlide.cameracurrent", k).index()); if (c != d) { clearInterval(L); W(); a("#" + i + ", .camera_canvas_wrap", V).animate({ opacity: 0 }, 0); ib(); jb(c + 1); b.onStartLoading.call(this) } } }) } if (a(s).length) { a(".pix_thumb img", s).click(function () { if (!j.hasClass("camerasliding")) { var c = parseFloat(a(this).parents("li").index()); var d = parseFloat(a(".cameracurrent", k).index()); if (c != d) { clearInterval(L); W(); a("#" + i + ", .camera_canvas_wrap", V).animate({ opacity: 0 }, 0); a(".pix_thumb", s).removeClass("cameracurrent"); a(this).parents("li").addClass("cameracurrent"); ib(); jb(c + 1); hb(); b.onStartLoading.call(this) } } }); a(".camera_thumbs_cont .camera_prevThumbs", V).hover(function () { a(this).stop(true, false).animate({ opacity: 1 }, 250) }, function () { a(this).stop(true, false).animate({ opacity: .7 }, 250) }); a(".camera_prevThumbs", V).click(function () { var b = 0, c = a(s).outerWidth(), d = a("ul", s).offset().left, e = a("> div", s).offset().left, f = e - d; a(".camera_visThumb", s).each(function () { var c = a(this).outerWidth(); b = b + c }); if (f - b > 0) { a("ul", s).animate({ "margin-left": "-" + (f - b) + "px" }, 500, H) } else { a("ul", s).animate({ "margin-left": 0 }, 500, H) } }); a(".camera_thumbs_cont .camera_nextThumbs", V).hover(function () { a(this).stop(true, false).animate({ opacity: 1 }, 250) }, function () { a(this).stop(true, false).animate({ opacity: .7 }, 250) }); a(".camera_nextThumbs", V).click(function () { var b = 0, c = a(s).outerWidth(), d = a("ul", s).outerWidth(), e = a("ul", s).offset().left, f = a("> div", s).offset().left, g = f - e; a(".camera_visThumb", s).each(function () { var c = a(this).outerWidth(); b = b + c }); if (g + b + b < d) { a("ul", s).animate({ "margin-left": "-" + (g + b) + "px" }, 500, H) } else { a("ul", s).animate({ "margin-left": "-" + (d - c) + "px" }, 500, H) } }) } } })(jQuery); (function (a) { a.fn.cameraStop = function () { var b = a(this), c = a(".camera_src", b), d = "pie_" + b.index(); c.addClass("stopped"); if (a(".camera_showcommands").length) { var e = a(".camera_thumbs_wrap", b) } else { var e = b } } })(jQuery); (function (a) { a.fn.cameraPause = function () { var b = a(this); var c = a(".camera_src", b); c.addClass("paused") } })(jQuery); (function (a) { a.fn.cameraResume = function () { var b = a(this); var c = a(".camera_src", b); if (typeof autoAdv === "undefined" || autoAdv !== true) { c.removeClass("paused") } } })(jQuery);
+
-
 
+
-
 
+
-
 
+
-
 
+
-
    jQuery(function () {
+
-
 
+
-
        jQuery('#camera_wrap_1').camera({
+
-
            thumbnails: true
+
-
        });
+
-
    });
+
-
</script>
+
-
<!--<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:USTC-Software/css/camera?action=raw&ctype=text/css" media="all">-->
+
-
<style type="text/css" media="all">
+
-
    .camera_wrap a, .camera_wrap img,
+
-
.camera_wrap ol, .camera_wrap ul, .camera_wrap li,
+
-
.camera_wrap table, .camera_wrap tbody, .camera_wrap tfoot, .camera_wrap thead, .camera_wrap tr, .camera_wrap th, .camera_wrap td
+
-
.camera_thumbs_wrap a, .camera_thumbs_wrap img,
+
-
.camera_thumbs_wrap ol, .camera_thumbs_wrap ul, .camera_thumbs_wrap li,
+
-
.camera_thumbs_wrap table, .camera_thumbs_wrap tbody, .camera_thumbs_wrap tfoot, .camera_thumbs_wrap thead, .camera_thumbs_wrap tr, .camera_thumbs_wrap th, .camera_thumbs_wrap td {
+
-
background: none;
+
-
border: 0;
+
-
font: inherit;
+
-
font-size: 100%;
+
-
margin: 0;
+
-
padding: 0;
+
-
vertical-align: baseline;
+
-
list-style: none;
+
-
text-align: center !important;
+
-
 
+
}
}
-
.camera_wrap {
+
h2{
-
top:60px;
+
font-size: 1.8em;
-
        margin: 0 auto;
+
-
display: none;
+
-
position: relative;
+
-
z-index: 0;
+
-
}/*调整位置*/
+
-
.camera_wrap img {
+
-
max-width: none!important;
+
-
}
+
-
.camera_fakehover {
+
-
height: 85%;
+
-
min-height: 60px;
+
-
position: relative;
+
-
width:100%;
+
-
z-index: 1;
+
-
}/* 调整camera高度*/
+
-
.camera_wrap {
+
-
width: 100%;
+
-
} /*调整camera宽度*/
+
-
.camera_src {
+
-
display: none;
+
-
}
+
-
.cameraCont, .cameraContents {
+
-
height: 100%;
+
-
position: relative;
+
-
width: 100%;
+
-
z-index: 1;
+
-
}
+
-
.cameraSlide {
+
-
bottom: 0;
+
-
left: 0;
+
-
position: absolute;
+
-
right: 0;
+
-
top: 0;
+
-
width: 100%;
+
-
}
+
-
.cameraContent {
+
-
bottom: 0;
+
-
display: none;
+
-
left: 0;
+
-
position: absolute;
+
-
right: 0;
+
-
top: 0;
+
-
width: 100%;
+
-
}
+
-
.camera_target {
+
-
bottom: 0;
+
-
height: 100%;
+
-
left: 0;
+
-
overflow: hidden;
+
-
position: absolute;
+
-
right: 0;
+
-
text-align: left;
+
-
top: 0;
+
-
width: 100%;
+
-
z-index: 0;
+
-
}
+
-
.camera_overlayer {
+
-
bottom: 0;
+
-
height: 100%;
+
-
left: 0;
+
-
overflow: hidden;
+
-
position: absolute;
+
-
right: 0;
+
-
top: 0;
+
-
width: 100%;
+
-
z-index: 0;
+
-
}
+
-
.camera_target_content {
+
-
bottom: 0;
+
-
left: 0;
+
-
overflow: hidden;
+
-
position: absolute;
+
-
right: 0;
+
-
top: 0;
+
-
z-index: 2;
+
-
}
+
-
.camera_target_content .camera_link {
+
-
    background: url url(https://static.igem.org/mediawiki/2013/3/3e/USTC-Software_Blank.gif);
+
-
display: block;
+
-
height: 100%;
+
-
text-decoration: none;
+
-
}
+
-
.camera_loader {
+
-
    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(https://static.igem.org/mediawiki/2013/1/14/USTC-Software_Camera-loader.gif) no-repeat center;
+
-
border: 1px solid #ffffff;
+
-
-webkit-border-radius: 18px;
+
-
-moz-border-radius: 18px;
+
-
border-radius: 18px;
+
-
height: 36px;
+
-
left: 50%;
+
-
overflow: hidden;
+
-
position: absolute;
+
-
margin: -18px 0 0 -18px;
+
-
top: 50%;
+
-
width: 36px;
+
-
z-index: 3;
+
-
}
+
-
.camera_bar {
+
-
bottom: 0;
+
-
left: 0;
+
-
overflow: hidden;
+
-
position: absolute;
+
-
right: 0;
+
-
top: 0;
+
-
z-index: 3;
+
-
}
+
-
.camera_thumbs_wrap.camera_left .camera_bar, .camera_thumbs_wrap.camera_right .camera_bar {
+
-
height: 100%;
+
-
position: absolute;
+
-
width: auto;
+
-
}
+
-
.camera_thumbs_wrap.camera_bottom .camera_bar, .camera_thumbs_wrap.camera_top .camera_bar {
+
-
height: auto;
+
-
position: absolute;
+
-
width: 100%;
+
-
}
+
-
.camera_nav_cont {
+
-
height: 65px;
+
-
overflow: hidden;
+
-
position: absolute;
+
-
right: 9px;
+
-
top: 15px;
+
-
width: 100%;
+
-
z-index: 4;
+
-
}
+
-
.camera_caption {
+
-
bottom: 0;
+
-
display: block;
+
-
position: absolute;
+
-
width: 100%;
+
-
font-family:'Open Sans',"Helvetica Neue",arial,serif;
+
}
}
-
.camera_caption em {
+
#box1{
-
font-family: "Helvetica Neue","Arial",sans-serif;
+
width: 970px;
-
font-style:normal;
+
margin-top: -8px;
-
font-size: 12px;
+
background: #fffff;
-
/*margin-left:0px;*/
+
float: left;
 +
padding-bottom: 10px;
 +
margin-bottom: 5px;
}
}
 +
#box1 h2{
 +
padding: 4px 4px 4px 4px;
 +
}
 +
#box1 p{
 +
padding: 0px 10px 0px 10px;
 +
font-size: 1.1em;
 +
}
 +
#FredOscarFlag{
 +
display: block;
 +
float: left;
 +
width: 250px;
 +
height:195px;
 +
background: url('https://static.igem.org/mediawiki/2013/6/6b/UCSF2013_Logonew.png');
 +
background-position: top;
 +
margin: 30px;
 +
}
 +
-
.camera_caption > div {
+
#box2{
-
padding: 10px 20px;
+
width: 968px;
-
}
+
background: #C68DD8;
-
.camerarelative {
+
-
overflow: hidden;
+
-
position: relative;
+
-
}
+
-
.imgFake {
+
-
cursor: pointer;
+
-
}
+
-
.camera_prevThumbs {
+
-
bottom: 4px;
+
-
cursor: pointer;
+
-
left: 0;
+
-
position: absolute;
+
-
top: 4px;
+
-
visibility: hidden;
+
-
width: 30px;
+
-
z-index: 10;
+
-
}
+
-
.camera_prevThumbs div {
+
-
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -160px 0;
+
-
display: block;
+
-
height: 40px;
+
-
margin-top: -20px;
+
-
position: absolute;
+
-
top: 50%;
+
-
width: 30px;
+
-
}
+
-
.camera_nextThumbs {
+
-
bottom: 4px;
+
-
cursor: pointer;
+
-
position: absolute;
+
-
right: 0;
+
-
top: 4px;
+
-
visibility: hidden;
+
-
width: 30px;
+
-
z-index: 10;
+
-
}
+
-
.camera_nextThumbs div {
+
-
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -190px 0;
+
-
display: block;
+
-
height: 40px;
+
-
margin-top: -20px;
+
-
position: absolute;
+
-
top: 50%;
+
-
width: 30px;
+
-
}
+
-
.camera_command_wrap .hideNav {
+
-
display: none;
+
-
}
+
-
.camera_command_wrap {
+
-
left: 0;
+
-
position: relative;
+
-
right:0;
+
-
z-index: 4;
+
-
}
+
-
.camera_wrap .camera_pag .camera_pag_ul {
+
-
list-style: none;
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
.camera_wrap .camera_pag .camera_pag_ul li {
+
-
-webkit-border-radius: 8px;
+
-
-moz-border-radius: 8px;
+
-
border-radius: 8px;
+
-
cursor: pointer;
+
-
display: inline-block;
+
-
height: 16px;
+
-
margin: 20px 5px;
+
-
position: relative;
+
-
text-align: left;
+
-
text-indent: -9999px;
+
-
width: 16px;
+
-
}
+
-
.camera_commands_emboss .camera_pag .camera_pag_ul li {
+
-
-moz-box-shadow:
+
-
0px 1px 0px rgba(255,255,255,1),
+
-
inset 0px 1px 1px rgba(0,0,0,0.2);
+
-
-webkit-box-shadow:
+
-
0px 1px 0px rgba(255,255,255,1),
+
-
inset 0px 1px 1px rgba(0,0,0,0.2);
+
-
box-shadow:
+
-
0px 1px 0px rgba(255,255,255,1),
+
-
inset 0px 1px 1px rgba(0,0,0,0.2);
+
-
}
+
-
.camera_wrap .camera_pag .camera_pag_ul li > span {
+
-
-webkit-border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
border-radius: 5px;
+
-
height: 8px;
+
-
left: 4px;
+
-
overflow: hidden;
+
-
position: absolute;
+
-
top: 4px;
+
-
width: 8px;
+
-
}
+
-
.camera_commands_emboss .camera_pag .camera_pag_ul li:hover > span {
+
-
-moz-box-shadow:
+
-
0px 1px 0px rgba(255,255,255,1),
+
-
inset 0px 1px 1px rgba(0,0,0,0.2);
+
-
-webkit-box-shadow:
+
-
0px 1px 0px rgba(255,255,255,1),
+
-
inset 0px 1px 1px rgba(0,0,0,0.2);
+
-
box-shadow:
+
-
0px 1px 0px rgba(255,255,255,1),
+
-
inset 0px 1px 1px rgba(0,0,0,0.2);
+
-
}
+
-
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {
+
-
-moz-box-shadow: 0;
+
-
-webkit-box-shadow: 0;
+
-
box-shadow: 0;
+
-
}
+
-
.camera_pag_ul li img {
+
-
display: none;
+
-
position: absolute;
+
-
}
+
-
.camera_pag_ul .thumb_arrow {
+
-
    border-left: 4px solid transparent;
+
-
    border-right: 4px solid transparent;
+
-
    border-top: 4px solid;
+
-
top: 0;
+
-
left: 50%;
+
-
margin-left: -4px;
+
-
position: absolute;
+
-
}
+
-
.camera_prev, .camera_next, .camera_commands {
+
-
cursor: pointer;
+
-
height: 40px;
+
-
margin-top: -20px;
+
-
position: absolute;
+
-
top: 50%;
+
-
width: 40px;
+
-
z-index: 2;
+
-
}
+
-
.camera_prev {
+
-
left: 0;
+
-
}
+
-
.camera_prev > span {
+
-
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat 0 0;
+
-
display: block;
+
-
height: 40px;
+
-
width: 40px;
+
-
}
+
-
.camera_next {
+
-
right: 0;
+
-
}
+
-
.camera_next > span {
+
-
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -40px 0;
+
-
display: block;
+
-
height: 40px;
+
-
width: 40px;
+
-
}
+
-
.camera_commands {
+
-
right: 41px;
+
-
}
+
-
.camera_commands > .camera_play {
+
-
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -80px 0;
+
-
height: 40px;
+
-
width: 40px;
+
-
}
+
-
.camera_commands > .camera_stop {
+
-
background: url(https://static.igem.org/mediawiki/2013/3/33/USTC-Software_Camera_skins.png) no-repeat -120px 0;
+
-
display: block;
+
-
height: 40px;
+
-
width: 40px;
+
-
}
+
-
.camera_wrap .camera_pag .camera_pag_ul li {
+
-
-webkit-border-radius: 8px;
+
-
-moz-border-radius: 8px;
+
-
border-radius: 8px;
+
-
cursor: pointer;
+
-
display: inline-block;
+
-
height: 16px;
+
-
margin: 20px 5px;
+
-
position: relative;
+
-
text-indent: -9999px;
+
-
width: 16px;
+
-
}
+
-
.camera_thumbs_cont {
+
-
-webkit-border-bottom-right-radius: 4px;
+
-
-webkit-border-bottom-left-radius: 4px;
+
-
-moz-border-radius-bottomright: 4px;
+
-
-moz-border-radius-bottomleft: 4px;
+
-
border-bottom-right-radius: 4px;
+
-
border-bottom-left-radius: 4px;
+
-
overflow: hidden;
+
-
position: relative;
+
-
width: 100%;
+
-
}
+
-
.camera_commands_emboss .camera_thumbs_cont {
+
-
-moz-box-shadow:
+
-
0px 1px 0px rgba(255,255,255,1),
+
-
inset 0px 1px 1px rgba(0,0,0,0.2);
+
-
-webkit-box-shadow:
+
-
0px 1px 0px rgba(255,255,255,1),
+
-
inset 0px 1px 1px rgba(0,0,0,0.2);
+
-
box-shadow:
+
-
0px 1px 0px rgba(255,255,255,1),
+
-
inset 0px 1px 1px rgba(0,0,0,0.2);
+
-
}
+
-
.camera_thumbs_cont > div {
+
float: left;
float: left;
-
width: 100%;
+
margin-bottom: 13px;
}
}
-
.camera_thumbs_cont ul {
+
#box2 h2{
-
overflow: hidden;
+
padding: 20px 20px 20px 20px;
-
padding: 3px 4px 8px;
+
color: white;
-
position: relative;
+
}
-
text-align: center;
+
#box2 p{
 +
padding: 0px 20px 0px 20px;
 +
font-size: 1.1em;
 +
color: white;
 +
}
 +
#box2 img{
 +
float: left;
 +
margin: 15px;
 +
height: 110px;
 +
}
 +
#box2:hover{
 +
background: #D79EE9;
 +
}
 +
 +
/***positioning of elements in ZE EPIC BOX***/
 +
#epicbox{
 +
margin-top: 4px;
}
}
-
.camera_thumbs_cont ul li {
+
 
-
display: inline;
+
#boximgcontainer{
-
padding: 0 4px;
+
float: left;
-
}
+
width: 644px;
-
.camera_thumbs_cont ul li > img {
+
height: 655px;
-
border: 1px solid;
+
}
-
cursor: pointer;
+
#boximgcontainer div{
-
margin-top: 5px;
+
float: left;
-
vertical-align:bottom;
+
position: relative;
-
}
+
}
-
.camera_clear {
+
#orangebox{
-
display: block;
+
margin-bottom: 4px;
 +
}
 +
#orangebox .imgbox{
 +
width: 644px;
 +
height: 215px;
 +
top: 108px;
 +
background: #F6A82D;
 +
margin-bottom: 4px;
 +
}
 +
.oblank{
 +
width: 644px;
 +
height: 104px;
 +
background: #FFE485;
 +
position: relative;
 +
top: -219px;
 +
}
 +
#orangebox:hover .oblank, .oblank:hover{
 +
display: none;
 +
}
 +
#orangebox .iconcontainer{
 +
position: relative;
 +
display: none;
 +
left: auto;
 +
top: -219px;
 +
}
 +
.iconbox div, .iconbox{
 +
width: 104px;
 +
height: 104px;
 +
margin-right: 4px;
 +
}
 +
a.obox1 div{
 +
background: #FFD35A;
 +
}
 +
a.obox2 div{
 +
background: #FECC44;
 +
}
 +
a.obox3 div{
 +
background: #F8C22E;
 +
}
 +
a.obox4 div{
 +
background: #F8B32E;
 +
}
 +
a.obox5 div{
 +
background: #F6A82D;
 +
}
 +
a.obox6 div{
 +
background: #F39808;
 +
margin-right: 0;
 +
}
 +
#orangebox div:hover, #orangebox div.iconbox:hover div{
 +
background: #FFE44F;
 +
}
 +
#orangebox:hover .iconcontainer{
 +
display: block;
 +
background: transparent;
 +
}
 +
 +
 +
#greenbox .imgbox{
 +
width: 320px;
 +
height: 215px;
 +
background: #58CD45;
 +
}
 +
.gblank{
 +
width: 320px;
 +
height: 104px;
 +
background: #B6FFA3;
 +
position: relative;
 +
top: 219px;
 +
left: -320px;
 +
}
 +
#greenbox .iconcontainer{
 +
position: relative;
 +
margin-top: 4px;
 +
left: -999em;
 +
z-index: 1;
 +
}
 +
a.gbox1 div{
 +
background: #72E85B;
 +
}
 +
a.gbox2 div{
 +
background: #5BCD45;
 +
}
 +
a.gbox3 div{
 +
background: #4CC035;
 +
}
 +
a.gbox4 div{
 +
background: #44AF2F;
 +
}
 +
#greenbox div:hover, #greenbox div.iconbox:hover div{
 +
background: #94FF7D;
 +
z-index: 99; /*hovers are not overridden by OSCAR boxes*/
 +
}
 +
#greenbox:hover .gblank, .gblank:hover{
 +
display: none;
 +
}
 +
#greenbox:hover .iconcontainer{
 +
left: auto;
 +
background: transparent;
 +
}
 +
 +
#bluebox{
 +
position: relative;
 +
top: -323px;
 +
left: 320px;
 +
}
 +
#bluebox .imgbox{
 +
width: 320px;
 +
height: 215px;
 +
background: #5BB5E8;
 +
margin-left: 4px;
 +
}
 +
.bblank{
 +
width: 320px;
 +
height: 104px;
 +
background: #C5F0F0;
 +
position: relative;
 +
top: 219px;
 +
left: -320px;
 +
z-index: 0;
 +
}
 +
#bluebox .iconcontainer{
 +
position: relative;
 +
margin-top: 4px;
 +
left: -999em;
 +
z-index: 0;
 +
}
 +
a.bbox1 div{
 +
background: #1574AA;
 +
}
 +
a.bbox2 div{
 +
background: #2580B3;
 +
}
 +
a.bbox3 div{
 +
background: #3285B4;
 +
}
 +
a.bbox4 div{
 +
background: #4292BF;
 +
}
 +
a.bbox5 div{
 +
background: #50A2D0;
 +
}
 +
a.bbox6 div{
 +
background: #5BB5E8;
 +
margin: 0;
 +
}
 +
#bluebox div:hover, #bluebox .iconbox:hover div{
 +
background: #7DD7FF;
 +
z-index: 99; /*hovers are not overridden by FRED boxes*/
 +
}
 +
#bluebox:hover .bblank, .bblank:hover{
 +
display: none;
 +
}
 +
#bluebox:hover .iconcontainer{
 +
left: -212px;
 +
background: transparent;
 +
}
 +
 +
#boxinfo{
 +
float: right;
 +
position: relative;
 +
width: 320px;
 +
left: 3px;
 +
background: #555555;
 +
height: 650px;
 +
margin-bottom: 12px;
 +
}
 +
#boxinfo h2{
 +
color: white;
 +
padding: 20px 20px 0px;
 +
}
 +
#boxinfo p{
 +
color: white;
 +
padding: 10px 20px 20px;
 +
font-size: 1.2em;
 +
}
 +
/*initial boxinfo appearance settings*/
 +
#boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{
 +
display: none;
 +
}
 +
#boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4,
 +
#boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{
 +
position: relative;
 +
padding-top: 320px;
 +
display: none;
 +
}
 +
/*bold colours for FRED and OSCAR*/
 +
#boxinfo div.greenbox b{
 +
color: #72E85B;
 +
}
 +
#boxinfo div.bluebox b{
 +
color: #5EB7F0;
 +
}
 +
.threeboxes{
clear: both;
clear: both;
 +
position: relative;
 +
width: 968px;
 +
margin-bottom: 12px;
}
}
-
.showIt {
+
.threeboxes a, .threeboxes a div{
-
display: none;
+
width: 320px;
-
}
+
height: 155px;
-
.camera_clear {
+
float: left;
 +
margin-bottom: 12px;
 +
}
 +
.threeboxes div h2{
 +
padding: 20px 20px 0px;
 +
position: relative;
 +
top: -155px;
 +
}
 +
.threeboxes div p{
 +
padding: 0px 20px;
 +
position: relative;
 +
top: -155px;
 +
}
 +
#greybox1, #greybox6{
 +
margin-right: 4px;
 +
background: #58CD45;
 +
}
 +
#greybox1:hover, #greybox6:hover{
 +
background: #94FF7D;
 +
}
 +
#greybox2, #greybox5{
 +
margin-right: 4px;
 +
background: #5BB5E8;
 +
}
 +
#greybox2:hover, #greybox5:hover{
 +
background: #7DD7FF;
 +
}
 +
#greybox3, #greybox4{
 +
margin: 0;
 +
background: #F6A82D;
 +
}
 +
#greybox3:hover, #greybox4:hover{
 +
background: #FFE44F;
 +
}
 +
 +
#sponsorsbox{
clear: both;
clear: both;
-
display: block;
 
-
height: 1px;
 
-
margin: -1px 0 25px;
 
position: relative;
position: relative;
 +
width: 968px;
 +
margin: 4px 0px;
 +
background: #EEEEEE;
}
}
 +
#sponsorsbox h2{
 +
padding: 20px 20px 0px 20px;
 +
}
 +
#sponsorsbox p{
 +
padding: 0px 20px;
 +
}
 +
#sponsorsbox table{
 +
width: 950px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background: #EEEEEE;
 +
}
 +
#sponsorsbox td{
 +
padding: 15px 0px;
 +
width: 300px;
 +
}
 +
#sponsorsbox img{
 +
display: block;
 +
margin-right: auto;
 +
margin-left: auto;
 +
}
-
 
-
 
-
.pattern_1 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/7/7f/USTC-Software_Overlay1.png) repeat;
 
-
}
 
-
.pattern_2 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/4/44/USTC-Software_Overlay2.png) repeat;
 
-
}
 
-
.pattern_3 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/c/c9/USTC-Software_Overlay3.png) repeat;
 
-
}
 
-
.pattern_4 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/e/ec/USTC-Software_Overlay4.png) repeat;
 
-
}
 
-
.pattern_5 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/f/f3/USTC-Software_Overlay5.png) repeat;
 
-
}
 
-
.pattern_6 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/4/41/USTC-Software_Overlay6.png) repeat;
 
-
}
 
-
.pattern_7 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/2/28/USTC-Software_Overlay7.png) repeat;
 
-
}
 
-
.pattern_8 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/3/3a/USTC-Software_Overlay8.png) repeat;
 
-
}
 
-
.pattern_9 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/b/b3/USTC-Software_Overlay9.png) repeat;
 
-
}
 
-
.pattern_10 .camera_overlayer {
 
-
background: url(https://static.igem.org/mediawiki/2013/4/4e/USTC-Software_Overlay10.png) repeat;
 
-
}
 
-
.camera_caption {
 
-
color: #FFF;
 
-
text-shadow: none;
 
-
}
 
-
 
-
.camera_caption > div {
 
-
background: #000;
 
-
background: rgba(0, 0, 0, 0.8);
 
-
}
 
-
.camera_wrap .camera_pag .camera_pag_ul li {
 
-
background: #b7b7b7;
 
-
}
 
-
.camera_wrap .camera_pag .camera_pag_ul li:hover > span {
 
-
background: #b7b7b7;
 
-
}
 
-
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {
 
-
background: #434648;
 
-
}
 
-
.camera_pag_ul li img {
 
-
border: 4px solid #e6e6e6;
 
-
-moz-box-shadow: 0px 3px 6px rgba(0,0,0,.5);
 
-
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,.5);
 
-
box-shadow: 0px 3px 6px rgba(0,0,0,.5);
 
-
}
 
-
.camera_pag_ul .thumb_arrow {
 
-
    border-top-color: #e6e6e6;
 
-
}
 
-
.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands, .camera_thumbs_cont {
 
-
background: #d8d8d8;
 
-
background: rgba(216, 216, 216, 0.85);
 
-
}
 
-
.camera_wrap .camera_pag .camera_pag_ul li {
 
-
background: #b7b7b7;
 
-
}
 
-
.camera_thumbs_cont ul li > img {
 
-
border-color: 1px solid #000;
 
-
}
 
-
 
-
 
-
.camera_azure_skin .camera_prevThumbs div {
 
-
background-position: -160px -240px;
 
-
}
 
-
.camera_azure_skin .camera_nextThumbs div {
 
-
background-position: -190px -240px;
 
-
}
 
-
.camera_azure_skin .camera_prev > span {
 
-
background-position: 0 -240px;
 
-
}
 
-
.camera_azure_skin .camera_next > span {
 
-
background-position: -40px -240px;
 
-
}
 
-
.camera_azure_skin .camera_commands > .camera_play {
 
-
background-position: -80px -240px;
 
-
}
 
-
.camera_azure_skin .camera_commands > .camera_stop {
 
-
background-position: -120px -240px;
 
-
}
 
</style>
</style>
</head>
</head>
-
 
<body>
<body>
-
<div id="home_1">
+
<div id="box1" align="justify">
 +
<a id="FredOscarFlag">
 +
</a>
 +
<h2><center>Operation CRISPR: Deploying precision guided tools to target unique species in a complex microbiome</h2></center>
 +
<p>In microbial communities, bacterial populations are commonly controlled using indiscriminate, broad range antibiotics. There are few ways to target specific strains effectively without disrupting the entire microbiome and local environment. The goal of our project is to take advantage of a natural horizontal gene transfer mechanism in bacteria to precisely affect gene expression in selected strains. We combine bacterial conjugation with CRISPRi, an RNAi-like repression system developed from bacteria, to regulate gene expression in targeted strains within a complex microbial community. One possible application is to selectively repress pathogenic genes in a microbiome, leaving the community makeup unaffected. In addition, we use CRISPRi to lay the groundwork for transferring large circuits that enable complex functionality and decision-making in cells. </p>
-
 
-
  <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
 
-
    <div data-thumb="https://static.igem.org/mediawiki/2013/4/4a/USTC-Software_1.jpg" data-src="https://static.igem.org/mediawiki/2013/c/c4/USTC-Software_1.png">
 
-
            <div class="camera_caption fadeFromBottom"> <em>USTC-Software —— The unicorn consists "USTC".</em> </div>
 
-
        </div>
 
-
    <div data-thumb="https://static.igem.org/mediawiki/2013/1/19/Ustc-software_2s.jpg" data-src="https://static.igem.org/mediawiki/2013/0/0c/Ustc-software_2.jpg">
 
-
            <div class="camera_caption fadeFromBottom"><em>Having discussion with iGEM Software co-head judge, Gil Alterovitz.</em></div>
 
-
        </div>
 
-
    <div data-thumb="https://static.igem.org/mediawiki/2013/9/9c/USTC-Software_3.jpg" data-src="https://static.igem.org/mediawiki/2013/f/fd/USTC-Software_3.png">
 
-
            <div class="camera_caption fadeFromBottom"> <em>Team members were working.</em>            </div>
 
-
        </div>
 
-
    <div data-thumb="https://static.igem.org/mediawiki/2013/e/e0/USTC-Software_4.jpg" data-src="https://static.igem.org/mediawiki/2013/9/9a/USTC-Software_4.png">
 
-
            <div class="camera_caption fadeFromBottom"> <em>What's your opinion?</em>            </div>
 
-
        </div>
 
-
    <div data-thumb="https://static.igem.org/mediawiki/2013/e/ed/USTC-Software_5.jpg" data-src="https://static.igem.org/mediawiki/2013/2/26/USTC-Software_5.png">
 
-
            <div class="camera_caption fadeFromBottom"> <em>Come to see this ! ~</em>            </div>
 
-
      </div>
 
-
    </div>
 
-
   
 
</div>
</div>
 +
<br>
 +
<center>
 +
<h2>Special Thanks to our 2013 iGEM Team Sponsors!</h2>
 +
<img align="center" style="margin-bottom:0px; width: 500px; margin-top:20px; padding:2; margin-left:55px;" src="https://dl.dropbox.com/u/24404809/iGEM%202012/igem%202012%20website%20photos/Logos/2012%20Sponsors.jpg">
 +
<br><p>
 +
 +
<!-- Links -->
 +
<div id="SponsorLinks">
 +
    <map name="ucsfnosearch" id="ucsfnosearch">
 +
      <area shape="rect" alt="UCSF home page" coords="38,3,84,27" href="http://www.ucsf.edu/" />
 +
      <area shape="rect" alt="UCSF home page" coords="93,11,288,19" href="http://www.ucsf.edu/" />
 +
      <area shape="rect" alt="About UCSF" coords="306,11,368,19" href="http://www.ucsf.edu/about_ucsf/" />
 +
      <area shape="rect" alt="UCSF Medical Center" coords="387,11,498,19" href="http://www.ucsfhealth.org/" />
 +
    </map>
-
</body>
 
</html>
</html>

Revision as of 18:46, 12 September 2013

UCSF Home

UCSF iGEM 2013 Group Photo
Brainstorming project ideas during our second week of Bootcamp
Presenting a poster at the UCSF Center for Systems and Synthetic Biology retreat
Having a skype meeting with one of our mentors!
Human Practices: Speaking about Synthetic Biology at the SF Exploratorium
Having fun outside of the lab making ice cream with dry ice
<style> /*====== Desktop Styling ======*/

/***Body styling***/ h1{ font-size: 2.5em; } h2{ font-size: 1.8em; }

  1. box1{

width: 970px; margin-top: -8px; background: #fffff; float: left; padding-bottom: 10px; margin-bottom: 5px; } #box1 h2{ padding: 4px 4px 4px 4px; } #box1 p{ padding: 0px 10px 0px 10px; font-size: 1.1em; }

#FredOscarFlag{ display: block; float: left; width: 250px; height:195px; background: url('https://static.igem.org/mediawiki/2013/6/6b/UCSF2013_Logonew.png'); background-position: top; margin: 30px; }


  1. box2{

width: 968px; background: #C68DD8; float: left; margin-bottom: 13px; } #box2 h2{ padding: 20px 20px 20px 20px; color: white; } #box2 p{ padding: 0px 20px 0px 20px; font-size: 1.1em; color: white; } #box2 img{ float: left; margin: 15px; height: 110px; } #box2:hover{ background: #D79EE9; }

/***positioning of elements in ZE EPIC BOX***/

  1. epicbox{

margin-top: 4px; }

#boximgcontainer{ float: left; width: 644px; height: 655px; } #boximgcontainer div{ float: left; position: relative; } #orangebox{ margin-bottom: 4px; } #orangebox .imgbox{ width: 644px; height: 215px; top: 108px; background: #F6A82D; margin-bottom: 4px; } .oblank{ width: 644px; height: 104px; background: #FFE485; position: relative; top: -219px; } #orangebox:hover .oblank, .oblank:hover{ display: none; } #orangebox .iconcontainer{ position: relative; display: none; left: auto; top: -219px; } .iconbox div, .iconbox{ width: 104px; height: 104px; margin-right: 4px; } a.obox1 div{ background: #FFD35A; } a.obox2 div{ background: #FECC44; } a.obox3 div{ background: #F8C22E; } a.obox4 div{ background: #F8B32E; } a.obox5 div{ background: #F6A82D; } a.obox6 div{ background: #F39808; margin-right: 0; } #orangebox div:hover, #orangebox div.iconbox:hover div{ background: #FFE44F; } #orangebox:hover .iconcontainer{ display: block; background: transparent; }


#greenbox .imgbox{ width: 320px; height: 215px; background: #58CD45; } .gblank{ width: 320px; height: 104px; background: #B6FFA3; position: relative; top: 219px; left: -320px; } #greenbox .iconcontainer{ position: relative; margin-top: 4px; left: -999em; z-index: 1; } a.gbox1 div{ background: #72E85B; } a.gbox2 div{ background: #5BCD45; } a.gbox3 div{ background: #4CC035; } a.gbox4 div{ background: #44AF2F; } #greenbox div:hover, #greenbox div.iconbox:hover div{ background: #94FF7D; z-index: 99; /*hovers are not overridden by OSCAR boxes*/ } #greenbox:hover .gblank, .gblank:hover{ display: none; } #greenbox:hover .iconcontainer{ left: auto; background: transparent; }

#bluebox{ position: relative; top: -323px; left: 320px; } #bluebox .imgbox{ width: 320px; height: 215px; background: #5BB5E8; margin-left: 4px; } .bblank{ width: 320px; height: 104px; background: #C5F0F0; position: relative; top: 219px; left: -320px; z-index: 0; } #bluebox .iconcontainer{ position: relative; margin-top: 4px; left: -999em; z-index: 0; } a.bbox1 div{ background: #1574AA; } a.bbox2 div{ background: #2580B3; } a.bbox3 div{ background: #3285B4; } a.bbox4 div{ background: #4292BF; } a.bbox5 div{ background: #50A2D0; } a.bbox6 div{ background: #5BB5E8; margin: 0; } #bluebox div:hover, #bluebox .iconbox:hover div{ background: #7DD7FF; z-index: 99; /*hovers are not overridden by FRED boxes*/ } #bluebox:hover .bblank, .bblank:hover{ display: none; } #bluebox:hover .iconcontainer{ left: -212px; background: transparent; }

#boxinfo{ float: right; position: relative; width: 320px; left: 3px; background: #555555; height: 650px; margin-bottom: 12px; } #boxinfo h2{ color: white; padding: 20px 20px 0px; } #boxinfo p{ color: white; padding: 10px 20px 20px; font-size: 1.2em; } /*initial boxinfo appearance settings*/ #boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{ display: none; } #boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4, #boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{ position: relative; padding-top: 320px; display: none; } /*bold colours for FRED and OSCAR*/ #boxinfo div.greenbox b{ color: #72E85B; } #boxinfo div.bluebox b{ color: #5EB7F0; } .threeboxes{ clear: both; position: relative; width: 968px; margin-bottom: 12px; } .threeboxes a, .threeboxes a div{ width: 320px; height: 155px; float: left; margin-bottom: 12px; } .threeboxes div h2{ padding: 20px 20px 0px; position: relative; top: -155px; } .threeboxes div p{ padding: 0px 20px; position: relative; top: -155px; } #greybox1, #greybox6{ margin-right: 4px; background: #58CD45; } #greybox1:hover, #greybox6:hover{ background: #94FF7D; } #greybox2, #greybox5{ margin-right: 4px; background: #5BB5E8; } #greybox2:hover, #greybox5:hover{ background: #7DD7FF; } #greybox3, #greybox4{ margin: 0; background: #F6A82D; } #greybox3:hover, #greybox4:hover{ background: #FFE44F; }

  1. sponsorsbox{

clear: both; position: relative; width: 968px; margin: 4px 0px; background: #EEEEEE; } #sponsorsbox h2{ padding: 20px 20px 0px 20px; } #sponsorsbox p{ padding: 0px 20px; } #sponsorsbox table{ width: 950px; margin-left: auto; margin-right: auto; background: #EEEEEE; } #sponsorsbox td{ padding: 15px 0px; width: 300px; } #sponsorsbox img{ display: block; margin-right: auto; margin-left: auto; }

</style> </head> <body>

<a id="FredOscarFlag"> </a>

Operation CRISPR: Deploying precision guided tools to target unique species in a complex microbiome</h2>

In microbial communities, bacterial populations are commonly controlled using indiscriminate, broad range antibiotics. There are few ways to target specific strains effectively without disrupting the entire microbiome and local environment. The goal of our project is to take advantage of a natural horizontal gene transfer mechanism in bacteria to precisely affect gene expression in selected strains. We combine bacterial conjugation with CRISPRi, an RNAi-like repression system developed from bacteria, to regulate gene expression in targeted strains within a complex microbial community. One possible application is to selectively repress pathogenic genes in a microbiome, leaving the community makeup unaffected. In addition, we use CRISPRi to lay the groundwork for transferring large circuits that enable complex functionality and decision-making in cells.

</div>

<h2>Special Thanks to our 2013 iGEM Team Sponsors!</h2> <img align="center" style="margin-bottom:0px; width: 500px; margin-top:20px; padding:2; margin-left:55px;" src="2012%20Sponsors.jpg">


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