Seadragon Ajax: Adding Custom Controls
The Seadragon Ajax Library provides an API for adding custom buttons (images or other HTML) onto the viewer. The viewer then controls the visibility and positioning of those buttons, even when going back and forth from fullpage mode. In this example, we add a text button that randomly pans the image.
If you would like to learn more about Seadragon.Viewer.addControls(...), please refer to the Seadragon.Viewer class reference.
Example
Source Code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://seadragon.com/ajax/0.8/seadragon-min.js">
</script>
<script type="text/javascript">
var viewer = null;
function init() {
viewer = new Seadragon.Viewer("container");
viewer.addControl(makeControl(),
Seadragon.ControlAnchor.TOP_RIGHT);
viewer.openDzi("blue-marble.dzi");
}
function makeControl() {
var control = document.createElement("a");
var controlText = document.createTextNode("Random");
control.href = "#"; // so browser shows it as link
control.className = "control";
control.appendChild(controlText);
Seadragon.Utils.addEvent(control, "click",
onControlClick);
return control;
}
function onControlClick(event) {
Seadragon.Utils.cancelEvent(event); // don't process link
if (!viewer.isOpen()) {
return;
}
var x = Math.random();
var y = Math.random() / viewer.source.aspectRatio;
var z = Math.pow(2, Math.random() * 10 - 5);
viewer.viewport.panTo(new Seadragon.Point(x, y));
viewer.viewport.zoomTo(z);
viewer.viewport.ensureVisible();
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
<style type="text/css">
#container
{
width: 500px;
height: 400px;
background-color: black;
border: 1px solid black;
color: white; /* for error messages, etc. */
}
.overlay
{
font-weight: bold;
margin-top: 4px;
margin-right: 4px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
