How to display image in column with lightGallery

How to display image in column with lightGallery

TérinformálokTérinformálok Posts: 5Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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álokTérinformálok Posts: 5Questions: 2Answers: 0
    edited September 2022

    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álokTérinformálok Posts: 5Questions: 2Answers: 0

    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é

Sign In or Register to comment.