Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>IIIF Components Demo</title>
  
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/viewdir/iiif-tree-component/master/dist/iiif-tree-component.css" />
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/viewdir/iiif-gallery-component/master/dist/iiif-gallery-component.css" />
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.76/jsviews.min.js"></script>
  <script src="https://rawgit.com/viewdir/manifold/master/dist/manifold.bundle.js"></script>
  <script src="https://rawgit.com/viewdir/iiif-tree-component/master/dist/iiif-tree-component.bundle.js"></script>
  <script src="https://rawgit.com/viewdir/iiif-gallery-component/master/dist/iiif-gallery-component.bundle.js"></script>
</head>
<body>
  
  <div id="tree" class="iiif-tree-component"></div>
  
  <div id="gallery" class="iiif-gallery-component"></div>
  
  <script>
​
    $(function() {
​
      Manifold.loadManifest({
        iiifResourceUri: 'http://wellcomelibrary.org/iiif/b18035723/manifest'
      }).then(function(helper){
​
        var treeComponent = new IIIFComponents.TreeComponent({
          element: "#tree",
          helper: helper
        });
​
        treeComponent.on("treeNodeSelected", function(args) {
          var node = args[0];
          treeComponent.selectNode(node);
          var path = node.data.path; // tree node not necessarily a range, could be a manifest or collection
          var range = helper.getRangeByPath(path);
          var canvasId = range.getCanvasIds()[0]; // get the first canvas belonging to this range
          var index = helper.getCanvasIndexById(canvasId);
          galleryComponent.selectIndex(index);
        });
  
        treeComponent.databind(helper.getTree());
        
        var galleryComponent = new IIIFComponents.GalleryComponent({
          element: "#gallery",
          helper: helper,
          initialZoom: 3
        });
        
        galleryComponent.databind();
        
      }).catch(function() {
        console.error('something went wrong');
      });
​
    });
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
edsilvpro
0viewers