Ashkan Mobayen Khiabani Ashkan Mobayen Khiabani - 4 months ago 6
jQuery Question

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

Answer

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'); }
});
Comments