Search code examples
javascriptjquerycolorbox

Access the attributes of the caller element in the options section of the jQuery plugin

I have some links that according to what they will show when clicked they have different width and height data (this links are generated in server side) like:

<a class="inline" href="#inline-content-1" data-width="80%" data-height="80%">content 1</a>
<a class="inline" href="#inline-content-2" data-width="50%" data-height="80%">content 2</a>

Now I want to use something like:

$('.inline').colorbox({inline:true, width:$(this).data('width'), height:$(this).data('height')});

but $(this).data('width') does not seem to be valid in the options section

Solution

  • Colorbox can be passed a function to be evaluated in place of a static value for any of its properties.

    $('.inline').colorbox({
     inline: true, 
     width: function(){ return $(this).data('width'); }, 
     height: function(){ return $(this).data('height'); }
});