Use popovers to show a bigger picture of the part image.

This commit is contained in:
Jan Böhmer 2020-02-06 19:41:15 +01:00
parent 743423432e
commit 6cb34edfe9
2 changed files with 9 additions and 8 deletions

View file

@ -358,12 +358,6 @@ btn-xs
margin-right: auto;
}
.hoverpic:hover {
transform: scale(6);
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.darkmode--activated .hoverpic:hover {
background: black;
}

View file

@ -361,8 +361,15 @@ $(document).on("ajaxUI:reload ajaxUI:start", function () {
* Load the higher resolution version of hover pictures.
*/
$(document).on("ajaxUI:reload ajaxUI:start ajaxUI:dt_loaded", function () {
$(".hoverpic[data-thumbnail]").mouseenter(function() {
$(this).attr('src', $(this).data('thumbnail'));
$('.hoverpic[data-thumbnail]').popover({
html: true,
trigger: 'hover',
placement: 'right',
container: 'body',
content: function () {
return '<img class="img-fluid" src="' + $(this).data('thumbnail') + '" />';
}
});
});