flexslider How to show my photo lightbox when i click background

Question

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. My html structure

<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

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

My JsFiddle

thanks in advance

Answer 1

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"
      });
 });