Question

我正在使用 fancybox js和css制作图片滑块。在那个滑块中，我想动态地改变图像的数量和图像的数量，但我对此并不了解。

代码：

$("#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吗？

一般来说，首先动态了解你的意思是件好事。您想在哪个事件上更改图像？一世。即当用户点击某些内容或以特定时间间隔
您想从哪里获取新的图像集？通过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;
})

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

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

1 个答案: