fancybox 2:将缩略图放在父div内 [英] fancybox 2: put thumbnails within a parent div

问题描述

好，所以我最近在自己的网站中添加了" fancyBox ".但是，我想将缩略图(其功能是缩略图帮助器的一部分，因此在单独的.js文件中)放置在画廊图像的下方.

Ok so I've recently added 'fancyBox' to my site and its great. However I want to place the tumbnails (whose functionality is part of the thumbnails helper, thus in a separate .js file) just under the gallery images.

我首先尝试更改包含图像的div(我假设是缩略图)，但是两者都是兄弟div，除了body之外没有父div.然后，我着手尝试弄清楚实际上是将元素打印"到页面上的内容，并且发现了很多包装"的用法.

I first tried to change the divs containing the images (and I assumed thumbnails) however the two are sibling divs with no parent div other than body. I then set about trying to figure out what is actually 'printing' the elements onto the page and I've found a whole bunch of uses of 'wrap'.

例如:

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:{}，是什么?那是什么?它是数组吗?有功能吗?我找不到任何有关适合该语法的文档，这些文档就使我无所适从.

So first off; whats the tpl : {},? What is that? Is it an array? A function? I can't find any documentation talking about something that fits that syntax, which just span me right out.

第二，我假设不是实际"打印html的行，而是定义应打印内容的区域，并且在实际打印em时调用其中的值. ...? 所以这并不意味着我可以打印此内容(从js缩略图文件中获取):

Secondly I assume that's not the lines where the actual html is being 'printed', just the area that's defining what should be printed and the values within it are called when the html is actually printed. ...? So wouldn't that mean that I could print this (from the thumbnail js file):

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

在打印图像的实际html的行上?请记住，它们是两个单独文件的一部分.

on the line where the actual html for the images is printed? Bearing in mind they're part of two separate files.

基本上，我需要为图库和缩略图创建一个父div.这样，我可以根据图库的大小放置缩略图.我也使用了drupal，因此几乎没有任何html文档的硬编码，除非它显然是模板.

Basically all I need is to have a parent div for both the gallery and the thumbnails. This way I can position the thumbnails according to the size of the gallery. I'm using drupal as well, so pretty much any hard coding of html documents is out, unless its a template obviously.

我试图在我的同伴上解决这个问题，但是由于我缺乏经验，并且主文件的长度为2020行，因此我不太可能成功.相反，我会发现自己反复撞到我不知道的墙壁，然后开始失去理智.

I tried to figure this out on my onesie however due to my lack of experience and the fact that the main file is 2020 lines long, its highly unlikely I'll be successful. Rather I'll find myself repetitively hitting walls I don't have a clue about, then proceed to lose my mind.

推荐答案

关于tpl API选项的文档太多，所以我将与您分享我的发现.

There are not too much documentation about the tpl API option so I will share with you my findings.

1). whats the tpl : {},?:tpl代表 template ，它是数据条目(json名称/值对格式)的集合，可在fancybox函数内部返回元数据.

1). whats the tpl : {},? : tpl stands for template, and it's a collection of data entries (json name/value pair format) that returns metadata inside the fancybox function.

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

如果要添加不同的CSS样式，例如:

You can use tpl to add your own selectors to fancybox if you want to add different css styles like :

$(".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操作它):

Notice I added the class mywrap so you can use its selector to add custom css styles (or manipulate it through jQuery) like :

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

请参见 JSFIDDLE

See JSFIDDLE

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

2). Basically all I need is to have a parent div for both the gallery and the thumbnails. This has to be seen from different angles.

打开fancybox时，将添加两个主要容器(通过选择器):

When you open fancybox two main containers are added (by selector) :

2.a). .fancybox-overlay

• 这是页面顶部 AND 上位于花式框
后面的半透明覆盖层
• 总是 附加到body

• it's the semi-transparent overlay on top of your page AND behind fancybox
• it's always appended to the body

2.b). .fancybox-wrap

• 这是带有所有子项的fancybox框(导航和关闭按钮，内容等)

• 它附加到.fancybox-overlay IF ，locked选项设置为true(默认值)，如:

• it's the fancybox box with all its children (navigation and close buttons, content, etc.)

• it's appended to .fancybox-overlay IF the locked option is set to true (default value) like :

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

OR ，它被附加到body IF ，locked选项设置为false:

OR it's appended to body IF the locked option is set to false :

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

注意:在这种情况下，.fancybox-wrap是.fancybox-overlay的同级.

NOTE: .fancybox-wrap will be a sibling of .fancybox-overlay in this case.

使用选项parent AND 将其附加到任何指定的自定义容器中，并且locked选项设置为false

it's appended to any designated custom container when using the option parent AND the locked option is set to false

因此拥有此html:

<body>
    <div id="mainWrapper"></div>
</body>

...和

$(".fancybox").fancybox({
    parent: "#mainWrapper", // parent div
    helpers : {
        overlay: {
            locked: false
        }
    }
});

... .fancybox-wrap将作为#mainWrapper的子元素附加，因此您可以应用自己的自定义css样式，例如:

....fancybox-wrap will be appended as a child element of #mainWrapper so you can apply your own custom css styles like :

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

请参见 JSFIDDLE

See JSFIDDLE

3).当您使用缩略图助手(并链接了正确的js和css文件)时，fancybox添加了另一个容器:

3). When you use the thumbnails helper (and linked the proper js and css files), another container is added by fancybox :

3.a). #fancybox-thumbs

• 它总是附加到body
• 它是.fancybox-overlay元素的同胞

• it's always appended to the body
• it's a sibling of the .fancybox-overlay element

如果您需要#fancybox-thumbs容器的父级div，则可以使用fancybox回调(如:

If you require a parent div for the #fancybox-thumbs container, you could wrap #fancybox-thumbs with its new custom parent div on the fly using a fancybox callback like :

$(".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，如果我正在浏览画廊，这可能是正确的.如果不是，我们将其添加为 BUT ，我们将需要等待#fancybox-thumbs附加到body，因为直到将fancybox完全添加到DOM之前它都不会发生.

Notice that we first checked if .mythumbswrap already existed, which can be true if I am browsing a gallery. If not, we'll add it BUT we will need to wait for #fancybox-thumbs to be appended to the body since it doesn't happen until fancybox is completely added to the DOM.

我们使用setTimeout设置延迟.

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

Also notice that we removed the parent container .mythumbswrap after closing fancybox, otherwise it will remain in the DOM and not added as a wrapper of #fancybox-thumbs next time we open fancybox.

因为现在.mythumbswrap是#fancybox-thumbs的 parent 元素，所以我们可以应用任何自定义样式，例如:

Since now .mythumbswrap is the parent element of #fancybox-thumbs we can apply any custom styles like :

.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

See JSFIDDLE

这篇关于fancybox 2:将缩略图放在父div内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！