How to display image in column with lightGallery

Térinformálok

Hello,

I have a question: is it possible to display the data of a column in lightGallery?

All the data needed to display it is provided, but if I use this:
.render = function ( data, type, row, meta ) {

}

nothing happens.
Better said, the html is generated, but in order to make the lightgalery work, I would need to run something like this:

$("#animated-thumbnails").lightGallery({
thumbnail: true,
})

Something like the following link shows:
https://www.lightgalleryjs.com/demos/thumbnails/

Regards
Máté

kthorngren

You may need to use drawCallback to apply the lightGallery to the rows shown on the page. You will want to change the #animated-thumbnails selector to use a class. If you still need help then please build a simple test case with lightGallery and showing an example of your data.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Térinformálok

Hi,

thanks for the quick response.
I tested the function quickly, so it is half working.
The problem is that I'm using a responsive layout and it understandably doesn't work there.
(Image column not visible as the table is too wide.
The table has about 30 columns, of which the image column is almost at the end.)
I solved it by binding a function to the +,- button click.

$(#tableid tbody).on('click', 'tr td', function(e) {
$(".gallery").lightGallery({
thumbnail: true
})
})

Is there a better solution than this?

Máté

Térinformálok

Thanks again, I found the solution.

var table = $('#example').DataTable( {
responsive: true
} );

table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
console.log( 'Details for row '+row.index()+' '+(showHide ? 'shown' : 'hidden') );
} );

I'm making a binding for 'shown'.

Best regards,
Máté