Question

好的，我最近添加了＆＃39; fancyBox＆＃39;到我的网站，它的伟大。但是我想在图库图像下面放置tumbnails（其功能是缩略图助手的一部分，因此在单独的.js文件中）。

我首先尝试更改包含图像的div（我假设缩略图）但是这两个是兄弟div，除了body之外没有父div。然后我着手试图找出实际上是什么＆＃39;打印＆＃39;页面上的元素，我发现了＆＃39; wrap＆＃39;的一大堆用法。

例如：

tpl: {
            wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
            image    : '<img class="fancybox-image" src="{href}" alt="" />',
            iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>',
            error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
            closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
            next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
            prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
        },

首先关闭;什么是 tpl：{}，？那是什么？它是一个阵列吗？一个功能？我无法找到任何符合该语法的文档，而这些文档只会跨越我。

其次，我认为不是实际html正在打印的行，而是仅定义了应该打印的内容的区域，并且当其中的值被调用时html实际上打印。 ...？所以这并不意味着我可以打印这个（来自缩略图js文件）：

this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
        this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);

在打印图像的实际html的行上？请记住，他们是两个独立文件的一部分。

基本上我只需要为图库和缩略图设置父div。这样我就可以根据画廊的大小来定位缩略图。我也使用drupal，所以几乎任何硬编码的html文件都没有，除非它显然是一个模板。

我试图在我的连体上解决这个问题，但是由于我缺乏经验以及主要文件是2020行的事实，我不太可能成功。相反，我发现自己重复地撞墙，我不知道，然后继续失去理智。

Answer 1

关于tpl API选项的文档不多，所以我会与您分享我的发现。

1）。 whats the tpl : {},?：tpl代表模板，它是一个数据条目集合（json名称/值对格式），它返回fancybox函数内的元数据。

obj : {
    property-name: value // Boolean (true/false), integer (50, 260.3) or string ("string" ... note the quotes)
}

如果要添加不同的css样式，可以使用tpl将自己的选择器添加到fancybox：

$(".fancybox").fancybox({
    tpl: {
        wrap: '<div class="fancybox-wrap mywrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
    },
});

注意我添加了类 mywrap ，因此您可以使用其选择器添加自定义css样式（或通过jQuery操作它），如：

/* add a 5px red border around fancybox */
.mywrap {
    border: solid 5px #880000 !important;
}

参见 JSFIDDLE

2）。 Basically all I need is to have a parent div for both the gallery and the thumbnails. 这必须从不同的角度来看。

当您打开fancybox时，会添加两个主要容器（通过选择器）：

2.A）。 .fancybox-overlay

它位于页面顶部的半透明叠加层 AND 位于fancybox后面
始终附加到body

2.B）。 .fancybox-wrap

它是带有所有孩子的fancybox盒子（导航和关闭按钮，内容等）

附加到.fancybox-overlay IF locked选项设置为true（默认值），如：

$(".fancybox").fancybox({
    helpers : {
        overlay: {
            locked: true
        }
    }
});

或将其附加到body IF locked选项设置为false：
```
$(".fancybox").fancybox({
    helpers : {
        overlay: {
            locked: false
        }
    }
});
```
注意：.fancybox-wrap在这种情况下将是.fancybox-overlay的兄弟。
在使用选项parent AND 时，它会附加到任何指定的自定义容器，locked选项设置为false < / p>
所以有这个html：
```
<body>
    <div id="mainWrapper"></div>
</body>
```
...和
```
$(".fancybox").fancybox({
    parent: "#mainWrapper", // parent div
    helpers : {
        overlay: {
            locked: false
        }
    }
});
```
... .fancybox-wrap将作为#mainWrapper的子元素附加，因此您可以应用自己的自定义CSS样式，如：
```
#mainWrapper .fancybox-wrap {
    left: 0 !important;
}
```
请参阅 JSFIDDLE

3）。当您使用缩略图帮助程序（并链接正确的js和css文件）时，fancybox添加了另一个容器：

3.A）。 #fancybox-thumbs

它始终附加到body
它是.fancybox-overlay元素的兄弟姐妹

如果div容器需要父#fancybox-thumbs，则可以使用fancybox回调动态地将#fancybox-thumbs与其新的自定义父div包裹起来，如：< / p>

$(".fancybox").fancybox({
    helpers: {
        thumbs: {}
    },
    afterShow: function () {
        if ($(".mythumbswrap").length == 0) {
            setTimeout(function () {
                $("body").find("#fancybox-thumbs").css({
                    // custom css (optional)
                    position: "relative"
                }).wrap("<div class='mythumbswrap' />");
            }, 100);
        }
    },
    afterClose: function () {
        $(".mythumbswrap").remove();
    }
});

注意我们首先检查.mythumbswrap是否已存在，如果我正在浏览图库，则可能为真。如果没有，我们会添加但是我们需要等待#fancybox-thumbs附加到body，因为直到fancybox才会发生这种情况完全添加到DOM。

我们使用setTimeout来设置延迟。

另请注意，我们在关闭fancybox后删除了父容器.mythumbswrap，否则它将保留在DOM中，而不会在下次打开fancybox时添加为#fancybox-thumbs的包装。

由于现在.mythumbswrap是#fancybox-thumbs的父元素，我们可以应用任何自定义样式，例如：

.mythumbswrap {
  background: none repeat scroll 0 0 #FFFFFF !important;
  bottom: 0;
  display: block;
  height: 60px;
  width: 100%;
  z-index: 10000;
  position: fixed;
  bottom: 0;
}

参见 JSFIDDLE

fancybox 2：将缩略图放在父div中

1 个答案: