Attr in fancybox

Question

I try get a my attribute inside Fancybox, and I get when I use href, but if I try get my attribute I get just "undefined".

<a class="grouped_elements" rel="Group1" id="@item.Id" private="@item.Private" title="@item.Title" href="/Image/ShowFile/@item.Id">
                <img src="/Image/ShowThumb/@item.Id" alt="@item.Title"  /></a></div>

function formatTitle(title, currentArray, currentIndex, currentOpts) {

                var titlenormal = '<input type="hidden" id="idPhoto" value="' + currentArray[currentIndex].id + '">' +
                    '<span id="fancybox-title-over">' +
                    '<div id="boxComment" style="position:relative;"><div style="white-space: nowrap;"><div style="float: left;">' + title + '</div><div id="star" style="width:100%">&nbsp;</div></div>';

                alert($(this).attr("href"));



                return titlenormal;

            }

Answer 1

if you set the option titleFormat inside fancybox like

$(".fancybox").fancybox({
 'titleFormat': formatTitle
});

then your function formatTitle works and alerts the href attribute value.

you may also use this.href instead

EDIT: March 23, 2012 - 12:30pm PT in response to comments.

I guess you were not clear enough to specify which attribute to wanted to get.

Anyways, alert($(this).attr("href")); works because href is, at this point, a jQuery object inside the fancybox function while private is not.

As a workaround, try this instead:

alert($(".grouped_elements").eq(currentIndex).attr('private'));

within your formatTitle function like:

 function formatTitle(title, currentArray, currentIndex, currentOpts) {
  var titlenormal = '<input type="hidden" id="idPhoto" value="' + currentArray[currentIndex].id + '">' +
  '<span id="fancybox-title-over">' +
  '<div id="boxComment" style="position:relative;"><div style="white-space: nowrap;"><div style="float: left;">este es ' + title + '</div><div id="star" style="width:100%">&nbsp;</div></div>';
  alert($(".grouped_elements").eq(currentIndex).attr('private'));
  return titlenormal;
 }

you could also use the onComplete callback instead to get the attribute private like:

'onComplete': function(currentArray, currentIndex){
  alert($(".grouped_elements").eq(currentIndex).attr('private'));
}