如何将标题不变的图库加载到 Fancybox 中？

Question

所以，基本上，我在玩 Fancy box，基本上，我只想让图库中所有加载的图像的标题保持不变。是的，我可以只保留它作为所有图像的标题，但是，在图像之间切换时，标题会像图像一样淡入淡出。基本上，我不希望标题在这里褪色，我只希望图像褪色。因为标题总是一样的。

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

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

所有图片的标题都不会改变。由于标题描述了图片库名称（目前它只是填充了虚拟内容）。

我想过如何在 fancybox 2.1 图片库中也包含 HTML，但是，我也不能正确地做到这一点，请看这里 link：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

我认为您可以这样做的唯一方法是将 title 附加到 fancybox overlay。您可能需要为 title 设置一些样式，例如：

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

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

1).用于验证 title 是否已附加到 fancybox overlay

的标志

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");
});

如何将标题不变的图库加载到 Fancybox 中？

How to load a gallery into Fancybox with Title that does not change?

jquery

fancybox

fancybox-2