CODEWITHSUNDEEP
javascriptjqueryhtmlfancyboxargument-passing
gstackoverflow
gstackoverflow

Reputation: 36984

How to pass data to fancybox function?

I have wrote following code:

html: 

 <a class="fancybox" caption="This is 1st title" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" data-page1 alt=""/></a>


 <a class="fancybox" caption="This is 2nd title" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" data-page2 alt=""/></a>

js:

$(".fancybox")
    .fancybox({
         beforeLoad: function () {
             alert(this);
              this.title = $(this.element).attr('caption');
    }
});

I want to show text taken from data attribute before image will show(page1 or page2).

Please, help to modify me code.

http://jsfiddle.net/9GwUu/25/

Upvotes: 0

Views: 2781

Answers (3)

CodeGodie
CodeGodie

Reputation: 12132

It seems like youre calling (alerting) the this object. You need to use the title attribute like this: DEMO FIDDLE

Upvotes: 0

lschmierer
lschmierer

Reputation: 616

Want to achieve this?

http://jsfiddle.net/9GwUu/30/

alert($(this.element).attr('caption'));

Upvotes: 0

Johan
Johan

Reputation: 35194

Like this?

<a class="fancybox" caption="This is 1st title" 
href="http://fancyapps.com/fancybox/demo/1_b.jpg">
    <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" data-page="1" alt=""/> 
</a>

beforeLoad: function () {
    console.log(this.element.find('img').data('page')); 
    console.log(this.element.attr('caption'));
    // etc...
}

The element is already a jQuery object, so no need to pass it in to the jQuery function. Also, I suggest that you use either html5 data attributes or valid property names i.e. not "caption".

http://jsfiddle.net/9GwUu/27/

Upvotes: 2

Related Questions