Fancybox-фон меняется, когда активен

Question

Fancybox-фон меняется, когда активен

0

Я использовал 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 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
*/

заранее спасибо!

Foley 02 март 2014, в 23:43

Источник

0

Вы имеете в виду, что содержание позади исчезает?
jmore009 02 март 2014, в 22:15
0

Верный! Я не нахожу конкретной причины, по которой он исчезает.
Foley 02 март 2014, в 22:20
0

1). если содержание ссылки меняется, вопрос становится неактуальным. попробуйте разместить здесь свой соответствующий код. 2) попробуйте проверить свою страницу, чтобы найти потенциальные проблемы. 3). Используйте либо fancybox.js, либо fancybox.pack.js, но не оба одновременно.
JFK 02 март 2014, в 22:45

Показать ещё 1 комментарий

Теги:

jquery

html

fancybox

1 ответ

Ещё вопросы

Вы имеете в виду, что содержание позади исчезает?
Верный! Я не нахожу конкретной причины, по которой он исчезает.
1). если содержание ссылки меняется, вопрос становится неактуальным. попробуйте разместить здесь свой соответствующий код. 2) попробуйте проверить свою страницу, чтобы найти потенциальные проблемы. 3). Используйте либо fancybox.js, либо fancybox.pack.js, но не оба одновременно.

jmore009 · Answer 1 · 2014-03-02T20-22-00.000Z

есть класс, добавляемый в тег html называемый fancybox-lock который имеет overflow: hidden !important если вы можете найти, что в таблице стилей и удалить его все должно быть установлено.

Класс fancybox-lock - это стандартная функциональность fancybox, которую можно переключать с помощью опции API, не связываясь с оригинальными файлами плагина. Этот ответ может исправить текущую проблему (в Chrome, между прочим), но не решает ее или указывает на ее основную причину.
Тоже правильно! Я собираюсь опубликовать код, кстати.