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

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

jquery html css

Jquery fancybox 2：将缩略图放在父div中,jquery,html,css,fancybox,fancybox-2,Jquery,Html,Css,Fancybox,Fancybox 2,好的，我最近在我的网站上添加了“”，这很好。但是我想把tumbnails（它的功能是缩略图助手的一部分，因此在一个单独的.js文件中）放在gallery图像下面我首先尝试更改包含图像的div（我假设是缩略图），但是这两个div是兄弟div，除了body之外没有父div。然后我开始尝试找出什么是真正的“打印”到页面上的元素，我发现了“包装”的一大堆用法例如： tpl: { wrap : '<div class="fancybox-wrap&quo

好的，我最近在我的网站上添加了“”，这很好。但是我想把tumbnails（它的功能是缩略图助手的一部分，因此在一个单独的.js文件中）放在gallery图像下面

我首先尝试更改包含图像的div（我假设是缩略图），但是这两个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：{
换行：“”，
图像：“”，
iframe:“”，
错误：“无法加载请求的内容。
请稍后再试。”，
closeBtn:“”，
下一步：''，
上一页：“”
},

因此，首先；什么是第三方物流：{}，？那是什么？它是一个数组吗？函数？我找不到任何文档讨论符合这种语法的东西，这正好涵盖了我

其次，我假设这不是实际html被“打印”的行，而是定义应该打印什么的区域，并且在html实际打印时调用其中的值。。。？那么这不意味着我可以打印这个（从缩略图js文件）：

this.wrap=$（''）.addClass（opts.position）.appendTo（'body'）；
this.list=$（''+list+''）.appendTo（this.wrap）；

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

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

我试着在我的电脑上解决这个问题，但是由于我缺乏经验，而且主文件有2020行，我成功的可能性很小。相反，我会发现自己不断地碰壁，我对此一无所知，然后继续失去理智。

关于

tpl

API选项的文档不多，因此我将与您分享我的发现

1） <代码>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>'
    },
});

#mainWrapper .fancybox-wrap {
    left: 0 !important;
}

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

请参见

2） <代码>基本上我所需要的就是为图库和缩略图都提供一个父div。这必须从不同的角度来看待

打开fancybox时，将添加两个主容器（通过选择器）：

2.a）<代码>.fancybox覆盖层

它是页面顶部的半透明覆盖层，和fancybox后面的半透明覆盖层

它总是附加在
正文

2.b）<代码>.fancybox包装

这是fancybox及其所有子项（导航和关闭按钮、内容等）

如果
locked
选项设置为
true
（默认值），则将其附加到
.fancybox overlay
，如下所示：

或如果将
锁定
选项设置为
假
，则将其附加到
正文
：

$(".fancybox").fancybox({ helpers : { overlay: { locked: false } } });
注意：
.fancybox wrap
在这种情况下将是
.fancybox overlay
的兄弟

当使用选项
parent
和
locked
选项设置为
false
有了这个html：

<body> <div id="mainWrapper"></div> </body>
…
.fancybox wrap
将作为
#mainWrapper
的子元素添加，以便您可以应用自己的自定义css样式，如：

$(".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>' }, });

#mainWrapper .fancybox-wrap { left: 0 !important; }

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

3）。当您使用缩略图助手（并链接正确的js和css文件）时，fancybox会添加另一个容器：
3.a）<代码>#fancybox拇指

它总是附加到
正文

它是
.fancyboxoverlay
元素的兄弟

如果您需要为
#fancybox thumbs
容器提供父级
div
，您可以使用fancybox回调动态包装
#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”将适合视图窗口的大小，而不是图库的大小。我应该有更具体的说法，比如“基本上我所需要的就是为图库和缩略图创建一个适合图库大小的父div，这样我就可以根据图库来定位缩略图了。”您可以使用
.wrapAll（）
将
.fancybox overlay
和
#fancybox拇指
包裹在
.mythumbswrap
内。然后在方便的时候将样式和大小应用于
.mythumbswrap
。我的回答是让你知道你必须处理哪些选择器。@Noodlemanny:这是一个如何使用
.wrapAll（）的示例。

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