在网页上使用Annotorious的问题

时间:2015-06-03 07:29:27

标签: javascript php html annotations openseadragon

我在网页上使用Annotorious时遇到问题。 我必须在我的页面上显示OpenSeaDragon图片,我做了什么,并能够注释图像。 我使用了此页面的源代码http://annotorious.github.io/demos/openseadragon-preview.html,但它无法正常工作,我看到按钮"添加注释"在我的页面上但是所有,我无法选择区域来写东西。 需要帮助,这是我的源代码:



<!DOCTYPE html>
<html>
  <head>
     <?php include 'includes/navbar.php' ?> 
       <?php include 'includes/connect_bdd.php';?>

    <title>Annotorious - Image Annotation for the Web</title>
    <link type="text/css" rel="stylesheet" media="all" href="annotorious/css/highlight.css" />
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script src="openseadragon.min.js"></script>
    <script type="text/javascript" src="annotorious/annotorious.min.js"></script>
    <style>
      #map-annotate-button {
        position:absolute;
        top:3px;
        right:3px;
        background-color:#000;
        color:#fff;
        padding:3px 8px;
        z-index:10000;
        font-size:11px;
        text-decoration:none;
      }
    </style>
    <script>
      function annotate() {
        var button = document.getElementById('map-annotate-button');
        button.style.color = '#777';

        anno.activateSelector(function() {
          // Reset button style
          button.style.color = '#fff';
        });
      }

      function init() {             
        var viewer = OpenSeadragon({
          id: "openseadragon",
          prefixUrl: "images/",
          showNavigator: false,
          tileSources:"PhotoDzi/TCGA-BH-A1ES-01Z-00-DX1.C54C809F-748F-4BB0-B018-A8A83A4134C0.svs.dzi"
        });
        
        anno.makeAnnotatable(viewer);
      }
    </script>
  </head>

  <body onload="init()";>
            
    <div class="content">
      <div class="content-inner">
        <div style="position:relative; width:640px; height:400px; margin-bottom:20px;">
          <div id="openseadragon" style="width:640px; height:400px; background-color:#fff;"></div>
          <a id="map-annotate-button" onclick="annotate(); return false;" href="#">ADD ANNOTATION</a>
        </div>

         <h4>About</h4>
            <?php
            $req = $bdd->query('SELECT * FROM miniatures WHERE titre=\'' . $_GET['titre'] . '\'');
            $image = $req->fetch();
            ?> 

            <?php
            $req->closeCursor();
            ?>
          </div>
        </div><!--/.sidebar-offcanvas-->
            
    <script type="text/javascript">
      jQuery(document).ready(function(){
        jQuery('pre.code').highlight({source:0, zebra:1, indent:'space', list:'ol'});
      });
    </script>
  </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我用最新的Openseadragon和我自己的dzi尝试了你的代码并取出了 php并插入一些文本,然后用

替换hightlight.css

&#34; /theme-dark/annotorious-dark.css"

它似乎有用..

相关问题