ウェブサイト用HTML5でエクスポートすることで、PhotoStageプロジェクトをウェブサイトに統合できるスライドショーとして出力することができます。

ウェブサイトのソースコード(HTML、CSS、Javascript)とdependencies(依存関係)の画像が選択した保存場所に作成されます。最新版では画像とエフェクト(アニメーション以外)、クロスフェードの切替効果のみに対応しています。

エクスポートのオプション

エクスポートのダイアログには以下のようなオプションがあります:

ウェブサイトとの統合

新しく作成するウェブページにスライドーショーを挿入する手順はとても簡単です。ウェブサイト用HTML5にエクスポートするとサンプルHTMLファイル(index.html)が作成されるので、これを元にしてウェブページを作成できます。 サンプルHTMLにはslideshow.htmlをソースとした<iframe>タグが含まれています。<iframe>を親コンテナ(<div>)のサイズに続けて記入するとより分かりやすいレイアウトになります。 ウェブサイト上のスライドショーが正しく表示されるために、全てのコンテンツをホスティングサイト(例:ウェブサーバー)の「保存先」ディレクトリにコピーします。

既存のウェブページにスライドショーを挿入するには以下のコードをHTMLファイルにコピー貼り付けします。スライドショーのサイズを定義する親コンテナ内の<iframe>タグと似たようなタグを使います。 これには「保存先」ディレクトリのコンテンツをindex.html以外のホストにコピーする必要があります。<iframe>を使ってウェブサイトにスライドショーを挿入します。必要に応じて<div>の高さと幅を調節することができます。

<div style="width:640px; height:690px; margin:auto">
<!-- iframeの幅と高さは親ファイルを元にした割合で指定します。 -->
<!-- 余白を"auto"(自動)に設定するとiframeがdiv内の上下中央にセンタリングされます -->
<!-- 枠線のスタイルを"none"(無し)に設定するとiframeのデフォルトの枠線が消去されます -->
<iframe src="slideshow.html" style="width:100%; height:100%; margin:auto; border-style:none">
</iframe>
</div>

スライドショーは上位レベルのコンテナ(例:他の<div>または<body>)に合わせてセンタリグされるようデフォルト設定されています。 変更するには以下の作業を<iframe>が含まれている<div>で行います:

左寄せにするにはmargin:autofloat:leftに変更し、右寄せするにはfloat:rightに変更します。