簡単なIIIFビューワを作ってみよう（6）: もう少し便利なインターフェイスを

透過度や位置を変更できるようにしましたが、いちいち数字を入れてボタンを押す・・・という操作はいかにも面倒です。透過度の調整は、スライダが適しているように思えます。そこで jQuery UIのスライダを組み込んでみましょう。

とりあえず、動くスライダを表示してみる

jQuery UIは、jQueryで便利なインターフェイスを提供してくれるライブラリのようなものです。うまく組み込むことができれば、とても便利に使うことができます。基本的には、ダウンロードしてscriptタグで読み込まれば準備は完了です。

ダウンロードはこちらからです。以下のページ画面の右側の方にある「stable」をクリックしてください。

ダウンロードしたら、展開してください。そうすると、たとえばダウンロードしたものが jquery-ui-1.12.1.zip であれば、 jquery-ui-1.12.1 というフォルダ（ディレクトリ）ができているはずです。jquery-uiはディレクトリ構成をいじるとややこしいことが起きるかもしれませんのでこのまま使いましょう。

まず、とにかくスライダを表示させることを目標にしてみます。jquery-uiでスライダを表示できるようにするには、jquery-uiのcssファイルとjsファイルをページに読み込ませる必要があります。

<title>私の簡易IIIFビューワ</title>
    <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css">
    <!-- 上記のタグを追加してcssファイルを読み込めるようにします。-->
    <style>

    <script src="jquery-3.4.1.min.js"></script>
    <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <!-- 上記のタグを追加してjsファイルを読み込めるようにします。-->
    <script src="openseadragon-bin-2.4.0/openseadragon.min.js"></script>

以上のようにして、cssファイルとjsファイルを読み込めるようにしたら、スライダを表示するエレメントをどこかに追加してみましょう。とりあえずビューワ画面の直上がいいような気がしますので、以下のようにしてみます。

    <div id="slider"></div>
    <!-- 上のタグを追加します。-->
    <div id="myViewer" class="openseadragon" style="width:600px;height:600px"></div>

そして、スライダを表示するjavascriptを書きます。

    <script>
  $(function(){
    $( "#slider" ).slider();
    // 上の一行を、最初の方に追加します。

そうすると、単にスライダが追加され、動かせるようになっているはずです。 今回のサンプルはこちらです。

スライダを重ねた画像の透過度と連動させてみる

スライダは色々な設定を加えることができます。透過度はcssのopacityで設定できますので、 以下のようにスライダのjavascriptに追記して、スライダの値とopacityが連動するようにしてみます。

    $( "#slider" ).slider({
      min: 0,
      //最小値
      max: 100,
      //最大値
      value: 100,
      // 最初の値
      slide: function( event, ui ) {
         var opa = ui.value / 100;
         // ui.valueで、スライダの値をとれます。opacityは1が最大値なので、スライダの値（最大値100）を100で割った値を用います。
         console.log();
        $(".overLayImg").css({'opacity':opa});
        //重ねた画像のクラスを指定して、cssでopacityの値を与えます。
      }
    });

ついでに、幅が広すぎると使いにくいので、スタイルを設定してスライダの幅を少し狭くしてみます。

<div id="slider" style="width:50%"></div>

今回のサンプルはこちらです。