Question

我的FlexSlider / Carousel插件在我的网站上运行良好。现在，我希望能够点击Slider图像来调出一个像插件一样的灯箱，这样我就可以“炸毁”图像以便能够看到更多细节。我已阅读并试图实现一个灯箱：真实的属性，听起来应该做我正在寻找的东西，但它似乎不起作用。我无法点击滑块图片来做任何事情。

<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

以防有人需要这个。试试这个：

＆＃13;

<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>

＆＃13;

Answer 2

我在当前的WordPress项目中使用的解决方案是＆＃34; Responsive Lightbox＆＃34;通过dFactory。它使用HTML元素rel =＆＃34; lightbox＆＃34;作为一个钩子。即时灯箱画廊！

<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>

Answer 3

<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”以打开新窗口。

FlexSlider点击图片以显示LightBox之类的能力

3 个答案: