Question

有没有人尝试使用按钮或锚点击激活fancybox缩略图库，目前可以通过单击图像将fancybox带到弹出图库，在我的情况下，我想要一个简单的按钮或html锚点，这样当用户点击按钮或锚点时，应显示模态弹出库。我的图像也将来自db，任何想法如何做到这一点???

点击图片时运行的fancybox网站的代码

$('.fancybox-thumbs').fancybox({
            prevEffect: 'none',
            nextEffect: 'none',

            closeBtn: false,
            arrows: false,
            nextClick: true,

            helpers: {
                thumbs: {
                    width: 50,
                    height: 50
                }
            }
        });

更新了工作脚本：

 $('a.gallery').click(function () {
        $('.fancybox-thumb').click();
    });

Answer 1

我正在考虑这个问题（因为你之前的问题），也许你可以尝试在第一个元素中模拟点击.fancybox-thumbs

$('#gallery').click(function(){
      $('.fancybox-thumbs:first').click();
});

让我知道

Answer 2

您可以执行以下操作：使用属性和图像定义数组

var galPhotos = [{
        href : '../img/galeria/fondo1.jpg','nextEffect' : 'none',   prevEffect    : 'none', closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } },
        href : '../img/galeria/fondo2.jpg','nextEffect' : 'none',   prevEffect    : 'none', closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } },
        href : '../img/galeria/fondo3.jpg','nextEffect' : 'none',   prevEffect    : 'none', closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } },
        href : '../img/galeria/fondo4.jpg','nextEffect' : 'none',   prevEffect    : 'none', closeBtn: false,  arrows: false, nextClick: true, helpers: { thumbs: { width: 50, height: 50  } }];

然后，简单地

$('a#gallery').live('click',function(){
     $.fancybox(galPhotos);
});

没有为你的配置测试它，但是我的（并且工作正常）：

var galPhotos = [
                    {href : '../img/galeria/fondo1.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
                    {href : '../img/galeria/fondo2.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'},
                    {href : '../img/galeria/fondo3.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
                    {href : '../img/galeria/fondo4.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'},
                    {href : '../img/galeria/fondo5.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'},
                    {href : '../img/galeria/fondo6.jpg','nextEffect' : 'fade',   'prevEffect'    : 'fade'} 
                ];

或简单地模拟点击课程

$('#gallery').click(function(){
      $('.fancybox-thumbs:first').click();
});

让我知道它是怎么回事

Answer 3

也许这有效：

<a class="fancybox-thumb" rel="fancybox-thumb" href="link_to_large_image.png" title="Image title">
<img src="link_to_small_image.png" alt="" />
</a>

Answer 4

对于新访客，

$('[data-fancybox="gallery"]').fancybox({
    thumbs : {
      autoStart: true,
      axis: 'x'
    }
  });

如何在锚点击时触发fancybox-thumbs图库

4 个答案: