Question

我尝试使用灯箱效果放置flexslider，但是当我触发点击显示灯箱时，它只显示没有照片的背景，而有些奇怪的是我切换到其他页面或触发调整大小后，照片库开始显示。我的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>

和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');
    });
  })

我的

提前致谢

Answer 1

好的！经过几天的研究...... 我刚刚发现将幻灯片功能移动到点击功能，现在一切都变得完美.... 嗯....对我来说是一场可怕的噩梦

抱歉答案格式错误，

代码前的

：

    $('#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');

  });

和我的最终代码：

  $('#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"
      });
 });

flexslider当我点击背景时如何显示我的照片灯箱

1 个答案: