Question

我正在尝试将标题用作元素脚本以及Thumbnail助手。如果我为两者使用相同的类名，即..（。。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
                }
            }

        });

如果我对两个ie（.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

fancybox标题作为元素和缩略图助手

1 个答案: