How to display image in column with lightGallery
How to display image in column with lightGallery
Térinformálok
Posts: 5Questions: 2Answers: 0
in DataTables
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é
This question has an accepted answers - jump to answer
Answers
You may need to use
drawCallbackto apply the lightGallery to the rows shown on the page. You will want to change the#animated-thumbnailsselector 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
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é
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é