How to configure a fancybox event on an element inside a ?

pcla56

On a different (but similar) page not implementing DT we have a <td> with the following code:

<a class="fancybox" rel="gallery" href="<?=$ikulpic->image?>" title="User inspiration">
<img src="<?=$ikulpic->image?>" height="35px" width="35px" style="display:block;margin:0 auto" />
</a>

A small script ensures the <a> has a fancybox event and it all works fine:

$(function(){
$(".fancybox").fancybox();
});

Now on my DT table I have exactly the same code provided in column 7.

My JS script for the DT is as follows:

$(document).ready(function() {
var url = '/get-gobigs';
$('#dataTables-static').DataTable({
processing: true,
ordering: true,
paging: true,
searching: true,
ajax: {
url: url,
method: 'POST',
dataSrc: ''
},
columns: [
{data: 'id'},
{data: 'user_id'},
{data: 'reference'},
{data: 'color'},
{data: 'rendered_time'},
{data: 'inspiration'},
{data: 'tags'},
{data: 'image', sortable: false},
{data: 'actions', sortable: false}
],
columnDefs: [
{targets: 3,
"createdCell": function (td, cellData, rowData, row, col){
$(td).css('background-color', '#'+cellData)
}
},
{targets: 8,
"createdCell": function (td, cellData, rowData, row, col){
$(td).css('display', 'inline-table')
}
}
]
});

});

I have tried all sorts of things eg

        {targets: 7,
            "createdCell": function (td, cellData, rowData, row, col){
                    $('.fancybox').fancybox();
         }

but have so far not been able to add the event.

I'm sure I have misunderstood something so perhaps someone could put me right please if it can be done?

Thanks, Paul

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren

I'm not familiar with fancybox but it sounds like you need to create a delegated event like this example.

Also see this FAQ.

Kevin

pcla56

A rare opportunity to add some knowledge! I found the following worked:

        {targets: 7,
            "createdCell": function (td, cellData, rowData, row, col){
                $(td.firstChild).fancybox()
            }
        },

within ColumnDefs.

Many hours frustration .....

allan

Thank you for posting back with your solution.

Allan