ご存知の通り、標準ではWikiページに張り付けられた画像をダイアログで拡大表示、といった動作は実現できません。クラシックUI限定にはなりますが、それをなるべく簡単に実現しようという趣旨です。
- 新しいタブで表示（ノンコーディング）
- ダイアログ表示
- ダイアログから新しいタブで表示
新しいタブで表示（ノンコーディング）
とりあえず別タブでも大きく見えればいいよ、という場合は標準機能ままで出来ます。
適当な画像を張り付けて、サイズを調整します。（枠の色間違えました）
画像を選択したまま、「挿入」-「リンク」を選択し、張り付けた画像のURLをリンク先に指定します。
「新しいタブで開く」にチェックをつけて保存。これで終わりです。
別タブで開くので画像が見えない、などからは解消されますし十分かとも思いますが、個人的に画像を別タブ表示嫌いなんです。ダイアログがいいんです。ここから先は私のわがままです。
ダイアログ表示
自慢じゃありませんが、CSS詳しくありません。ダイアログ表示をスタイルの知識でさっと作れといわれても困ります。
もちろんダイアログ系のJSライブラリなんていくらでもありますが、選定も面倒だしWikiページに画像貼り付けたあとにソース編集からクラス指定しろ、みたいなことが多く、あまり使いたくありません。
・・・そうだ、SharePointのダイアログを使おう
※先ほど設定した画像のリンクは外してください
※jQuery使います
画像を張り付けているページにスクリプトエディタを置いて、下記コードを書きます。(jQueryのパスは書き換えてください）
<style type="text/css">
.ms-wikicontent img {
cursor: pointer;
}
</style>
<script type="text/javascript" src="/sites/xxxxx/siteassets/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).on("click", ".ms-wikicontent img", function() {
var options = SP.UI.$create_DialogOptions();
options.url = $(this).attr("src");
SP.UI.ModalDialog.showModalDialog(options);
return false;
});
</script>SP.UI.ModalDialog.ShowModalDialogがSharePointのダイアログを利用するためのものです。オプションを生成した後にURLに画像パスを指定するだけです。
無事ダイアログででました。
ただ、これ一つ問題があって、ウィンドウサイズ以上の画像だとスクロールになっちゃうんです。大きい画像を全部見たい場合はやはり別タブの方が勝手が良さそうです。
ダイアログから新しいタブで表示
まずは、下記コードを「displayImg.aspx」で保存し、適当なライブラリに配置します。
<meta charset="UTF-8">
<style type="text/css">
#imgArea {
cursor: pointer;
}
</style>
<script type="text/javascript" src="/sites/xxxxxxx/siteassets/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var PARAM_NAME = "imgURL";
$(function () {
var imgURL = GetParameter(PARAM_NAME);
$("#imgArea").append("<img src='" + imgURL + "'/>");
$("#imgArea").click(function() {
window.open(imgURL);
});
});
// リクエストパラメータから画像URLを取得
function GetParameter() {
var parameter = $(location).attr("search");
var start = parameter.indexOf(PARAM_NAME + "=");
var end = parameter.indexOf("&");
if(end === -1) {
end = parameter.length;
}
return parameter.substring(start + PARAM_NAME.length + 1, end);
}
</script>
<div id="imgArea"></div>先ほどスクリプトエディタに書いたコードを修正します。
<style type="text/css">
.ms-wikicontent img {
cursor: pointer;
}
</style>
<script type="text/javascript" src="/sites/xxxxxxxx/siteassets/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/************ displayImg.asxを配置したパスに修正してください！！(?imgURL=は残して) ************/
var DISPLAY_PAGE_URL = "/sites/xxxxxx/siteassets/displayImg.aspx?imgURL="
$(document).on("click", ".ms-wikicontent img", function() {
var options = SP.UI.$create_DialogOptions();
options.url = DISPLAY_PAGE_URL + $(this).attr("src");
// ダイアログのサイズを、画像のオリジナルサイズ＋αに指定
options.height = $(this)[0].naturalHeight + 25;
options.width = $(this)[0].naturalWidth + 25;
SP.UI.ModalDialog.showModalDialog(options);
return false;
});
</script>設定は以上です。これでダイアログ画面から画像を選択することで別タブに画像がウィンドウに適合したサイズで表示されます（Chromeでのみ確認）
解説
- ダイアログの表示ページとして、リクエストパラメータに設定された画像URLを表示するだけのASPXページを用意し、そのページの中で画像別タブ表示スクリプトを実行して実現しています。
- ダイアログ表示時はサイズをしていないとぺったんこな画像になります。画像のオリジナルサイズではスクロールが出たので調整しています。
- ASPXはSharePoint上にありながらSharePointのオブジェクトを一切読み込まないので、SharePointから隔離されたページだと思ってください。なのでSharePointが用意してくれているリクエストパラメータ取得するためのGetUrlKeyValueなど使えません。
- 「.ms-wikicontent」がWikiエリアのクラスの様なので、Wikiエリア外の画像は対象となりません。
このままではスクリプトエディタで配置したページしか使えませんが、以前の記事で紹介したUserCustomActionsにスクリプトを登録するなり、マスターページから参照するなりすることで、サイトの全Wikiページに対して同じ動きにすることもできると思います。
ご利用の際は自己責任でお願いします。お粗末様でした。