🖼 フォトギャラリー — embed.js サンプル

1枚ずつ表示・前へ／次へで切り替え

LIVE 動作サンプル（テストデータ 20件 を1枚ずつ表示）

埋め込み方

① コンテナ要素を配置

スライドショーを表示したい場所に <div> を置きます。幅は親要素に合わせて自動調整されます。

<div id="cms-gallery"></div>

② embed.js を読み込む

コンテナの直後（または </body> 前）に以下の <script> タグを貼り付けます。

<script
  src="https://d1sax4j5hw821p.cloudfront.net/api/v1/sites/394d74824fe2cafd41de/embed.js"
  data-content-type="f682d39af9c98fbb6acb"
  data-template="slideshow"
  data-target="cms-gallery"
  data-limit="1"
></script>

script タグ属性一覧

属性必須説明デフォルト
src必須embed.js の URL（上記のまま）—
data-content-type必須コンテンツタイプ ID—
data-template必須テンプレートの shortname（例: slideshow）—
data-target任意挿入先要素の idcms-content
data-limit任意1ページあたり表示枚数（1 = 1枚ずつ切り替え表示）5
data-sort任意desc / asc（撮影日順の場合は asc）desc
data-sort-by任意ソートキー。撮影日順に並べる場合は createdAtcreatedAt

フォトギャラリー コンテンツタイプのフィールド

管理画面でフォトギャラリーの記事を登録する際は、以下のフィールドを使用します。

フィールド種別説明
タイトル固定写真のタイトル（例: 「春の桜」）
画像 (file0)ファイルメイン画像。S3 にアップロードされた URL が保存されます。
キャプション (text0)テキスト写真の説明文。スライドショーに表示されます。
撮影日 (date0)日付撮影日。YYYY年MM月DD日 形式でスライドショーに表示されます。

利用可能なテンプレート shortname

shortname説明
slideshow1枚ずつ表示。前へ／次へボタンでページ切り替えします。
detail単一写真の詳細フラグメント。モーダル内表示などに利用できます。