Team:Johns Hopkins/fancyboxcss

From 2011.igem.org

(Difference between revisions)
Line 16: Line 16:
  */
  */
-
#fancybox-loading {
+
div#fancy_overlay {
-
position: fixed;
+
position:absolute;
-
top: 50%;
+
top: 0;
-
left: 50%;
+
left: 0;
-
width: 40px;
+
z-index: 90;
 +
width: 100%;
 +
background-color: #333;
 +
}
 +
 
 +
div#fancy_loading {
 +
position: absolute;
height: 40px;
height: 40px;
-
margin-top: -20px;
+
width: 40px;
-
margin-left: -20px;
+
cursor: pointer;
cursor: pointer;
-
overflow: hidden;
 
-
z-index: 1104;
 
display: none;
display: none;
 +
overflow: hidden;
 +
background: transparent;
 +
z-index: 100;
}
}
-
#fancybox-loading div {
+
div#fancy_loading div {
position: absolute;
position: absolute;
top: 0;
top: 0;
Line 36: Line 42:
width: 40px;
width: 40px;
height: 480px;
height: 480px;
-
background-image: url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png');
+
background: transparent url(fancy_progress.png) no-repeat;
}
}
-
#fancybox-overlay {
+
div#fancy_close {
position: absolute;
position: absolute;
-
top: 0;
+
top: -12px;
-
left: 0;
+
right: -12px;
-
width: 100%;
+
height: 30px;
-
z-index: 1100;
+
width: 30px;
-
display: none;
+
background: transparent url(fancy_closebox.png) ;
-
}
+
cursor: pointer;
-
 
+
z-index: 100;
-
#fancybox-tmp {
+
-
padding: 0;
+
-
margin: 0;
+
-
border: 0;
+
-
overflow: auto;
+
display: none;
display: none;
}
}
-
#fancybox-wrap {
+
div#fancy_content {
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 0;
-
padding: 20px;
+
width: 100%;
-
z-index: 1101;
+
height: 100%;
-
outline: none;
+
padding: 0;  
-
display: none;
+
margin: 0;
 +
z-index: 96;
}
}
-
#fancybox-outer {
+
#fancy_frame {
position: relative;
position: relative;
width: 100%;
width: 100%;
height: 100%;
height: 100%;
-
background: #fff;
+
display: none;
-
}
+
-
 
+
-
#fancybox-content {
+
-
width: 0;
+
-
height: 0;
+
-
padding: 0;
+
-
outline: none;
+
-
position: relative;
+
-
overflow: hidden;
+
-
z-index: 1102;
+
-
border: 0px solid #fff;
+
}
}
-
#fancybox-hide-sel-frame {
+
img#fancy_img {
position: absolute;
position: absolute;
top: 0;
top: 0;
Line 90: Line 81:
width: 100%;
width: 100%;
height: 100%;
height: 100%;
-
background: transparent;
+
border:0;
-
z-index: 1101;
+
padding: 0;
 +
margin: 0;
 +
z-index: 92;
}
}
-
#fancybox-close {
+
div#fancy_title {
position: absolute;
position: absolute;
-
top: -15px;
+
bottom: -35px;
-
right: -15px;
+
left: 0;
-
width: 30px;
+
width: 100%;
-
height: 30px;
+
z-index: 100;
-
background: transparent url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png') -40px 0px;
+
-
cursor: pointer;
+
-
z-index: 1103;
+
display: none;
display: none;
}
}
-
#fancybox-error {
+
div#fancy_title table {
-
color: #444;
+
margin: 0 auto;
-
font: normal 12px/20px Arial;
+
-
padding: 14px;
+
-
margin: 0;
+
}
}
-
#fancybox-img {
+
div#fancy_title div {
-
width: 100%;
+
color: #FFF;
-
height: 100%;
+
font: bold 12px Arial;
-
padding: 0;
+
padding-bottom: 2px;
-
margin: 0;
+
-
border: none;
+
-
outline: none;
+
-
line-height: 0;
+
-
vertical-align: top;
+
}
}
-
#fancybox-frame {
+
td#fancy_title_left {
-
width: 100%;
+
height: 32px;
-
height: 100%;
+
width: 15px;
-
border: none;
+
background: transparent url(fancy_title_left.png) repeat-x;
-
display: block;
+
}
}
-
#fancybox-left, #fancybox-right {
+
td#fancy_title_main {
-
position: absolute;
+
height: 32px;
-
bottom: 0px;
+
background: transparent url(fancy_title_main.png) repeat-x;
-
height: 100%;
+
-
width: 35%;
+
-
cursor: pointer;
+
-
outline: none;
+
-
background: transparent url('blank.gif');
+
-
z-index: 1102;
+
-
display: none;
+
}
}
-
#fancybox-left {
+
td#fancy_title_right {
-
left: 0px;
+
height: 32px;
 +
