Template:HarvardFancybox

From 2010.igem.org

(Difference between revisions)
(New page: <style> html, body { margin: 0; padding: 0; } body { background: #F2F2F2; font-family: Arial; font-size: 13px; line-height: 1.6; color: #444; } #content { width: 350px; margin:...)
(Undo revision 132672 by Aarondeardon (Talk))
 
(15 intermediate revisions not shown)
Line 1: Line 1:
 +
<html>
 +
<script type="text/javascript" src="http://michaelcorkrey.com/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.js"></script>
<style>
<style>
-
html, body {
+
#fancybox-loading {
 +
position: fixed;
 +
top: 50%;
 +
left: 50%;
 +
height: 40px;
 +
width: 40px;
 +
margin-top: -20px;
 +
margin-left: -20px;
 +
cursor: pointer;
 +
overflow: hidden;
 +
z-index: 1104;
 +
display: none;
 +
}
 +
 
 +
* html #fancybox-loading { /* IE6 */
 +
position: absolute;
 +
margin-top: 0;
 +
}
 +
 
 +
#fancybox-loading div {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 40px;
 +
height: 480px;
 +
background-image: url('https://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
}
 +
 
 +
#fancybox-overlay {
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
right: 0;
 +
background: #000;
 +
z-index: 1100;
 +
display: none;
 +
}
 +
 
 +
* html #fancybox-overlay { /* IE6 */
 +
position: absolute;
 +
width: 100%;
 +
}
 +
 
 +
#fancybox-tmp {
 +
padding: 0;
margin: 0;
margin: 0;
-
padding: 0;
+
border: 0;
 +
overflow: auto;
 +
display: none;
}
}
-
body {
+
#fancybox-wrap {
-
background: #F2F2F2;
+
position: absolute;
-
font-family: Arial;
+
top: 0;
-
font-size: 13px;
+
left: 0;
-
line-height: 1.6;
+
margin: 0;
-
color: #444;
+
padding: 20px;
 +
z-index: 1101;
 +
display: none;
}
}
-
#content {
+
#fancybox-outer {
-
width: 350px;
+
position: relative;
-
margin: 30px auto;
+
width: 100%;
-
padding: 20px 60px;
+
height: 100%;
-
border: 1px solid #D2D2D2;
+
-
-moz-box-shadow: 0 0 30px #CCC;
+
-
-webkit-box-shadow: 0 0 30px #CCC;
+
-
box-shadow: 0 0 30px #CCC;
+
background: #FFF;
background: #FFF;
-
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
 
-
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 15px);
 
}
}
-
h1 {
+
#fancybox-inner {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 1px;
 +
height: 1px;
 +
padding: 0;
margin: 0;
margin: 0;
-
font-size: 30px;
+
outline: none;
-
font-weight: normal;
+
overflow: hidden;
-
font-family: "Museo 700", Arial;
+
}
}
-
h1 em {
+
#fancybox-hide-sel-frame {
-
font-size: 50%;
+
position: absolute;
-
letter-spacing: -0.05em;
+
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
background: transparent;
}
}
-
h2 {
+
#fancybox-close {
 +
position: absolute;
 +
top: -15px;
 +
right: -15px;
 +
width: 30px;
 +
height: 30px;
 +
background-image: url('hhttps://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
background-position: -40px 0px;
 +
cursor: pointer;
 +
z-index: 1103;
 +
display: none;
 +
}
 +
 
 +
#fancybox_error {
 +
color: #444;
 +
font: normal 12px/20px Arial;
 +
padding: 7px;
margin: 0;
margin: 0;
}
}
-
hr {
+
#fancybox-content {
-
border: none;
+
height: auto;
-
height: 1px; line-height: 1px;
+
width: auto;
-
background: #D8D8D8;
+
-
margin-bottom: 20px;
+
padding: 0;
padding: 0;
 +
margin: 0;
}
}
-
p {
+
#fancybox-img {
 +
width: 100%;
 +
height: 100%;
 +
padding: 0;
margin: 0;
margin: 0;
-
padding-bottom: 14px;
+
border: none;
 +
outline: none;
 +
line-height: 0;
 +
vertical-align: top;
 +
-ms-interpolation-mode: bicubic;
}
}
-
a {
+
#fancybox-frame {
-
outline: none;
+
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
border: none;
 +
display: block;
}
}
-
a img {
+
#fancybox-title {
-
border: 1px solid #BBB;
+
position: absolute;
-
padding: 2px;
+
bottom: 0;
-
margin: 10px 30px 10px 0;
+
left: 0;
-
vertical-align: top;
+
font-family: Arial;
 +
font-size: 12px;
 +
z-index: 1102;
}
}
-
ul {
+
.fancybox-title-inside {
-
margin: -7px 0 24px 0;
+
padding: 10px 0;
 +
text-align: center;
 +
color: #333;
 +
}
 +
 
 +
.fancybox-title-outside {
 +
padding-top: 5px;
 +
color: #FFF;
 +
text-align: center;
 +
font-weight: bold;
 +
}
 +
 
 +
.fancybox-title-over {
 +
color: #FFF;
 +
text-align: left;
 +
}
 +
 
 +
#fancybox-title-over {
 +
padding: 10px;
 +
background-image: url('https://static.igem.org/mediawiki/2010/c/ca/Fancy_title_over.png');
 +
display: block;
 +
}
 +
 
 +
