4

好的，所以我最近添加了“ fancyBox ” ”，它很棒。但是，我想将缩略图（其功能是缩略图助手的一部分，因此在单独的 .js 文件中）放在图库图像下方。

我首先尝试更改包含图像的 div（并且我假设为缩略图），但是这两个是兄弟 div，除了 body 之外没有父 div。然后我开始尝试找出实际上是什么将元素“打印”到页面上，并且我发现了“包装”的一大堆用途。

例如：

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 行这一事实，我不太可能成功。相反，我会发现自己反复撞到我不知道的墙壁，然后继续失去理智。

4

1 回答 1

3

没有太多关于tplAPI 选项的文档，所以我将与您分享我的发现。

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

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

tpl如果您想添加不同的 css 样式，可以使用将自己的选择器添加到 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

  • 它是页面顶部和fancybox 后面 的半透明叠加层
  • 它总是附加到body

2.b)。.fancybox-wrap

  • 它是带有所有子项（导航和关闭按钮、内容等）的精美盒子

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

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

  • 或者它被附加到body 如果locked选项设置为false：

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

    注意：在这种情况下.fancybox-wrap将是的兄弟姐妹。.fancybox-overlay

  • 使用该选项parent 并且该locked选项设置为时，它会附加到任何指定的自定义容器中false

    所以有这个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 回调动态#fancybox-thumbs包装#fancybox-thumbs其新的自定义父级，例如：div

$(".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设置延迟。

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

由于 now.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

于 2013-10-30T17:27:47.793 回答