CODEWITHSUNDEEP
javascriptjqueryfancyboxfancybox-2
hardbizkit
hardbizkit

Reputation: 37

Fancybox will not use content passed via javascript

Using jquery 1.10.2, fancybox 2.1.5

I'm trying to pass fancybox the "content: data" via javascript but its not working. Yet if I console.log the data variable it shows me valid HTML/text, but fancybox refuses to use it.

<div class="item">
<h4 class="choice">launch modal</h4>
<div class="detail">
This should show up in my <b>fancybox</b>!
</div><!--.detail-->
</div><!--.item-->

$('.choice').each(function(i, elem){
    $(elem).siblings('.detail').wrap('<div style="display:none"></div>');
});

$(".choice").fancybox({
    maxWidth: 800,
    content: 'replace this text',
    beforeShow: function(){
        var title = $(this.element).text();
        var data = $(this.element).parent().find('.detail').html();
        console.log('this=' + this + ' | title=' + title + ' | data=' + data);//DEBUG
        this.content = data;
    }
});

The console log shows clearly that its got the data html content, but fancybox refuses to use it. I've wrapped it in another div with display:none since their site says to do that for whatever reason.

Upvotes: 1

Views: 169

Answers (1)

JFK
JFK

Reputation: 41143

To build your content inside the callback, use afterLoad instead, otherwise the content option will have preference over this.content within any other callback :

$(".choice").fancybox({
    maxWidth: 800,
    content: 'replace this text',
    afterLoad: function () {
        var title = $(this.element).text();
        var data = $(this.element).parent().find('.detail').html();
        console.log('this=' + this + ' | title=' + title + ' | data=' + data); //DEBUG
        this.content = data;
    }
});

See JSFIDDLE

Note: you can also build/replace the title as in your code above like this.title = title;

Upvotes: 3

Related Questions