イメージビューアー（SmartPhoto）

Ver.2.8よりa-blog cmsには弊社で開発した画像拡大ライブラリであるSmartPhotoが組み込みJSとして利用できるようになりました。

デモ

使い方

以下のようにimgタグを内包したaタグにclass="js-smartphoto"と記述します。またdata-caption属性を適用することにより、拡大表示した際に画像の説明文を表示することが可能です。

<a href="/path/to/large-image" data-caption="a-blog cmsでどんどんWebサイトを更新しよう" class="js-smartphoto">
  <img src="/path" alt="" width="300">
</a>

Lazy Load とSmartPhotoを併用する場合

Lazyloadを使用して画像を遅延して読み込んでいる場合、SmartPhotoに src 属性ではなく data-src 属性を適用することが可能です。 その場合、以下のようにHTMLを記述します。

<a href="/path/to/large-image" data-caption="a-blog cmsでどんどんWebサイトを更新しよう" class="js-smartphoto">
  <img data-src="/path" alt="" width="300">
</a>

デフォルト設定

この機能の編集設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

  SmartPhotoConfig: {
  classNames: {
    smartPhoto: 'smartphoto',
    smartPhotoClose: 'smartphoto-close',
    smartPhotoBody: 'smartphoto-body',
    smartPhotoInner: 'smartphoto-inner',
    smartPhotoContent: 'smartphoto-content',
    smartPhotoImg: 'smartphoto-img',
    smartPhotoImgOnMove: 'smartphoto-img-onmove',
    smartPhotoImgElasticMove: 'smartphoto-img-elasticmove',
    smartPhotoImgWrap: 'smartphoto-img-wrap',
    smartPhotoArrows: 'smartphoto-arrows',
    smartPhotoNav: 'smartphoto-nav',
    smartPhotoArrowRight: 'smartphoto-arrow-right',
    smartPhotoArrowLeft: 'smartphoto-arrow-left',
    smartPhotoImgLeft: 'smartphoto-img-left',
    smartPhotoImgRight: 'smartphoto-img-right',
    smartPhotoList: 'smartphoto-list',
    smartPhotoListOnMove: 'smartphoto-list-onmove',
    smartPhotoHeader: 'smartphoto-header',
    smartPhotoCount: 'smartphoto-count',
    smartPhotoCaption: 'smartphoto-caption',
    smartPhotoDismiss: 'smartphoto-dismiss',
    smartPhotoLoader: 'smartphoto-loader',
    smartPhotoLoaderWrap: 'smartphoto-loader-wrap',
    smartPhotoImgClone: 'smartphoto-img-clone'
  },
  message: {
    gotoNextImage: ACMS.i18n('smartphoto.goto_next_image'),
    gotoPrevImage: ACMS.i18n('smartphoto.goto_prev_image'),
    closeDialog: ACMS.i18n('smartphoto.close_the_image_dialog')
  },
  arrows: true,
  nav: true,
  animationSpeed: 300,
  swipeOffset: 100,
  headerHeight: 60,
  footerHeight: 60,
  forceInterval: 10,
  registance: 0.5,
  resizeStyle: 'fit',
  verticalGravity: false,
  useOrientationApi: false,
  useHistoryApi: true,
  lazyAttribute: 'data-src'
}

---