Question

我正在一个网站上工作，图片需要一个fancybox。然而，这些图像并未按时间顺序放置在HTML中，因为它们是我使用booklet.js实现的小册子的一部分。所以我的问题是，我可以确定fancybox以什么顺序打开我的图像吗？

我试图让它工作一段时间，并为演示目的做了一个小提琴。

在我的小提琴中，我确定单击了哪个图像以及下一个/上一个图像可以是什么。接下来我检查fancybox是否在第一次尝试时打开了正确的图像。如果失败了，我会尝试关闭fancybox并自己打开以获得正确的图像。

我的解决方案中唯一的问题可以在我写的最后一个函数（clickPage）中找到。在clickPage中，我尝试关闭fancybox并重新打开它以获得正确的图像。不幸的是，fancybox没有完全关闭，或者没有重新打开该图像。

function clickPage($pageNr) {
  $.fancybox.close();
  //$('.fancybox-overlay.fancybox-overlay-fixed').click();
  $pageNrMinOne = $pageNr - 1;
  $pageNrMinOne = $pageNrMinOne.toString();
  $pageNr = $pageNr.toString();
  console.log($pageNr);
  console.log($pageNrMinOne);
  $(".page" + $pageNr).eq($pageNrMinOne).trigger('click');
  //$('.page' + $pageNr).click();
}

我知道代码可以正常工作，因为当我在控制台中输入代码时，它就可以了。

感谢您的时间祝你有愉快的一天

Answer 1

好吧，我设法解决了这个问题。而不是将此脚本用于我的小册子： http://www.netzgesta.de/booklet/ 重新排列我使用此脚本的HTML： http://builtbywill.com/code/booklet/

后者不重新排列HTML，在我看来是目前为止最好的小册子。

感谢大家的回复！

度过愉快的一天

Answer 2

我建议单独处理您的数据需求（而不是使用img src），将其作为第一个参数传递给fb sig：

    var images = [
        {
           'href' : 'http://dromenopmaat.be/dromen_op_maat/images/nl/1_big.jpg',
           'title' : 'some title'  //optional
        },
        {
           'href' : ' http://dromenopmaat.be/dromen_op_maat/images/nl/2_big.jpg ',
           'title' : 'some title'
        },
            //etc
    ]

    $.fancybox.open( 
        images,
        {
            index       : 0,
            nextEffect  : 'none', 
            prevEffect  : 'none',
            margin      : 100,
            padding     : 10,
            type        : 'image',
            wrapCSS     : 'fancy-gallery-wrapper',
            helpers     : {
                overlay : {
                    speedIn  : 0,
                    speedOut : 300,
                    opacity  : 0.7
                },
                title   : {
                    type    : 'inside'

                }
            }
    });

（fancybox v2.0）

最终，你使你的项目过于复杂，不必要。按照你想要的顺序构建一个json对象，并发送fb你可能需要的任何额外的参数（我只是从项目中提取这个，所以你认为合适的裁缝）。

希望有所帮助 -

确定我自己的fancybox订单

2 个答案: