KANSE Lab

今まで開発していたプラグインの新しいバージョンとして、MLA(博物館・美術館、図書館、公文書館)などで利用できるように、今まで文書用プラグインで用いていたopenseadragonを用いて表示すること（書籍のように画面の拡大が可能なモード）及び、IIIF対応マニフェストによる画像などを表示できるようにした。

openseadragonの利用のためjQueryは以下のようにした。

jQuery(window).load(function () {
  wH=wW * .56; 
  var iw = jQuery('#sp-thumbnail').width();
  jQuery('#contentDiv').css('left', iw + 'px');
  jQuery('#contentDiv').css('height', wH + 'px');
  jQuery('#sp-thumbnail').css('height', wH + 'px');
  jQuery("#pageNum").html(1);
 //画面サイズ変更時に呼ばれる
  clearTimeout( checkResize );
  var checkResize;
  jQuery(window).resize(function(){
if (!(jQuery('#contentDiv').hasClass('fullpage'))){
  checkResize = setTimeout( resizing, 100 );
}
  });
  //リサイズ完了時に実行する処理
  function resizing() {
  var wW=jQuery('#bookcontents').width();
  wH=wW * .56; 
  var iw = jQuery('#sp-thumbnail').width();
  jQuery('#contentDiv').css('left', iw + 'px');
  jQuery('#contentDiv').css('height', wH + 'px');
  jQuery('#sp-thumbnail').css('height', wH + 'px');
  }
 //load-imageクラスのクリック
  jQuery(".load-image").click(function () {
    var spage = jQuery('li.load-image').index(this);
    var ipage = parseInt(spage);
    viewer.goToPage(ipage);
    OpenSeadragon.cancelEvent(event);
    });
//OpenSeadragonで設定
  viewer = OpenSeadragon({
    id: "contentDiv",
    prefixUrl:     "images/",
    visibilityRatio:    1,
    defaultZoomLevel: 	1,
    minZoomLevel: 	1,
    maxZoomLevel: 	3,
    sequenceMode:  true,
    initialPage: 0,
    showNavigator: true,
    toolbar: "toolbarDiv",
    fullPageButton: "full-page",
    rotateLeftButton: "rotate-left",
    rotateRightButton: "rotate-right",
    zoomInButton: "zoom-in",
    zoomOutButton: "zoom-out",
    homeButton: "reset",
    nextButton: "next",
    previousButton: "previous",
    tileSources:   [ ]
	});
//OpenSeadragonで表示
  viewer.open(idata);
	//ページ変更時イベント
  viewer.addHandler("page", function (data) {
    if (!(jQuery('#contentDiv').hasClass('fullpage')))
    {
      jQuery('#pageNum').value = (data.page +1);
      jQuery('#sp-thumbnail ul li').css('background-color', 'transparent'); 
      var target = jQuery('#sp-thumbnail ul li').eq(data.page);
      jQuery("#pageNum").html(data.page+1);
      target.css('background-color', '#f8f4e6');
      var box = jQuery('#sp-thumbnail');
      var top = box.scrollTop();
      var dif = 0;
      var pad = box.offset().top;
      dif = target.offset().top;
      box.scrollTop(top + dif - pad);
    }
  });
});

プラグインでは以下に赤字で示した部分でスクリプトにデータを設定している。

// openseadragonで表示する

function da_book_hyouji($attachments){
	?>
	<div id="bookcontainer">
		<header>
		<div id="toolbarDiv">
		<span id="button-panel">
		<a id="full-page" href="#full-page">全画面表示</a>
		&nbsp;|&nbsp; <a id="reset" href="#reset">リセット</a>
		&nbsp;|&nbsp; <a id="zoom-out" href="#zoom-out">縮小</a>
		&nbsp;|&nbsp; <a id="zoom-in" href="#zoom-in">拡大</a>
		</span>
		</div>
		</header>
		<div id="bookcontents">
			<div id="sp-thumbnail" >
			<ul>
<?php
	$bno = 0;
	foreach ($attachments as $attachment) {
		$bno = $bno + 1;
?>
			 <li class="load-image"  id=<?php echo $bno; ?> >
			 <img src=<?php echo(wp_get_attachment_image_url($attachment->ID,'thumbnail')); ?> />
			<br />
			 </li>
  <?php
	 }
?>
			<li></li>
			</ul>
			</div>
			<div id="contentDiv"  style="background-color:transparent; "></div>
			</div>
		<footer>
			<div id="footerDiv" >
			<a id="previous" href="#previous-page">前頁</a>
			&nbsp;|&nbsp; <a id="next" href="#next-page">次頁</a>
			&nbsp;|&nbsp; 画像番号：<div id="pageNum"></div>
			</div>
		</footer>
	</div>
</div>
<script type="text/javascript">
	var viewer;
	var idata = [
		<?php  foreach ($attachments as $attachment) {
		?>
	{  type: 'image',
		url:' <?php echo(wp_get_attachment_image_url($attachment->ID,'full')); ?>',
	},
<?php
	}
?>
];
</script>
<?php
}

IIIF対応マニフェストによる画像などを表示は以下のようにiframeに該当マニフェストを変数とし、miradorを用いたIIIF対応画像表示ページを呼び出している。

/*　IIIF 表示　*/
function da_iiif_hyouji($iiifurl){
?>
<div id="layout" class="pure-g">
<div class="pure-u-1 pure-u-md-3-5">
<div class="l-box" >
<?php
$plugin_url = plugin_dir_url( __FILE__ );
?>
<div class="iframe-iiif" style="padding-top:66.66%;">
<iframe src="<?php echo $plugin_url."iiifm.html?manifest=".$iiifurl; ?>" width="800px" height="530px" frameborder="0" id="frame" allow="fullscreen">
You need an iFrame capable browser to view this.
</iframe>
</div>
</div></div>
<div class="pure-u-1 pure-u-md-2-5">
<div class="l-box">
<?php echo da_mdlist();
?>
</div>
</div>
<?php
}

これで今回開発したプラグインは一様完成とする。

テーマはこのプラグイン用に作成したものを標準としているが、WordPress標準テーマTwnty Twentyの子テーマを作成したのでダウンロードして利用ください。

子テーマダウンロード