Fancybox-background在激活时更改

时间:2014-03-02 22:12:52

标签: jquery html fancybox

我已经将Fancybox用于我正在开发的网站,如果有人能回答我的问题,我会非常感激:

当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@domain.com">email@domain.com</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
*/

提前感谢!

1 个答案:

答案 0 :(得分:0)

如果您可以在样式表中找到并删除它,则html标记fancybox-lock中有一个类overflow: hidden !important已添加{{1}}。