Skip to content

Instantly share code, notes, and snippets.

@shyam-habarakada
Created October 25, 2011 22:01
Show Gist options
  • Save shyam-habarakada/1314486 to your computer and use it in GitHub Desktop.
Save shyam-habarakada/1314486 to your computer and use it in GitHub Desktop.
sd-ajax-touch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>LDVC Seadragon Prototype</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
/*
* http://colorschemedesigner.com/
*/
@variables {
toolBg: #999933;
toolText: #ffffff;
toolBorder: #666633;
landmarkBg: #663333;
}
body {
margin: 0px;
border: 0px;
font-family: Verdana;
line-height: 1.25em;
}
/* snipped unrelated styles */
</style>
<script type="text/javascript" src="/js/raphael/raphael.js"></script>
<script type="text/javascript" src="/js/seadragon-ajax/seadragon-min.js"></script>
<script type="text/javascript" src="http://zoom.it/scripts/Seadragon-TouchController-min.js"></script>
<!--script type="text/javascript" src="http://zoom.it/scripts/Seadragon.TouchController.js"></script-->
<script type="text/javascript">
var viewer = null;
var lastLocation = null;
function init() {
Seadragon.Config.imagePath = "/js/seadragon-ajax/img/";
Seadragon.Config.transformOverlays = true;
Seadragon.Config.zoomPerClick = 1.5;
Seadragon.Config.blendTime = 0.25;
viewer = new Seadragon.Viewer("container");
viewer.addEventListener("open", addOverlays);
viewer.setDashboardEnabled(false);
viewer.openDzi("sea-dragon/regular/1a/dzc_output.xml");
}
function addOverlays(viewer) {
// snipped some unrelated overlay initialization code. Nothing fancy here,
// just a div with some text, and an embedded iframe/youtube video
viewer.drawer.addOverlay(div, point, Seadragon.OverlayPlacement.CENTER);
}
Seadragon.Utils.addEvent(window, "load", init);
Seadragon.Config.autoHideControls = true;
</script>
</head>
<body>
<div id="content" class="block-fill">
<div id="toolbar" class="block-float toolbar">
<div id="tbTop" class="tbTop">A TITLE GOES HERE</div>
<div id="tbBottom" class="tbBottom">Some more descriptive text and other toolbar elements go here</div>
</div>
<!-- container is the seadragon viewer -->
<div id="container" class="block-fill">
</div>
</div>
</body>
</html>
@ElvisYang
Copy link

shyam,
I am working on seadragon.Ajax, and also want it to support multitouch in IPad or Iphone in web browser, I heard you have successfully done it , can you give me full source demo code?

@shyam-habarakada
Copy link
Author

shyam-habarakada commented Feb 14, 2012 via email

@ElvisYang
Copy link

shyam,
I have found the way to use it(just initialize it with argument viewer) :)

BTW, I also want to ask why you need touch feature for seadragon? The client is for Mobile? What I am working is what to show the deepzoom features in Mobile, you know the silverlight doesn't do good job in crossing platform specially in Mobile.

@shyam-habarakada
Copy link
Author

shyam-habarakada commented Feb 15, 2012 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment