jquery - 如何将图库加载到 Fancybox 中且标题不变？

Question

所以，基本上，我正在使用 Fancy box，基本上，只是希望画廊中加载的所有图像的标题保持不变。是的，我可以将其保留为所有图像的标题，但是，当在图像之间切换时，标题会像图像一样淡入淡出。基本上，我不希望标题在这里消失，我只想图像消失。因为标题总是相同的。

这是一个 fiddle ，用 Fancybox 图片库的标题显示了我当前的问题:

http://jsfiddle.net/cce18389/3/

所有图像的标题都不会改变。正如标题描述的图片库名称(目前它只是填充了虚拟内容)。

我已经考虑过如何将 HTML 也包含在 fancybox 2.1 图像库中，但是，我也无法正确执行此操作，请在此处查看此链接:http://jsfiddle.net/svsdx/它将内容添加到 div，而不是像我想做的那样添加到图像的照片库。

这是我现在拥有的代码:

$(document).ready(function($) {
var galleryTitle = $('#galleryTitleHTML').html();

    $('a.photogallery').fancybox({
        wrapCSS: 'fancy-gallery',
        openEffect: 'fade',
        closeEffect: 'fade',
        title: galleryTitle,
        tpl : {
            wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div>'
        },
        helpers : {
            overlay: {
                css: {'background': 'rgba(0,0,0,0.8)' }
            },
            title: {
                type: 'outside',
                position: 'top'
            },
            thumbs : {
                width: 50,
                height: 50
            }
        }
    });

    $('.open-photo-gallery').click(function(e) {
        e.preventDefault();
        var galleryImagesTotal = $('a.photogallery').length,
            eqToLoad = Math.abs(Math.floor(galleryImagesTotal / 2));

        $('a.photogallery:eq(' + eqToLoad + ')').click();
    });
});

基本上，我想从页面中提取一个 div 并将该内容放置在图像上方。我能看到做到这一点的唯一方法是使用标题，但标题会随着图像的消失而消失。只是想摆脱标题上的这种褪色。

此外，我希望图库标题填充顶部区域的整个宽度，而不是更改为比例图像的宽度。

无论如何都要这样做吗？

Answer 1

我认为您可以执行此操作的唯一方法是将标题附加到fancybox覆盖。您可能需要为 title 设置一些样式，例如:

.galleryTitle{
    z-index: 9000;
    color: #fff;
    width: 98%;
    margin: 5px auto;
    text-align: center;
}

然后在您的 fancybox 代码中您至少需要添加以下内容:

1).用于验证 title 是否已附加到 fancybox 覆盖层

的标志

var addedTitle = false;

2).一个 beforeShow 回调，用于附加 title 如果尚未附加(这会阻止 title 被附加)浏览图库时附加多次)

beforeShow: function () {
    if (!addedTitle) {
        $(".fancybox-overlay").append(galleryTitle)
        addedTitle = true;
    }
}

3).用于重置标志值的 afterClose 回调

afterClose: function () {
    addedTitle = false;
}

4).一个 fancybox margin 选项，用于为上面的 title 腾出空间(这可能需要调整以满足您的需求)

margin: [80, 20, 20, 20] // [top, right, bottom, left]

注意:是的，您需要设置所有边距。

参见JSFIDDLE

PS。请注意，为了触发图库，您不需要进行大量数学计算。使用 .eq() 方法选择第一项就足够了:

$('.open-photo-gallery').click(function () {
    $('a.photogallery').eq(0).trigger("click");
});