Question

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

这是一个小提琴，通过Fancybox图片库的标题显示我当前的问题：

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

在所有图像上，标题永远不会改变。由于标题描绘了图像库名称（现在它只是填充了虚拟内容）。

我已经考虑过如何在fancybox 2.1图像库中包含HTML，但是，我也无法正确地执行此操作，在此处查看此链接：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并将该内容放在图像上方。只有我可以看到这样做的方法是使用标题，但标题会随着图像淡出而消失。只是想摆脱这个标题上的褪色。

另外，我希望Gallery Title填充顶部区域的整个宽度，而不是更改为比例图像的宽度。

无论如何要做到这一点？

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）< / p>

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中，标题不会改变？

1 个答案: