digital_resources.inc 3.77 KB
Newer Older
Tarje.Lavik's avatar
Tarje.Lavik committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

      {% if models.dzi|length != 0 %}
      <!-- Contains the OpenSeadragon viewer -->
      <div class="ui top attached tab segment no-padding active" data-tab="dzi"> 
        <div id="dzi1" style="height:50rem; background-color: black;"></div>
      </div> 
      {% endif %}   

      {% if models.digitalresources|length != 0 %}
      <div data-tab="jpeg" class="{% if models.dzi|length == 0 %}active{% endif %} ui top attached tab segment no-padding">

        <!-- fotorama.css & fotorama.js. -->
        <link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css" rel="stylesheet">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js"></script>

        <div class="fotorama">
          {% for row in models.digitalresources %}    
            <img src="{{row.imgSM.value}}" data-full="{{row.imgMD.value}}" alt=""/>
          {% endfor %}
        </div>

      </div>
      {% endif %}
      
          {% if models.dzi|length != 0 && models.digitalresources|length != 0 %}
    <div class="ui bottom attached tabular menu dr-tab">
      <a class="item {% if models.dzi|length != 0 %}active{% else %}disabled{% endif %}" data-tab="dzi">Zoom</a>
      <a class="item {% if models.dzi|length == 0 %}active{% endif %}" data-tab="jpeg">Jpeg</a>
    
    
    <div id="dzi-control" class="right menu">
          <button id="resetZoom" class="ui item button"><i class="fa fa-arrows-alt"></i> <span class="hidden-xs">tilpass zoom</span></button>
          <button id="full-page" class="ui item button" alt="Fullskjermvisning av og på"><i id="fullPage" class="fa fa-expand"></i></button>
          <button id="zoom-out" class="ui item button"><i class="fa fa-search-minus"></i></button>
          <button id="zoom-in" class="ui item button"><i class="fa fa-search-plus"></i></button>
          {% if models.dzi|length > 1 %}
          <button id="previous" class="ui item button"><i class="fa fa-arrow-left"></i> forrige</button>
          <button class="ui item button"> til side &nbsp;<input style="width: 55px;" type="number" id="page" value="1"/> av <span id="tileSourcesLength"></span></button>
          <button id="next" class="ui item button">neste <i class="fa fa-arrow-right"></i></button>
          {%endif%}
        </div>
      </div>  
    {% endif %}
    
          <script type="text/javascript" src="{{lodspk.home}}js/openseadragon/openseadragon.js"></script>

      <script type="text/javascript"> 
        var viewer = OpenSeadragon({
          id:            "dzi1",
          prefixUrl:     "{{lodspk.home}}vjs/openseadragon/images/",
          tileSources:   [     
          {% for row in models.dzi %}{%if !forloop.first && models.dzi|length > 1 %},{%endif%}
          "{{ row.dziUri.value }}"{% endfor %}
          ],
          visibilityRatio: 1.0,
          minZoomLevel: 1,
          constrainDuringPan: true,
          preserveViewport: false,
          //minZoomImageRatio: 0.9,
          minPixelRatio: 0.5,
          animationTime: 0.8,
          springStiffness: 8,
          showNavigator:  true,
          //navigatorId:   "navigatorDiv",
          toolbar:       "dzi-control",
          zoomInButton: "zoom-in",
          zoomOutButton:  "zoom-out",
          homeButton:     "resetZoom",
          fullPageButton: "full-page",
          nextButton:     "next",
          previousButton: "previous"
        });

        $('#page').change(function() {
          chpage = $('#page').val();
          currentPage = chpage-1;
          viewer.goToPage(chpage-1); 
        });
        viewer.addHandler('page', function(event){
          $('#page').val(event.page+1);
        });
        function tileSourceLength() {
          length = viewer.tileSources.length ;
          $('#tileSourcesLength').append(length);
        };
        tileSourceLength();
    </script>