CODEWITHSUNDEEP
jqueryimagefancybox
user1269725
user1269725

Reputation: 11

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

Upvotes: 1

Views: 5570

Answers (3)

user7266692
user7266692

Reputation: 1

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

Upvotes: 0

witek
witek

Reputation: 351

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

Upvotes: 0

JFK
JFK

Reputation: 41143

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

Upvotes: 1

Related Questions