Use image alt for Fancybox captions

问题

I am trying to use the title or 'alt' attribute of images to come up as titles with FancyBox. Here is the relevant code:

$("a[rel=fancybox]").fancybox({
        'transitionIn'      : 'fade',
        'transitionOut'     : 'elastic',
        'titlePosition'     : 'inside',
        'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Look ' +
                          (currentIndex + 1) + ' / ' + currentArray.length + 
                           (title.length ? ' &nbsp; ' + title : '') + '</span>';
        },
        'autoScale':false,
        'mouseWheelNavigation':   false, 
        'onComplete' : function() {$("#fancybox-wrap").unbind('mousewheel.fb');} ,
    });
});

回答1:

It seems to me that you are using fancybox v1.3.4, aren't you?.

To learn how fancybox's titles work in that version check this post.

To set the fancybox title from the alt attribute of your thumbnail, use the API option titleFromAlt. You can learn how to use it from this post

回答2:

I have made something like this (ver:1.3.4)

 $("#modal_informations a[rel='fancy']").fancybox({
        'titleFormat': function(title, currentArray, currentIndex, currentOpts) {

            if ($(currentArray[currentIndex]).find('img').length > 0)
            {
                return '<span id="fancybox-title-inside">' + (currentIndex + 1) + ' / ' + currentArray.length + ' ' + $(currentArray[currentIndex]).find('img').attr('alt') + '</span>';
            }

            return '<span id="fancybox-title-inside">' + (currentIndex + 1) + ' / ' + currentArray.length + '</span>';
        }
    });

回答3:

jQuery("a.fancybox").fancybox({
    'titlePosition':'inside',
    'titleFormat': fancyTitle
});

// get img alt inside of the fancybox a and overwrite the a title with the img alt inside (dom stays the same, only visible text in the fancybox get changed)

function fancyTitle(title, currentArray, currentIndex, currentOpts){
        // get current href of a (target image)
        var currHref = jQuery(currentArray[currentIndex]).attr('href');
        // select a by target img url
        return jQuery('a[href="'+currHref+'"]').find('img').attr('alt');
    }

来源：https://stackoverflow.com/questions/9979523/use-image-alt-for-fancybox-captions

标签

jquery

image

fancybox