FlexSlider кликните по картинке, чтобы открыть LightBox как способность

Question

У меня есть плагин FlexSlider/Carousel, который отлично работает на моем сайте. Теперь я хотел бы иметь возможность щелкнуть изображение Slider, чтобы открыть лайтбокс, похожий на плагин, чтобы я мог "взорвать" изображения, чтобы иметь возможность видеть больше деталей. Я прочитал и попытался реализовать атрибут lightbox: true, который звучит так, как будто он должен делать то, что я ищу, но, похоже, он не работает. Я не могу нажать на изображение слайдера, чтобы сделать что-нибудь.

<div id="main" role="main">
  <section class="slider">
    <div id="slider" class="flexslider">
      <ul class="slides">
        <li>
            <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
    </li>
    <li>
        <img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
    </li>
       </ul>
    </div>
    <div id="carousel" class="flexslider">
      <ul class="slides">
        <li>
            <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
    </li>
    <li>
        <img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
    </li>               
      </ul>
    </div>
  </section>
</div>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

<!-- FlexSlider -->
<script defer src="~/Scripts/jquery.flexslider.js"></script>

<script type="text/javascript">
$(function(){
  SyntaxHighlighter.all();
});
$(window).load(function(){
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    itemWidth: 100,
    itemMargin: 0,
    asNavFor: '#slider'
  });

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    sync: "#carousel",
    start: function(slider){
      $('body').removeClass('loading');
    },
    lightbox: true
  });
});

Answer 1

На всякий случай, если это кому-то нужно. Попробуй это:

<div id="slider" class="flexslider">
     <ul class="slides">
        <li>
          <a href="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" data-lightbox="1000 500">
              <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
          </a>
        </li>
        <li>
          <img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
        </li>
      </ul>
</div>

Answer 2

<div class="flexslider">
     <ul class="slides">
        <li>
          <a href="large-image-01.jpg" rel="lightbox">
              <img src="thumb-image-01.jpg" />
          </a>
        </li>
        <li>
          <a href="large-image-01.jpg" rel="lightbox">
              <img src="thumb-image-01.jpg" />
          </a>
        </li>
      </ul> </div>

Это тот, который работал для меня - я также добавил target="blank", чтобы открыть новое окно.

Answer 3

Решением, которое я использую в текущем проекте WordPress, является "Responsive Lightbox" от dFactory. Он использует HTML-элемент rel="lightbox" в качестве хука. Мгновенный лайтбокс галерей!

<div class="flexslider">
     <ul class="slides">
        <li>
          <a href="large-image-01.jpg" rel="lightbox">
              <img src="thumb-image-01.jpg" />
          </a>
        </li>
        <li>
          <a href="large-image-01.jpg" rel="lightbox">
              <img src="thumb-image-01.jpg" />
          </a>
        </li>
      </ul>
</div>