Image in modal mode onclick or onmouseover

Image in modal mode onclick or onmouseover

carrarachristophecarrarachristophe Posts: 113Questions: 25Answers: 2

Hello,
I have an image appearing in a column of a datatable.
What I am trying to do is to make it appear in modal mode in case of onclick or onmouseover.

I managed to get sort of what I am looking for with the below code, but it is not clean, the image expanding the other rows/colums.

{"data": "vin_vignobles.vignoble_id", 
          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<a><span>"+'<img max-width=50px" height=25px" src="img/vignobles/' + oData.vin_vignobles.vignoble_id + '.jpg"  onmouseover="this.height=500" onmouseout="this.height=25">'+"</span></a>");}
            }

Did anyone manage to get an image (only) in modal mode onclick or onmouseover?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,418Questions: 26Answers: 4,968
    edited September 2022

    See if this example helps. The selector can be updated to point to the particular td in the row then when clicked or hovered you can open the modal. See this example from this thread.

    Kevin

  • carrarachristophecarrarachristophe Posts: 113Questions: 25Answers: 2

    Hi Kevin,
    Thank you for your message.
    It is very interesting. unfortunately, it does not really solve my problem as:
    * if i am not wrong, it is not possible to add an image to an alert
    * I am looking to the modal mode to show up when clicking on the image and not on anywhere in the cell

  • kthorngrenkthorngren Posts: 21,418Questions: 26Answers: 4,968
    edited September 2022 Answer ✓

    if i am not wrong, it is not possible to add an image to an alert

    The alert is just part of the example. Instead of an alert you will create the modal you want.

    I am looking to the modal mode to show up when clicking on the image and not on anywhere in the cell

    Update the selector to include the img tag or whatever is appropriate for your solution. For example:
    http://live.datatables.net/rakibobe/3/edit

    The whole point of these examples are to show that best practice is to use delegated events so the events work on all pages. The selectors you use and how you display the data is up to your solution requirements.

    Kevin

  • carrarachristophecarrarachristophe Posts: 113Questions: 25Answers: 2

    Thank you Kevin.
    I am now able to click on an image in a cell and trigger an action.
    But still cannot find a way to have have this image displayed in modal mode.
    Am I the only one having this need?

  • kthorngrenkthorngren Posts: 21,418Questions: 26Answers: 4,968

    There is nothing built into Datatables to display a modal. There are lots of tutorials explaining how to create, for example this is a generic JS and CSS tutorial. If you are using a styling framework, like Bootstrap, then you will want to look for tutorials specific to the framework. Stack Overflow is a good resource for general HTML and JS questions and troubleshooting.

    If you provide a link to your page or a test case showing what you are trying to do to display the modal we can take a look.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

Sign In or Register to comment.