[英]flexslider How to show my photo lightbox when i click background
I try to place flexslider with lightbox effect, but when I trigger click to show lightbox, it only display background with no photo, and some strange is after I toggle to other page or trigger resize, the photo gallery start to show over. 我尝试将flexslider放置在具有灯箱效果的位置,但是当我触发单击以显示灯箱时,它仅显示没有照片的背景,而当我切换到其他页面或触发调整大小后,图库开始显示出来,这很奇怪。 My html structure 我的HTML结构
<div id="main" role="main">
<div id="banner" class="lgbox_trigger"></div>
<div class="backdrop"></div>
<section class="slider">
<div id="slider" class="flexslider">
<ul class="slides">
<li><img src="http://img2.wikia.nocookie.net/__cb20140410200723/pokemon/images/archive/1/16/20150102074354!025Pikachu_OS_anime_10.png" /></li>
------
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li><img src="http://img2.wikia.nocookie.net/__cb20140410200723/pokemon/images/archive/1/16/20150102074354!025Pikachu_OS_anime_10.png" /></li>
--------
</ul>
</div>
</section>
and JS code 和JS代码
$('#banner').click(function(){
$('.backdrop').animate({'opacity': 0.5}, 1000, 'linear');
$('#slider, #carousel').animate({'opacity': 1}, 1000, 'linear');
$('#slider, .backdrop, #carousel').css('display', 'block');
});
$(document).on('click', '.backdrop', function(){
$('.backdrop, #slider').animate({'opacity': 0}, 1000, 'linear', function(){
$('.backdrop, #slider, #carousel').css('display', 'none');
});
})
thanks in advance 提前致谢
Ok!.... after few days research... I just found that move the slideshow function in to click function, everything get perfect now.... well.... is an horrible nightmare to me 好吧!....经过几天的研究...我只是发现将幻灯片放映功能移到了单击功能,现在一切都变得很完美了........对我来说是一场噩梦
Sorry for the wrong answer format, 抱歉,回答格式错误,
before the code: 在代码之前:
$('#carousel').flexslider({
animation: "slide",
animationSpeed: 400,
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 180,
itemMargin: 5,
asNavFor: '#slider',
start: function(slider){
flexslider = slider;
}
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
$('#main').on('click', '#banner', function(){
$('.backdrop').animate({'opacity': 0.5}, 1000, 'linear');
$('#slider, #carousel').animate({'opacity': 1}, 1000, 'linear');
$('#slider, .backdrop, #carousel').css('display', 'block');
});
and my final code: 和我的最终代码:
$('#main').on('click', '#banner', function(){
$('.backdrop').animate({'opacity': 0.5}, 1000, 'linear');
$('#slider, #carousel').animate({'opacity': 1}, 1000, 'linear');
$('#slider, .backdrop, #carousel').css('display', 'block');
$('#carousel').flexslider({
animation: "slide",
animationSpeed: 400,
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 180,
itemMargin: 5,
asNavFor: '#slider',
start: function(slider){
flexslider = slider;
}
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.