具有动态加载图像和图像数量的 Fancybox

Question

我正在使用 fancybox js 和 css 来制作图像滑块。在那个滑块中，我想动态更改图像的数量和图像的 src，但我对此一无所知。

代码：

$("#fancybox-manual-c").click(function () {
    alert("clicked");
    $.fancybox.open([
        {
            href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
            title: 'this image links to bbc news'
        }, {
            href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
            title: 'this image links to jquery'
        }, {
            href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
            title: 'this image links to fancybox'
        }
    ], {
        nextEffect: 'fade',
        prevEffect: 'fade',
        loop: false,
        mouseWheel: true,
        openEffect: 'elastic',
        closeEffect: 'elastic',
        openOpacity: true,
        closeOpacity: true,
        cyclic: false
    });
    return false;
});

Answer 1

你使用花哨的盒子 1.3 还是 2？

1. 一般来说，首先最好了解动态的含义。您想在哪个事件中更改图像？ 一世。 e.当用户点击某物或在特定时间间隔内时

2. 您想从哪里获得新的图像集？通过 ajax 加载它们还是已经嵌入到页面中的某个地方？

我有时会这样做：

<a class="mylink" href="#firstset">link</a>
<a class="mylink" href="#secondset">link</a>  

    <div class="content" style="display:none">
      <div id="firstset">
        image...
      </div>
      <div id="secondset">
        image...
      </div>
    </div>

    <script>
    $(".mylink").click(function() {
    var $content = $($(this).attr('href')).clone();

    $.fancybox({
      'titlePosition': 'inside', 'padding': '0', 'titleShow': false,
      'content': $content,
      'onComplete': function () {
        init your slider

      }
    });
    return false;
})

这只是为了给你一个想法和许多可能的解决方案之一 指定比你能得到更好的答案更准确