Проблемы с наложениями и подсказками OpenSeaDragon в режиме сбора
Я работаю над галереей изображений на основе OpenSeaDragon, и я хотел бы иметь возможность использовать наложения в режиме сбора. Основываясь на различных примерах на веб-сайте OSD ( http://openseadragon.github.io/), мне удалось собрать воедино минимальный рабочий пример, но есть несколько проблем, которые я не смог исправить (см. https://jsfiddle.net/7ox0hg9L/).
Во-первых, переключатель наложения вкл / выкл работает нормально, но если я перемещаю / увеличиваю изображение, наложение появляется снова, хотя при переключении-выключении элемент удаляется из DOM с помощью parentNode.removeChild(),
Во-вторых, я не могу заставить всплывающие подсказки работать согласованно на первой странице, и они никогда не появляются на следующих страницах. Подсказка на ярлыке radiobutton отлично работает на любой странице, поэтому я не уверен, почему подсказки на оверлеях не работают.
Любое предложение будет приветствоваться. Пожалуйста, имейте в виду, что я новичок в JavaScript. Спасибо!
РЕДАКТИРОВАТЬ: ответ iangilman ниже и его изменения в jsfiddle вернули меня в нужное русло и помогли мне создать галерею, которую я имел в виду. Я публикую здесь полное решение для тех, кому могут понадобиться подобные функции. Спасибо Ян!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/openseadragon.min.js"></script>
<style>
body {
margin: 0;
color: #333;
font-family: Helvetica, Arial, FreeSans, san-serif;
background-color: #121621;
}
.openseadragon{
width: 800px;
height: 600px;
border: 1px solid black;
color: #333;
background-color: black;
}
.highlight{
opacity: 0.4;
filter: alpha(opacity=40);
outline: 6px auto #0A7EbE;
background-color: white;
}
.highlight:hover, .highlight:focus{
filter: alpha(opacity=70);
opacity: 0.7;
background-color: transparent;
}
.nav {
cursor: pointer;
display: inline-block;
font-size: 25px;
}
.controls {
text-align: center;
display: table;
background-color: #eee;
table-layout: fixed;
width: 800px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="controls">
<label class="labels"><input id="showOverlays" type="checkbox"><a id="selector" title="">Show overlays</a></label>
<a class="nav previous" title="Previous" id="prv"> < </a>
<a class="nav next" title="Next" id="nxt"> > </a>
</div>
<div id="example-runtime-overlay" class="openseadragon" />
<script type="text/javascript">
var tileSource = {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "http://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
};
var runtimeViewer = OpenSeadragon({
id: "example-runtime-overlay",
prefixUrl: "openseadragon/images/",
showSequenceControl: true,
sequenceMode: true,
nextButton: "nxt",
previousButton: "prv",
tileSources: [{
tileSource: tileSource,
overlay: [{
id: 'example-overlay',
x: 0.43,
y: 0.47,
width: 0.15,
height: 0.20,
className: 'highlight',
caption: 'Nice painting'
}]
},{
tileSource: tileSource,
overlay: [{
id: 'example-overlay',
x: 0.65,
y: 0.05,
width: 0.12,
height: 0.12,
className: 'highlight',
caption: 'Milton'
}]
}]
});
var page = 0;
runtimeViewer.addHandler("page", function (data) {
page = data.page;
});
$('.next').click(function() {
radio.prop('checked', false);
});
$('.previous').click(function() {
radio.prop('checked', false);
});
var radio = $('#showOverlays')
.prop('checked', false)
.change(function() {
if (radio.prop('checked')) {
var overlay = runtimeViewer.tileSources[page].overlay[0];
var elt = document.createElement("div");
elt.id = overlay.id;
elt.className = overlay.className;
elt.title = "";
$(elt).tooltip({
content: overlay.caption
});
runtimeViewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(overlay.x, overlay.y, overlay.width, overlay.height)
});
} else {
var overlay = runtimeViewer.tileSources[page].overlay[0];
var element = document.getElementById(overlay.id);
if (element) {
runtimeViewer.removeOverlay(element);
delete element;
}
}
});
$(function() {
$(document).tooltip();
});
</script>
</body>
</html>
1 ответ
Похоже, у тебя хорошее начало!
Вы правильно добавляете оверлеи с addOverlayтак что вам нужно удалить их с removeOverlay:
runtimeViewer.removeOverlay(element);
К сожалению, для подсказок обработка событий в OpenSeadragon может мешать работе jQuery, поэтому вам придется использовать OpenSeadragon MouseTracker:
function bindTooltip(elt) {
new OpenSeadragon.MouseTracker({
element: elt,
enterHandler: function(event) {
// Show tooltip
},
exitHandler: function(event) {
// Hide tooltip
}
}).setTracking(true);
}