Image in modal mode onclick or onmouseover
Image in modal mode onclick or onmouseover
carrarachristophe
Posts: 100Questions: 24Answers: 2
in DataTables
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
See if this example helps. The selector can be updated to point to the particular
tdin the row then when clicked or hovered you can open the modal. See this example from this thread.Kevin
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
The alert is just part of the example. Instead of an alert you will create the modal you want.
Update the selector to include the
imgtag 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
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?
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