fbpx
Print

IDRViewerをライトボックスとして埋め込む

BuildVuで書き出したHTML/SVGを使ってライトボックスのポップアップを作成するのはとても簡単です。ここでは、簡単にあなたのサイトに組み込むことができるリソースを用意しました。このチュートリアルでは、いくつかのCSSとJavaScriptを提供しています。これらの関数を呼び出すと、変換されたPDFのライトボックスが作成され、暗くなった背景をクリックすることで消すことができます。

Lightboxのサンプル

 

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 src="path/to/image" onclick="createLightbox('path/to/converted/pdf')"/>

と記載します、それだけでOKです。これで、画像をクリックすると、変換されたPDFがライトボックスにポップアップ表示されます。

カスタマイズ

ライトボックスのスタイルは、CSSを使って簡単にカスタマイズすることができます。

ライトボックスの背景をどの程度暗くするかは、.idrLightbox background-colorプロパティの4番目の数値で設定できます。
IDRViewerの幅と高さは、.idrLightbox iframeのwidthプロパティで設定できます。この例では、常に幅が800ピクセル、高さがウィンドウの90%になるように設定されています。

BuildVu_SML

こちらはBuildVuご利用者専用のサポートです。一般のご質問は製品ページからお願いいたします。

MENU
PAGE TOP