Image in modal mode onclick or onmouseover

carrarachristophe

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?

kthorngren

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

carrarachristophe

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

kthorngren

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

carrarachristophe

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?

kthorngren

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