イメージビューアー（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'
}
