如何将图库加载到 Fancybox 中，标题不会改变？

Question

So, basically, I am playing with Fancy box, and basically, just want a title to remain the same for all images in a gallery that get loaded. Yes, I can just keep this as title for all images, however, when changing between images, the title fades in and out like the image does. Basically, I don't want the title fading here, I just want the image fading. Because the Title is always the same.

Here is a fiddle that shows my current problem here with the Title of a Fancybox image gallery:

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

On all images the title will never change. As the title depicts the Image Gallery Name (for now it's just filled with dummy content).

I have thought of how to possibly include HTML also within a fancybox 2.1 Gallery of images, however, I can not do this properly either, looking at this link here: http://jsfiddle.net/svsdx/ which adds content to a div instead, not a photo gallery of images as I would like to do.

Here is the code as I have it now:

$(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();
    });
});

Basically, I would like to pull in a div from the page and place that content above the images. Only way I can see doing this is with the Title, but the title fades as the images fade. Just want to get rid of this fading on the title.

Also, I would like the Gallery Title to fill the entire width of the top area, instead of changing to the width of the proportional image.

Anyway to do this?

Answer 1

The only way I see you could do this is appending the title to the fancybox overlay instead. You may need to set some styles for the title like :

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

Then in your fancybox code you need to add at least the following:

1). A flag to validate if the title has been already appended to the fancybox overlay

var addedTitle = false;

2). A beforeShow callback to append the title if this hasn't been appended yet (this prevents the title to be appended multiple times while browsing the gallery)

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

3). An afterClose callback to reset the value of the flag

afterClose: function () {
    addedTitle = false;
}

4). A fancybox margin option to make room for the title above (this may need to be adjusted to fit your needs)

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

Note : yes, you need to set all margins.

See JSFIDDLE

PS. Notice that in order to trigger the gallery you don't need to make a whole bunch of math calculations. Selecting the first item using the .eq() method would be enough :

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