花式框标题作为元素和缩略图助手

Question

我正在尝试将标题与缩略图助手一起用作元素脚本。如果我对两者使用相同的类名，即.. (.fancybox-thumb)，则只有标题作为元素有效。

提前感谢您的帮助。

标题作为元素

$(".fancybox-thumb")
        .attr('rel', 'gallery')
        .fancybox({
            beforeLoad: function() {
                var el, id = $(this.element).data('title-id');

                if (id) {
                    el = $('#' + id);

                    if (el.length) {
                        this.title = el.html();
                    }
                }
            }
        });

缩略图助手

    $(".fancybox-thumb")
        .attr('rel', 'gallery')
        .fancybox({
             prevEffect : 'none',
             nextEffect : 'none',
             helpers    : {
                 title  : {
                     type: 'outside'
                },
                 thumbs : {
                     width  : 60,
                     height : 60
                }
            }

        });

如果我对两者使用相同的类名，即.. (.fancybox-thumb)，则只有标题作为元素有效。

<div id="main" class="wrapper clearfix">              
      <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6111/6285920681_67917e8062_b.jpg" title="walk in the park (ewitsoe)">
        <img src="http://farm7.staticflickr.com/6111/6285920681_67917e8062_m.jpg" alt="" />
    </a>

    <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg" data-title-id="title-1">
        <img src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg" alt="" />
    </a>
    <div id="title-1" class="hidden">
        This is 1st title. <a href="http://google.com" target="blank">Some link</a>
    </div><!--title-1-->
</div> <!-- #main -->

Answer 1

将两个 API 选项集成到一个脚本中，例如：

$(".fancybox-thumb").attr('rel', 'gallery').fancybox({
    prevEffect: 'none',
    nextEffect: 'none',
    helpers: {
        title: {
            type: 'outside'
        },
        thumbs: {
            width: 60,
            height: 60
        }
    },
    beforeLoad: function() {
        var el, id = $(this.element).data('title-id');
        if (id) {
            el = $('#' + id);
            if (el.length) {
                this.title = el.html();
            }
        }
    }
});​

当然，不要忘记加载 fancybox 的缩略图助手 css 和 js 文件，例如：

<!-- Add fancyBox - thumbnail helper -->
<link rel="stylesheet" type="text/css" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.1.3" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.1.3"></script>

编辑：您可以创建不同的画廊，将画廊元素分组在不同的父容器下，例如

<div id="gallery1" class="gallery">
    <p>gallery one</p>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg">one</a>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg">two</a>
</div>
<div id="gallery2" class="gallery">
    <p>gallery two</p>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7065/7058141285_064170310e_b.jpg">one</a>
    <a class="fancybox-thumb" href="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_b.jpg">two</a>
</div>
<div id="gallery3" class="gallery">
    <p>gallery three</p>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg">one</a>
    <a class="fancybox-thumb" href="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_b.jpg">two</a>
</div>

​ 注意，我对父容器使用了相同的class，但使用了不同的ID，用于区分画廊。

然后使用一点 jQuery，创建 fancybox 画廊，而不需要为每个画廊使用不同的脚本：

// loop through each parent container and set rel attribute accordingly
$("div.gallery").each(function() {
    var thisID = this.id;
    $(this).find(".fancybox-thumb").attr("rel", thisID).fancybox({
        // API options here
    });
}); // each​​​​​

查看jsfiddle demo