ページ内にIDRViewerをライトボックスとして埋め込む

エクスポートしたPDFのライトボックスポップアップを作成するのは非常に簡単です。サイトに組み込むことができるリソースを用意しましたので、さらに簡単になります。このチュートリアルでは、変換されたPDFを含むライトボックスを作成する単一の関数を呼び出すことができるCSSとJavaScriptを提供します。暗くなった背景をクリックすることでライトボックスを閉じることができます。

まず、ライトボックスが正しく表示されるように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を追加する必要があります。

以下をサイトに追加してください。<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が埋め込まれます。このコードは、暗くなった背景をクリックするとライトボックスが閉じるように設定されています。

この例では、クリックするとライトボックスを開く画像を設定する方法を示します。

次のように画像をサイトに追加します：

<img src="path/to/image" onclick="createLightbox('path/to/converted/pdf')"/>

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

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

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