IDRViewerをライトボックスとして埋め込む
BuildVuで書き出したHTML/SVGを使ってライトボックスのポップアップを作成するのはとても簡単です。ここでは、簡単にあなたのサイトに組み込むことができるリソースを用意しました。このチュートリアルでは、いくつかのCSSとJavaScriptを提供しています。これらの関数を呼び出すと、変換されたPDFのライトボックスが作成され、暗くなった背景をクリックすることで消すことができます。
CSS
まず、ライトボックスが正しく見えるように、CSSを定義する必要があります。
以下のCSSを、新しいスタイルシート、サイトの既存のスタイルシート、または<style>タグの間に追加する必要があります。
.idrLightbox {
position: fixed;
background-color: rgba(0,0,0, 0.7);
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.idrLightbox iframe {
display: block;
width: 800px;
height: 90%;
margin: 30px auto auto;
}
これにより、ページの上に暗転したボックスが作成され、IDRViewerが配置されます。
JavaScript
次に、ライトボックスの作成と削除を処理するためのJavaScriptを追加する必要があります。
以下は、<script>タグ内、または外部JavaScriptファイルとしてサイトに追加する必要があります。
function createLightbox(path) {
let lightbox = document.createElement("div");
lightbox.classList.add("idrLightbox");
// Add listener to the background so it is dismissed when clicked
lightbox.addEventListener("click", () => {
// Enable Scrolling
document.querySelector("body").style.overflow = "unset";
lightbox.remove()
});
let viewer = document.createElement("iframe");
viewer.src = path;
lightbox.appendChild(viewer);
// Add the lightbox as the last element in the body
document.querySelector("body").appendChild(lightbox);
// prevent scrolling
document.querySelector("body").style.overflow = "hidden";
}
これで、createLightbox("path/to/converted/pdf") (path/to/converted/pdfは変換後のPDFへのパスに置き換える)を使ってこの関数を呼ぶと、ライトボックスを作成してIDRViewerをその中に埋め込むことができます。また、このコードでは、ライトボックスを設定し、暗くなった背景をクリックするとライトボックスが解除されるようにしています。
Example
この例では、画像をクリックするとライトボックスが開くように設定する方法を説明します。
このように、サイトに画像を追加します：
<img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onclick="createLightbox('path/to/converted/pdf')" data-src="http://path/to/image" class="lazyload" /><noscript><img decoding="async" src="path/to/image" onclick="createLightbox('path/to/converted/pdf')" data-eio="l" /></noscript>
と記載します、それだけでOKです。これで画像をクリックすると、変換されたPDFがライトボックスにポップアップ表示されます。
カスタマイズ
ライトボックスのスタイルは、CSSを使って簡単にカスタマイズすることができます：
- ライトボックスの背景をどの程度暗くするかは、.idrLightbox background-colorプロパティの4番目の数値で設定することができ、0は暗くならず、1は完全に黒くなります。
- IDRViewerの幅と高さは、.idrLightboxのiframeのwidthプロパティで設定することができます。この例では、常に幅800ピクセル、高さはウィンドウの90％になるように設定されています。