Example of use: Interactive: Exhibtion Road drawing scroll
Using OpenSeadragon create zoomable version of a large image, and then add markers over the top to allow additional text/audio/video to annotate the details.
- Modify
tile_generator/generate.py:7&14
to point to the correct file - Run
python generate.py
Include the JS and CSS on the page
Create a bulleted list with this ul
<ul class="point_data" data-dzi="/assets/tiles/scroll.dzi" data-osd_box_id="osd_reference">
Set up each li
as follows:
<li data-point_x="0.375044972015069", data-point_y="0.02152184223721047">
<h3>Point Name</h3>
<p class="point_data__date">23 October 2014</p>
<div class="point_data__content">
<iframe class="point_data__vimeo" src="https://player.vimeo.com/video/106610828" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<h4>Transcript</h4>
<p>[Background music]</p>
</div>
</li>
The Deep Zoom will appear above it.
Add ?builder=true
to the query string