width: 15px;
 +
background: transparent url(fancy_title_right.png) repeat-x;
}
}
-
#fancybox-right {
+
div#fancy_outer {
-
right: 0px;
+
-
}
+
-
 
+
-
#fancybox-left-ico, #fancybox-right-ico {
+
position: absolute;
position: absolute;
-
top: 50%;
+
    top: 0;
-
left: -9999px;
+
    left: 0;
-
width: 30px;
+
    z-index: 90;
-
height: 30px;
+
    padding: 18px 18px 58px 18px;
-
margin-top: -15px;
+
    margin: 0;
-
cursor: pointer;
+
    overflow: hidden;
-
z-index: 1102;
+
    background: transparent;
-
display: block;
+
    display: none;
}
}
-
#fancybox-left-ico {
+
div#fancy_inner {
-
background-image: url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png');
+
position: relative;
-
background-position: -40px -30px;
+
width:100%;
 +
height:100%;
 +
border: 1px solid #444;
 +
background: #FFF;
}
}
-
#fancybox-right-ico {
+
a#fancy_left, a#fancy_right {
-
background-image: url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png');
+
position: absolute;
-
background-position: -40px -60px;
+
bottom: 10px;
 +
height: 100%;
 +
width: 35%;
 +
cursor: pointer;
 +
background-image: url(data:image/gif;base64,AAAA);
 +
z-index: 100;  
}
}
-
#fancybox-left:hover, #fancybox-right:hover {
+
a#fancy_left {
-
visibility: visible; /* IE6 */
+
left: 0px;  
}
}
-
#fancybox-left:hover span {
+
a#fancy_right {
-
left: 20px;
+
right: 0px;  
}
}
-
#fancybox-right:hover span {
+
a#fancy_left:hover {
-
left: auto;
+
background: transparent url(fancy_left.gif) no-repeat 0% 100%;
-
right: 20px;
+
}
}
-
.fancybox-bg {
+
a#fancy_right:hover {
-
position: absolute;
+
background: transparent url(fancy_right.gif) no-repeat 100% 100%;
-
padding: 0;
+
-
margin: 0;
+
-
border: 0;
+
-
width: 20px;
+
-
height: 20px;
+
-
z-index: 1001;
+
}
}
-
#fancybox-bg-n {
+
#fancy_bigIframe, #fancy_freeIframe {
-
top: -20px;
+
position:absolute;
-
left: 0;
+
-
width: 100%;
+
-
background-image: url('https://static.igem.org/mediawiki/2011/2/2d/Fancybox-x.png');
+
-
}
+
-
 
+
-
#fancybox-bg-ne {
+
-
top: -20px;
+
-
right: -20px;
+
-
background-image: url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png');
+
-
background-position: -40px -162px;
+
-
}
+
-
 
+
-
#fancybox-bg-e {
+
top: 0;
top: 0;
-
right: -20px;
 
-
height: 100%;
 
-
background-image: url('https://static.igem.org/mediawiki/2011/f/fe/Fancybox-y.png');
 
-
background-position: -20px 0px;
 
-
}
 
-
 
-
#fancybox-bg-se {
 
-
bottom: -20px;
 
-
right: -20px;
 
-
background-image: url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png');
 
-
background-position: -40px -182px;
 
-
}
 
-
 
-
#fancybox-bg-s {
 
-
bottom: -20px;
 
left: 0;
left: 0;
width: 100%;
width: 100%;
-
background-image: url('https://static.igem.org/mediawiki/2011/2/2d/Fancybox-x.png');
 
-
background-position: 0px -20px;
 
-
}
 
-
 
-
#fancybox-bg-sw {
 
-
bottom: -20px;
 
-
left: -20px;
 
-
background-image: url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png');
 
-
background-position: -40px -142px;
 
-
}
 
-
 
-
#fancybox-bg-w {
 
-
top: 0;
 
-
left: -20px;
 
