CODEWITHSUNDEEP
javascriptjqueryfancybox
ShaneKm
ShaneKm

Reputation: 21328

Fancybox caption from the img tag not href

Is there a way to have caption pulled from the <img> tag instead of <a> tag?

For example Html:

<a rel="fancybox" href="#">
<img src="ball.jpg" title="this is the caption i want to show in fancybox" alt="alt text here" />
</a>

<a rel="fancybox" href="#">
<img src="ball2.jpg" title="this is the caption2" alt="alt text here" />
</a>

<a rel="fancybox" href="#">
<img src="ball3.jpg" title="this is the caption 3" alt="alt text here" />
</a>

I've tried this but it doesn't work: JQuery:

            $("a[rel=fancybox]").fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'titlePosition': 'inside',
                'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                    title = $(this).find("img").attr("title");
                    return '<span>' + title + '</span>';
                }
            });

Upvotes: 0

Views: 2489

Answers (3)

JFK
JFK

Reputation: 41143

For fancybox v1.3.4 simply use the API option titleFromAlt where basically you set fancybox title on the alt attribute of the img tag (not the title attribute) like

<a rel="fancybox" href="#">
 <img src="ball.jpg"  alt="this is the caption i want to show in fancybox" />
</a>

then your script :

            $("a[rel=fancybox]").fancybox({
                'transitionIn' : 'elastic',
                'transitionOut': 'elastic',
                'titlePosition': 'inside',
                'titleFromAlt' :  true 
            });

you can learn more about this option and how title works in fancybox v1.3.2+ here

#EDIT : to force to read the title attribute from the img tag use the API option onStart like

        $("a[rel=fancybox]").fancybox({
            'transitionIn' : 'elastic',
            'transitionOut': 'elastic',
            'titlePosition': 'inside',
            'onStart' : function(currentArray,currentIndex){
               var obj = currentArray[ currentIndex ];
               this.title = $(obj).find('img').attr("title");
            }
        });

Upvotes: 1

Yograj Gupta
Yograj Gupta

Reputation: 9869

Try This - 

      $("a[rel=fancybox]").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'titlePosition': 'inside',
            'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                title = $(currentArray[currentIndex]).find('img').attr('title');
                return '<span>' + title + '</span>';
            }
        });

Or you can just pass parameter 'titleFromAlt' : true

Upvotes: 0

Sanyi Simonyi
Sanyi Simonyi

Reputation: 17

Try this:

$("img[title=fancybox]").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'titlePosition': 'inside',
            'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                title = $(this).find("img").attr("title");
                return '<span>' + title + '</span>';
            }
        });

Upvotes: 0

Related Questions