小提琴:https://jsfiddle.net/jzhang172/bft7fb6t/
视差图像没有出现在fancybox发布上。当您调整输出窗口的大小时,图像将出现,但它不是视差方式。我做错了什么?
$('.section1').click(function(){
$.fancybox({
type: 'inline',
href: '#fancy-about',
helpers : {
overlay : {
css : {
'background' : 'blue'
}
}
}
});
});
.parallax-window {
min-height: 400px; background: transparent;
}
.section1{
height:200px;
width:100%;
background:black;
}
#fancy-about{
display:none;
color:white;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.js"></script>
<div class="section1"></div>
<div id="fancy-about">
<p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p>
<div class="parallax-window" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png"></div><p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p>
</div>