-1

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

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

http://jsfiddle.net/XF8WW/7/

在我的小提琴中，我确定点击了什么图像以及下一个/上一个图像可以是什么。接下来，我检查 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();
}

我知道代码有效，因为当我在控制台中输入它时它就有效。

谢谢你的时间祝你有美好的一天

4

2 回答 2

1

好吧，我设法修复它。而不是为我的小册子使用这个脚本：http: //www.netzgesta.de/booklet/ 重新排列了我使用这个脚本的 HTML：http: //builtbywill.com/code/booklet/

后者不会重新排列 HTML，并且在我看来是迄今为止最好的小册子脚本。

谢谢各位的回应！

祝你今天过得愉快

于 2013-01-29T07:55:52.550 回答
0

我建议单独处理您的数据需求（而不是使用 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 发送您可能需要的任何额外参数（我只是从一个项目中提取了这个，所以根据您的需要进行定制）。

希望有帮助-

于 2013-01-24T15:47:27.133 回答