0
我用的fancybox一個網站我發展，我會非常感激，如果有人能回答我的問題：的fancybox背景的變化，當活動
爲什麼我的內容dissappear的大部件，當一個的fancybox活躍？
向下瀏覽圖庫部分，然後按一個，看看背景，你會明白我的意思。
我已經在我的發酵過程中使用了Fancybox很長一段時間，它已經工作過。
我認爲它與音樂播放器有關，但我不確定。
下面的代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>~ Dancing Lynx ~</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="jquery.fancybox.css" rel="stylesheet" type="text/css">
<link href="reset.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts/jquery.fancybox.js"></script>
<script src="scripts/jquery.fancybox.pack.js"></script>
<script src="scripts/smooth-scrolling.js"></script>
<script src="scripts/audioplugin/audiojs/audio.min.js"></script>
<script type="text/javascript"><!-- initialize FancyBox -->
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script><!-- initialize audio.js -->
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>
</head>
<body>
<div id="wrapper">
<nav>
<ul>
<li class="menu"><a href="#music-link" class="font">Music</a></li>
<li class="menu"><a href="#photos-link" class="font">Photos</a></li>
<li id="logo"><a href="#main"class="font">Dancing Lynx</a></li>
<li class="menu"><a href="#gigs-link"class="font">Gigs</a></li>
<li class="menu"><a href="#gigs-link" class="font">Contact</a></li>
</ul>
</nav>
<div id="main">
<img id="bg" src="imgs/1425352_579721732082124_799005686_o.jpg"/>
<header>
<p class="font-style" id="index-title">~ Dancing Lynx ~</p>
<div id="index-title"><a href="#music-link"><img id="enter" src="imgs/enter.png"/></a></div>
</header>
</div><!-- #main -->
<div id="music">
<p class="link" id="music-link"></p>
<hr id="title-bar" class="top">
<p class="font-style" id="music-title">Music</p>
<hr id="title-bar" class="bottom">
<ul>
<li><div class="song"><p class="song-title">City Lights</p><audio src="music/citylights.mp3" preload="auto" /></div></li>
<li><div class="song"><p class="song-title">One More Time</p><audio src="music/onemoretime.mp3" preload="auto" /></div></li>
<li><div class="song"><p class="song-title">She's A Killer</p><audio src="music/shesakiller.mp3" preload="auto" /></div></li>
<li><div class="song"><p class="song-title">Universe</p><audio src="music/universe.mp3" preload="auto" /></div></li>
</ul>
</div><!-- end #music -->
<div class="section" id="photos">
<p class="link" id="photos-link"></p><!-- Nav-Link -->
<hr id="title-bar"><!-- Not marked with as a ".top", because those attributes are contained in the selector "#photos". Otherwise, the title-bar would get stretched 20px or not extend "the grey area"-->
<p class="font-style" id="photos-title">Photos</p>
<hr id="title-bar" class="bottom">
<div id="photo-list">
<ul>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
<li><a class="fancybox" rel="group" href="imgs/photos/1.jpg"><img id="image" src="imgs/photos/1.jpg"></a></li>
</ul>
</div><!-- #photo-list -->
</div><!-- #photos -->
<div id="end">
<div id="gigs">
<p class="link" id="gigs-link"></p><!-- Nav-Link -->
<hr id="title-bar" class="top">
<p class="font-style">Gigs</p>
<hr id="title-bar" class="bottom">
<div id="gig-list">
<object type="text/html" data="gig-list.txt">
<param name="src" value="gig-list.txt">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
<a href="gig-list.txt">Gigs</a>
</object>
</div><!-- #gig-list -->
</div><!-- #gigs -->
<hr id="vertical-bar">
<div id="contact">
<p class="link" id="contact-link"></p>
<hr id="title-bar" class="top">
<p class="font-style">Contact</p>
<hr id="title-bar" class="bottom">
<ul>
<li class="font" id="top"><p>Mail:</p><a href="mailto:[email protected]">[email protected]</a></li>
<li class="font"><p>Phone:</p><p id="info">076-1232456</p></li>
</ul>
</div><!-- End #contact -->
</div><!-- End #end -->
<footer class="section">
<p class="font">Copyright: Dancing Lynx 2014</p>
<p class="font">Designed by: <a href="#">Adam Söderström</a></p>
</footer><!-- End footer -->
</div><!-- #wrapper -->
</body>
</html>
風格：
@charset "utf-8";
/* CSS Document */
/*
Additional Start
*/
html {
height: 100%;
}
body {
overflow-x: hidden;
height: 100%;
}
p, a, li {
letter-spacing: 1px;
}
#vertical-bar {
height: 645px;
width: 1px;
text-align: center;
float: left;
}
.font {
font-family: 'Lobster Two', Arial;
-webkit-font-smoothing: antialiased;
}
.font-style {
font-family: 'Lobster Two', Arial;
top: 50%;
text-align: center;
font-size: 108px;
font-weight: 700;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*
Link Preferences Start
Settings for the Nav and "#enter"-links are set inside of these different selectors
*/
.link {
position: absolute;
}
#music-link, #photos-link {
margin-top: -120px;
}
#gigs-link, #contact-link {
margin-top: -109px;
}
/*
Link Preferences End
*/
/*
Title Bar Start
The bars on the top and the bottom of the title of the different sections.
*/
#title-bar {
width: 25%;
height: 1px;
border: 0;
color: #969696;
background-color: #969696;
}
#photos #title-bar {
width: 25%;
height: 1px;
border: 0;
color: #FFF;
background-color: #FFF;
}
.top {
margin-top: 20px;
}
.bottom {
margin-bottom: 20px;
}
/*
Title Bar End
*/
#wrapper {
width: 100%;
background: -webkit-linear-gradient(#FFF, #EEF); /* For Safari */
background: -o-linear-gradient(#FFF, #EEF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFF, #EEF); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFF, #EEF); /* Standard syntax */
}
#bg {
position: relative;
margin: 0 auto;
min-height: 100%;
}
.section {
width: 100%;
padding-bottom: 100px;
background-image: url(imgs/bg-noise.png);
overflow-x: hidden;
}
/*
Additional End
*/
/*
Nav Start (Shown on the top of the screen and works as a tool to navigate through the site)
*/
nav {
z-index: 999;
width: 100%;
height: 100px;
position: fixed;
text-align: center;
background: -webkit-linear-gradient(#FFF, #EEF); /* For Safari */
background: -o-linear-gradient(#FFF, #EEF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFF, #EEF); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFF, #EEF); /* Standard syntax */
box-shadow: 20px 0 20px #000;
}
li {
list-style-type: none;
display: inline;
}
nav a {
display: inline-block;
padding: 0 20px;
margin-top: 25px;
font-weight: 400;
color: #000;
text-decoration: none;
}
.menu {
font-size: 36px;
}
#logo {
font-size: 48px;
}
/*
Nav End
*/
/*
Main Page Start (Shown when site is entered)
*/
#index-title {
position: absolute;
width: 100%;
top: 50%;
text-align: center;
font-size: 108px;
color: #FFF;
}
#enter {
width: 108px;
margin-top: 150px;
}
/*
Main Page End
*/
/*
Music Page Start (Can be shown by scrolling down the page, pressing the circular "arrow"-button and by clicking on "Music" in the nav.
*/
#music {
position: relative;
width: 460px;
margin: 0 auto;
padding-bottom: 100px;
}
#music div {
margin: 0 auto;
}
.song-title {
font-family: 'Lobster Two', Arial;
text-decoration: underline;
-webkit-font-smoothing: antialiased;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
/*
Music Page End
*/
/*
Photos Page Start
*/
#photos {
padding-top: 20px;
background-image: url(imgs/bg-noise.png);
background-image: url(imgs/bg-noise.png), -webkit-gradient(linear, left top, left bottom, from(#333), to(#111)); /* Saf4+, Chrome */
background-image: url(imgs/bg-noise.png), -webkit-linear-gradient(top, #333, ##111); /* Chrome 10+, Saf5.1+ */
background-image: url(imgs/bg-noise.png), -moz-linear-gradient(top, #333, #111); /* FF3.6+ */
background-image: url(imgs/bg-noise.png), -ms-linear-gradient(top, #333, #111); /* IE10 */
background-image: url(imgs/bg-noise.png), -o-linear-gradient(top, #333, #111); /* Opera 11.10+ */
background-image: url(imgs/bg-noise.png), linear-gradient(top,#333, #111); /* W3C */
box-shadow: inset 0 0 20px #000;
}
#photos-title {
color: #FFF;
text-shadow: 0 5px 5px #000;
}
#photo-list {
text-align: center;
}
#photo-list ul {
margin: 0 auto;
}
#photo-list li {
padding: 10px;
}
#image {
width: 20%;
margin-bottom: 20px;
border: solid;
border-width: 5px;
border-color: #666;
box-shadow: 0 5px 5px #000;
}
/*
Photos Page End
*/
/*
Gigs and Contact Page Start
*/
/*
Gigs and Contact Page End
*/
#end {
padding-top: 10px;
height: 670px;
background:url(imgs/bg-noise.png), #FFF;
margin-bottom: 210px;
}
/*
Gigs Page Start
*/
#gigs {
width: 50%;
height: 310px;
float: left;
}
#gig-list {
text-align: center;
margin: 0 auto;
}
#gig-list object {
text-align: center;
margin: 0 auto;
width: 200px;
height: 490px;
}
<!-- Height and width needs to be changed, if the list gets longer and wider. -->
/*
Gigs Page End
*/
/*
Contact Page Start
*/
#contact {
width: 50%;
}
#contact ul{
text-align: center;
}
#contact li#top {
padding: 0px;
}
#contact li {
display: inline-block;
padding: 20px;
}
#contact p, a {
padding: 5px;
}
#contact p {
font-weight: 700;
}
#contact a, #info {
color: #555;
text-decoration:underline;
}
#contact a:hover {
color: #333;
}
/*
Contact Page End
*/
/*
Footer Start
*/
footer {
position: fixed;
bottom: 0;
z-index: -1;
display: block;
overflow: hidden;
width: 100%;
text-align: center;
background: #333;
box-shadow: inset 0 0 20px #000;
text-align: center;
vertical-align: middle;
line-height: 210px;
}
footer p, a {
padding-top: 100px;
padding: 20px;
color: #777;
}
footer a:hover {
color: #999;
}
/*
Footer End
*/
在此先感謝！
你是指背後的內容消失了嗎？ – jmore009
正確！我沒有找到它消失的具體原因。 – Foley
1）。如果鏈接的內容發生變化，問題就變得無關緊要。嘗試在這裏發佈您的相關代碼。 2）嘗試[驗證]（http://validator.w3.org/check?uri=http://dancinglynx.adamsoderstrom.com/）您的頁面以查找潛在問題。 3）。使用fancybox.js或fancybox.pack.js，但不能同時使用。 – JFK