height: 100%;
height: 100%;
-
background-image: url('https://static.igem.org/mediawiki/2011/f/fe/Fancybox-y.png');
+
z-index: 10;
}
}
-
#fancybox-bg-nw {
+
div#fancy_bg {
-
top: -20px;
+
display: none;
-
left: -20px;
+
-
background-image: url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png');
+
-
background-position: -40px -122px;
+
}
}
-
 
+
-
#fancybox-title {
+
div.fancy_bg {
-
font-family: Helvetica;
+
-
font-size: 12px;
+
-
z-index: 1102;
+
-
}
+
-
 
+
-
.fancybox-title-inside {
+
-
padding-bottom: 10px;
+
-
text-align: center;
+
-
color: #333;
+
-
background: #fff;
+
-
position: relative;
+
-
}
+
-
 
+
-
.fancybox-title-outside {
+
-
padding-top: 10px;
+
-
color: #fff;
+
-
}
+
-
 
+
-
.fancybox-title-over {
+
position: absolute;
position: absolute;
-
bottom: 0;
 
-
left: 0;
 
-
color: #FFF;
 
-
text-align: left;
 
-
}
 
-
 
-
#fancybox-title-over {
 
-
padding: 10px;
 
-
background-image: url('https://static.igem.org/mediawiki/2011/8/81/JHU_Fancy_title_over.png');
 
display: block;
display: block;
 +
z-index: 70;
}
}
-
.fancybox-title-float {
+
div.fancy_bg_n {
-
position: absolute;
+
top: -18px;
-
left: 0;
+
width: 100%;
-
bottom: -20px;
+
height: 18px;
-
height: 32px;
+
background: transparent url(fancy_shadow_n.png) repeat-x;
}
}
-
#fancybox-title-float-wrap {
+
div.fancy_bg_ne {
-
border: none;
+
top: -18px;
-
border-collapse: collapse;
+
right: -13px;
-
width: auto;
+
width: 13px;
 +
height: 18px;
 +
background: transparent url(fancy_shadow_ne.png) no-repeat;
}
}
-
#fancybox-title-float-wrap td {
+
div.fancy_bg_e {
-
border: none;
+
right: -13px;
-
white-space: nowrap;
+
height: 100%;
 +
width: 13px;
 +
background: transparent url(fancy_shadow_e.png) repeat-y;
}
}
-
#fancybox-title-float-left {
+
div.fancy_bg_se {
-
padding: 0 0 0 15px;
+
bottom: -18px;
-
background: url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png') -40px -90px no-repeat;
+
right: -13px;
 +
width: 13px;
 +
height: 18px;
 +
background: transparent url(fancy_shadow_se.png) no-repeat;
}
}
-
#fancybox-title-float-main {
+
div.fancy_bg_s {
-
color: #FFF;
+
bottom: -18px;
-
line-height: 29px;
+
width: 100%;
-
font-weight: bold;
+
height: 18px;
-
padding: 0 0 3px 0;
+
background: transparent url(fancy_shadow_s.png) repeat-x;
-
background: url('https://static.igem.org/mediawiki/2011/2/2d/Fancybox-x.png') 0px -40px;
+
}
}
-
#fancybox-title-float-right {
+
div.fancy_bg_sw {
-
padding: 0 0 0 15px;
+
bottom: -18px;
-
background: url('https://static.igem.org/mediawiki/2011/3/33/JHU_Fancybox.png') -55px -90px no-repeat;
+
left: -13px;
 +
width: 13px;
 +
height: 18px;
 +
background: transparent url(fancy_shadow_sw.png) no-repeat;
}
}
-
/* IE6 */
+
div.fancy_bg_w {
-
 
+
left: -13px;
-
.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); }
+
height: 100%;
-
 
+
width: 13px;
-
.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_left.png', sizingMethod='scale'); }
+
background: transparent url(fancy_shadow_w.png) repeat-y;
-
.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_right.png', sizingMethod='scale'); }
+
-
 
+
-
.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
+
-
.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_left.png', sizingMethod='scale'); }
+
-
.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_main.png', sizingMethod='scale'); }
+
-
.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_right.png', sizingMethod='scale'); }
+
-
 
+
-
.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
+
-
height: expression(this.parentNode.clientHeight + "px");
+
}
}
-
#fancybox-loading.fancybox-ie6 {
+
div.fancy_bg_nw {
-
position: absolute; margin-top: 0;
+
top: -18px;
-
top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
+
left: -13px;
 +
width: 13px;
 +
height: 18px;
 +
background: transparent url(fancy_shadow_nw.png) no-repeat;
}
}
-
 