#fancybox-title-wrap {
 +
display: inline-block;
 +
}
 +
 
 +
#fancybox-title-wrap span {
 +
height: 32px;
 +
float: left;
 +
}
 +
 
 +
#fancybox-title-left {
 +
padding-left: 15px;
 +
background-image: url('https://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
background-position: -40px -90px;
 +
background-repeat: no-repeat;
 +
}
 +
 
 +
#fancybox-title-main {
 +
font-weight: bold;
 +
line-height: 29px;
 +
background-image: url('https://static.igem.org/mediawiki/2010/2/2d/Fancybox-x.png');
 +
background-position: 0px -40px;
 +
color: #FFF;
 +
}
 +
 
 +
#fancybox-title-right {
 +
padding-left: 15px;
 +
background-image: url('https://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
background-position: -55px -90px;
 +
background-repeat: no-repeat;
 +
}
 +
 
 +
#fancybox-left, #fancybox-right {
 +
position: absolute;
 +
bottom: 0px;
 +
height: 100%;
 +
width: 35%;
 +
cursor: pointer;
 +
outline: none;
 +
background-image: url('https://static.igem.org/mediawiki/2010/c/c0/Blank.gif');
 +
z-index: 1102;
 +
display: none;
 +
}
 +
 
 +
#fancybox-left {
 +
left: 0px;
 +
}
 +
 
 +
#fancybox-right {
 +
right: 0px;
 +
}
 +
 
 +
#fancybox-left-ico, #fancybox-right-ico {
 +
position: absolute;
 +
top: 50%;
 +
left: -9999px;
 +
width: 30px;
 +
height: 30px;
 +
margin-top: -15px;
 +
cursor: pointer;
 +
z-index: 1102;
 +
display: block;
 +
}
 +
 
 +
#fancybox-left-ico {
 +
background-image: url('https://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
background-position: -40px -30px;
 +
}
 +
 
 +
#fancybox-right-ico {
 +
background-image: url('https://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
background-position: -40px -60px;
 +
}
 +
 
 +
#fancybox-left:hover, #fancybox-right:hover {
 +
visibility: visible;    /* IE6 */
 +
}
 +
 
 +
#fancybox-left:hover span {
 +
left: 20px;
 +
}
 +
 
 +
#fancybox-right:hover span {
 +
left: auto;
 +
right: 20px;
 +
}
 +
 
 +
.fancy-bg {
 +
position: absolute;
 +
padding: 0;
 +
margin: 0;
 +
border: 0;
 +
width: 20px;
 +
height: 20px;
 +
z-index: 1001;
 +
}
 +
 
 +
