Return value from function as value for parameter in jQuery

1
votes

The value of the parameter content should be a function which gets the content. I thought I can use something like this:

$(".fancy-detail-page").fancybox({
      'content'    : function(){
          var id = $(this).attr('id');
          id = id.replace("pd", "c");
          var content = $('#' + id + ' .product-details').html();
          return content;
      },
      'padding'    : 0,
      'openEffect'  : 'none',
      'closeEffect'  : 'none',
      'maxWidth'    : 960
 });

But return doesn't seem to work. How is this correctly done?

3
javascriptjqueryfunctionfancyboxfancybox-2
Would wrapping it in parentheses like (function() { ... return content })() work? - user571545
@testing It should like here: jsfiddle.net/s6ZKT - A. Wolff
@roasted: Your code works. I think it's because it can't get the id. So I would have to put in a click function I think. - testing
'this' refers to window object in your code - A. Wolff
@roasted: I posted my solution. Thank you. - testing

3 Answers

1
votes

Thanks to jqueryrocks and roasted. This solution worked for me:

  $(".fancy-detail-page").click(function(e){
    e.preventDefault();
    var id = $(this).attr('id');
    $.fancybox({
      'content'    : (function(){
        id = id.replace("pd", "c");
        var content = $('#' + id + ' .product-details').html();
        return content;
      })(),
      'padding'    : 0,
      'openEffect'  : 'none',
      'closeEffect'  : 'none',
      'maxWidth'    : 960
    });
   });
1
votes

Without complicating things too much, you could have used the beforeLoad callback to get the same result, and it would have been cleaner, simpler and quicker like :

$(".fancy-detail-page").fancybox({
    padding: 0,
    openEffect: 'none',
    closeEffect: 'none',
    maxWidth: 960,
    beforeLoad : function () {
        var id = $(this.element).attr("id").replace("pd", "c");
        this.content = $('#' + id + ' .product-details').html();
    }
});

JSFIDDLE

and this line

this.content = $('#' + id + ' .product-details').html();

can be reduced to this

this.content = $('#' + id + ' .product-details');

no need of .html() to get the same result ... see updated JSFIDDLE

0
votes

Assuming this is the same plugin.

Per API looks like 'content' must be data.

"content Forces content (can be any html data)" http://fancybox.net/api

So you just need to call the function(or set a content var)before initializing fancybox;

var id = $(this).attr('id');
id = id.replace("pd", "c");
var content = $('#' + id + ' .product-details').html();

$(".fancy-detail-page").fancybox({
      'content'    : content,
      'padding'    : 0,
      'openEffect'  : 'none',
      'closeEffect'  : 'none',
      'maxWidth'    : 960
 });