-
#fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://static.igem.org/mediawiki/2011/e/eb/JHUFancy_loading.png', sizingMethod='scale'); }
 
-
 
-
/* IE6, IE7, IE8 */
 
-
 
-
.fancybox-ie .fancybox-bg { background: transparent !important; }
 
-
 
-
.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
 
-
.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
 
-
.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
 
-
.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
 
-
.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
 
-
.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
 
-
.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
 
-
.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }
 

Revision as of 05:56, 28 October 2011

/* 

* FancyBox - jQuery Plugin
* Simple and fancy lightbox alternative
*
* Examples and documentation at: http://fancybox.net
* 
* Copyright (c) 2008 - 2010 Janis Skarnelis
* That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
* 
* Version: 1.3.4 (11/11/2010)
* Requires: jQuery v1.3+
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*/

div#fancy_overlay { position:absolute; top: 0; left: 0; z-index: 90; width: 100%; background-color: #333; }

div#fancy_loading { position: absolute; height: 40px; width: 40px; cursor: pointer; display: none; overflow: hidden; background: transparent; z-index: 100; }

div#fancy_loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background: transparent url(fancy_progress.png) no-repeat; }

div#fancy_close { position: absolute; top: -12px; right: -12px; height: 30px; width: 30px; background: transparent url(fancy_closebox.png) ; cursor: pointer; z-index: 100; display: none; }

div#fancy_content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; z-index: 96; }

  1. fancy_frame {

position: relative; width: 100%; height: 100%; display: none; }

img#fancy_img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0; padding: 0; margin: 0; z-index: 92; }

div#fancy_title { position: absolute; bottom: -35px; left: 0; width: 100%; z-index: 100; display: none; }

div#fancy_title table { margin: 0 auto; }

div#fancy_title div { color: #FFF; font: bold 12px Arial; padding-bottom: 2px; }

td#fancy_title_left { height: 32px; width: 15px; background: transparent url(fancy_title_left.png) repeat-x; }

td#fancy_title_main { height: 32px; background: transparent url(fancy_title_main.png) repeat-x; }

td#fancy_title_right { height: 32px; width: 15px; background: transparent url(fancy_title_right.png) repeat-x; }

div#fancy_outer { position: absolute; 

   top: 0;
   left: 0;
   z-index: 90;
   padding: 18px 18px 58px 18px;
   margin: 0;
   overflow: hidden;
   background: transparent;
   display: none;

}

div#fancy_inner { position: relative; width:100%; height:100%; border: 1px solid #444; background: #FFF; }

a#fancy_left, a#fancy_right { position: absolute; bottom: 10px; height: 100%; width: 35%; cursor: pointer; background-image: url(data:image/gif;base64,AAAA); z-index: 100; }

a#fancy_left { left: 0px; }

a#fancy_right { right: 0px; }

a#fancy_left:hover { background: transparent url(fancy_left.gif) no-repeat 0% 100%; }

a#fancy_right:hover { background: transparent url(fancy_right.gif) no-repeat 100% 100%; }

  1. fancy_bigIframe, #fancy_freeIframe {

position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }

div#fancy_bg { display: none; }

div.fancy_bg { position: absolute; display: block; z-index: 70; }

div.fancy_bg_n { top: -18px; width: 100%; height: 18px; background: transparent url(fancy_shadow_n.png) repeat-x; }

div.fancy_bg_ne { top: -18px; right: -13px; width: 13px; height: 18px; background: transparent url(fancy_shadow_ne.png) no-repeat; }

div.fancy_bg_e { right: -13px; height: 100%; width: 13px; background: transparent url(fancy_shadow_e.png) repeat-y; }

div.fancy_bg_se { bottom: -18px; right: -13px; width: 13px; height: 18px; background: transparent url(fancy_shadow_se.png) no-repeat; }

div.fancy_bg_s { bottom: -18px; width: 100%; height: 18px; background: transparent url(fancy_shadow_s.png) repeat-x; }

div.fancy_bg_sw { bottom: -18px; left: -13px; width: 13px; height: 18px; background: transparent url(fancy_shadow_sw.png) no-repeat; }

div.fancy_bg_w { left: -13px; height: 100%; width: 13px; background: transparent url(fancy_shadow_w.png) repeat-y; }

div.fancy_bg_nw { top: -18px; left: -13px; width: 13px; height: 18px; background: transparent url(fancy_shadow_nw.png) no-repeat; }

Retrieved from "http://2011.igem.org/Team:Johns_Hopkins/fancyboxcss"