Question

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

Answer 1

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