Используйте изображение alt для подписи Fancybox

Question

Я пытаюсь использовать атрибут title или 'alt' изображений для отображения в качестве заголовков с FancyBox. Вот соответствующий код:

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

Answer 1

Мне кажется, что вы используете fancybox v1.3.4, не так ли?

Чтобы узнать, как работают названия fancybox в этой версии , проверьте этот пост .

Чтобы установить заголовок fancybox из атрибута alt вашего эскиза, используйте параметр API titleFromAlt.Вы можете узнать, как использовать это из этого поста

Answer 2

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

// получить изображение внутри fancybox a и перезаписать заголовок заголовком img alt внутри (dom остается прежним, изменяется только видимый текст в fancybox)

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

Answer 3

Я сделал что-то вроде этого (версия: 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>';
        }
    });