#fancy-bg-n {
 +
top: -20px;
 +
left: 0;
 +
width: 100%;
 +
background-image: url('https://static.igem.org/mediawiki/2010/2/2d/Fancybox-x.png');
 +
}
 +
 
 +
#fancy-bg-ne {
 +
top: -20px;
 +
right: -20px;
 +
background-image: url('https://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
background-position: -40px -162px;
 +
}
 +
 
 +
#fancy-bg-e {
 +
top: 0;
 +
right: -20px;
 +
height: 100%;
 +
background-image: url('https://static.igem.org/mediawiki/2010/f/fe/Fancybox-y.png');
 +
background-position: -20px 0px;
 +
}
 +
 
 +
#fancy-bg-se {
 +
bottom: -20px;
 +
right: -20px;
 +
background-image: url('https://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
background-position: -40px -182px;
 +
}
 +
 
 +
#fancy-bg-s {
 +
bottom: -20px;
 +
left: 0;
 +
width: 100%;
 +
background-image: url('https://static.igem.org/mediawiki/2010/2/2d/Fancybox-x.png');
 +
background-position: 0px -20px;
 +
}
 +
 
 +
#fancy-bg-sw {
 +
bottom: -20px;
 +
left: -20px;
 +
background-image: url('https://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
background-position: -40px -142px;
 +
}
 +
 
 +
#fancy-bg-w {
 +
top: 0;
 +
left: -20px;
 +
height: 100%;
 +
background-image: url('https://static.igem.org/mediawiki/2010/f/fe/Fancybox-y.png');
 +
}
 +
 
 +
#fancy-bg-nw {
 +
top: -20px;
 +
left: -20px;
 +
background-image: url('https://static.igem.org/mediawiki/2010/4/4e/Fancybox.png');
 +
background-position: -40px -122px;
 +
}
 +
 
 +
/* IE */
 +
 
 +
#fancybox-loading.fancybox-ie div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/a/af/Fancy_loading.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/5/57/Fancy_close.png', sizingMethod='scale'); }
 +
 
 +
.fancybox-ie #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/c/ca/Fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
 +
.fancybox-ie #fancybox-title-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/7/7e/Fancy_title_left.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancybox-title-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/1/16/Fancy_title_main.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancybox-title-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/6/65/Fancy_title_right.png', sizingMethod='scale'); }
 +
 
 +
.fancybox-ie #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/6/66/Fancy_nav_left.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/3/3d/Fancy_nav_right.png', sizingMethod='scale'); }
 +
 
 +
.fancybox-ie .fancy-bg { background: transparent !important; }
 +
 
 +
.fancybox-ie #fancy-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/9/91/Fancy_shadow_n.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/5/5c/Fancy_shadow_ne.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/4/4a/Fancy_shadow_e.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/9/97/Fancy_shadow_se.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/7/73/Fancy_shadow_s.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/9/9e/Fancy_shadow_sw.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/1/16/Fancy_shadow_w.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2010/a/a6/Fancy_shadow_nw.png', sizingMethod='scale'); }
 +
 
}
}
</style>
</style>
 +
 +
<script type="text/javascript">
 +
    $(document).ready(function() {
 +
 +
    /* This is basic - uses default settings */
 +
 
 +
    $("a#single_image").fancybox();
 +
 
 +
    /* Using custom settings */
 +
 
 +
    $("a#inline").fancybox({
 +
        'hideOnContentClick': true
 +
    });
 +
 +
    /* Apply fancybox to multiple items */
 +
 
 +
    $("a.group").fancybox({
 +
        'transitionIn'    :    'elastic',
 +
        'transitionOut'    :    'elastic',
 +
        'speedIn'        :    600,
 +
        'speedOut'        :    200,
 +
        'overlayShow'    :    false,
 +
    });
 +
 
 +
});
 +
 +
   
 +
</script> 
 +
 +
</html>

Latest revision as of 14:34, 24 October 2010

Retrieved from "http://2010.igem.org/Template:HarvardFancybox"