4
votes

I'm trying to get the "alt" property text on a image to display as title when using fancybox

HTML

<a href='inlinePicture'........
   <img alt='Awesome text'......
</a

JQUERY

$('.inlinePicture').facybox({
  title: $(this).find('img').attr('alt')
});

Problem is that the title is displaying "$(this).find('img').attr('alt')" instead of "Awesome text", what em I doing wrong?

I've also tried :

$('.inlinePicture').facybox({
   titleFormat: function (title) {
        return $(this.orig).siblings('p').text() || title;
    }
2
try to assign the alt text to a variable and then use it - TRR
@rutwikreddy stupid question, but is there a way to write the variable inside the "declaraton" - Plexus81
I think you've pared things down too much for the question, because fundamentally, what you have there should work provided you're running your jQuery code after the element exists. I certainly can't see how you'd get the code as text as you've described.. The symptom you're describing is quite strange. Can you post a more complete example, ideally an entirely complete self-contained example? (In the question itself, but a live version on jsbin.com or jsfiddle.net as well is always nice). - T.J. Crowder

2 Answers

4
votes

Try:

$('.inlinePicture').facybox({
  title: function() {
      return $(this).find('img').attr('alt');
  }
});
2
votes

For fancyBox v2 -

$(".fancybox").fancybox({
    beforeLoad : function() {
        this.title = $(this.element).find('img').attr('alt');
    }
});