ビューアー

目次

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

イメージビューアー(pretty Photo)【非推奨】

現在では、a-blog cms ではSmartPhotoをデフォルトのイメージビューアーとして採用していることから非推奨になりました

a-blog cmsでは、サムネイル画像を拡大表示させるイメージビューワー(prettyPhoto)の設定が標準で実装されています。

デモ

1. 設定の編集

管理ページ > カスタマイズ管理:コンフィグ > モジュール:Entry_Bodyイメージビューワーの部分を「 rel="prettyPhoto[{unit_eid}]"」にします。

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

    //----------------------------------
    // イメージビューア ( prettyPhoto )
    ppMark  : 'a[rel^="prettyPhoto"]',
    ppConfig    :
    {
        animation_speed: 'fast',
        slideshow: false,
        autoplay_slideshow: false,
        opacity: 0.80,
        show_title: false,
        allow_resize: true,
        default_width: 500,
        default_height: 344,
        counter_separator_label: '/',
        theme: 'light_square',
        hideflash: false,
        wmode: 'opaque',
        autoplay: true,
        modal: false,
        overlay_gallery: true,
        keyboard_shortcuts: true,
        changepicturecallback: function(){},
        callback: function(){},
        markup: (省略),
        gallery_markup: (省略),
        image_markup: (省略),
        flash_markup: (省略),
        quicktime_markup: (省略),
        iframe_markup: (省略),
        inline_markup: (省略),
        custom_markup: ''
    },
    ppCaption2Title : true,


ppMark prettyPhotoを使用する場合のrel属性値
ppConfig prettyPhotoの設定値参考:prettyPhoto documentation
ppCaption2Title ユニット画像のキャプションをタイトルとして使用するかの設定

2. 補足

a-blog cmsのバージョンアップ(Ver. 1.6.2.1以前)をしたサイトで、下記のエラーが表示されることがあります。

index.js : loadClosure is not function

対応としては、Ver. 1.7.0以上へのバージョンアップか、もしくはhighslideをprettyPhotoに変更をしてください。

イメージビューアー(Highslide JS)【非推奨】

現在では、a-blog cms ではSmartPhotoをデフォルトのイメージビューアーとして設定されていることから非推奨になりました

a-blog cmsでは、サムネイル画像を拡大表示させるイメージビューワー(Highslide JS)の設定が標準で実装されています。(Ver. 1.2.1より)

a-blog cms Ver. 1.2.1に同梱されているHighslideのバージョンは4.1.8です。(インストールパッケージ内「お読みください.pdf」参照)

デモ

1. 設定の編集

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

    // イメージビューワー ( Highslide )
    hsMark              : 'a[rel=highslide]',
    hsConfig            : // http://highslide.com/ref/hs.overrides
    {
        align       : 'center',
        outlineType : 'rounded-white'
        //dimmingOpacity  : 0.25,
        //dimmingDuration : 25
    },
    hsLang  :
    {
        loadingText     : '読み込み中...',
        loadingTitle    : 'クリックでキャンセルします',
        fullExpandTitle : '実寸で表示します',
        restoreTitle    : 'クリックで元の大きさに戻ります'
    },


hsMark highslideを適用させるHTMLの要素・属性を指定します。
hsConfig highslideの表示設定です。記述できる値は以下のとおりです。allowSizeReduction anchor align targetX targetY outlineType outlineWhileAnimating captionId captionText captionEval captionOverlay headingId headingText headingEval headingOverlay dragByHeading autoplay numberPosition transitions dimmingOpacity contentId width height allowWidthReduction allowHeightReduction preserveContent maincontentId maincontentText maincontentEval objectType cacheAjax objectWidth objectHeight objectLoadTime swfOptions wrapperClassName minWidth minHeight maxWidth maxHeight slideshowGroup easing easingClose fadeInOut src参考:http://highslide.com/ref/hs.overrides
hsLang highslideの画面に表示させるメッセージの設定です。

2. HTMLの編集

config.jsで指定した要素・属性をHTMLに記述します。

例)hsMarkで「a[rel=highslide]」と指定した場合

<a href="sample.html" rel="highslide"><img src="xxx.gif" alt="xxx" width="10" height="10" /></a>

このように記述すると、アンカーリンクをクリックしたときにHighslideが適用されます。

PDFのプレビュー

Ver.2.11よりPDFのプレビューを行うための新しい組み込みJSが追加されました。

使い方

基本的な使い方

以下のように全体をjs-pdf-viewerというclass属性で囲み、その中にimgタグを記述して、data-pdfにPDFへのパスを記述します。

<div class="js-pdf-viewer">
  <img class="js-preview" data-pdf="/path/to/pdf" >
</div>

ページ番号を指定してPDFをプレビューする

さらにimgタグに data-page 属性を適用することでページ番号を指定してPDFをプレビューすることができます。

また、ページ送りするためのボタンを追加することも可能です。

<div class="js-pdf-viewer">
  <img class="js-preview" data-pdf="/path/to/pdf" data-page="2" >
  <button class="js-prev">前へ</button>
  <button class="js-next">次へ</button>
</div>

機能の編集

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

  pdfPreviewConfig: {
    mark: '.js-pdf-viewer', // PDFプレビューの親要素につけるクラス名
    previewMark: '.js-preview', // 実際にプレビュー画像を表示する img 要素のクラス名
    prevBtnMark: '.js-prev', // 次ページのボタンにつけるクラス名
    nextBtnMark: '.js-next', // 前ページのボタンにつけるクラス名
    pdfAttr: 'data-pdf', // 対象のPDFのパスのdata属性名
    widthAttr: 'data-width', // 幅指定のdata属性名
    pageAttr: 'data-page', // 表示するページ数のdata属性名
    lazyAttr: 'data-lazy', // lazy load するかどうか(1 or 0)のdata属性名
    showBtnClass: 'acms-admin-block' // PDFのページ送りボタンがある場合につくクラス名
},

デモ

モーダルでビデオ再生をする

YouTube や Vimeo の組み込みビデオを、ボタンなどを押した時にモーダルで再生するための組み込みJSです。

デモ

使い方

js/config.js に設定されている「modalVideoMark」に設定されているクラス(デフォルト: js-modal-video)をクリックして再生したい要素に振ります。 次に「data-video-id」データ属性にビデオのidを指定します。

<button class="js-modal-video" data-video-id="MwlwcmF0hwo">ビデオを再生</button>

デフォルト設定

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

modalVideoMark: '.js-modal-video', // ここで指定したセレクターをクリックするとビデオが再生されます
modalVideoConfig: {
  channel: 'youtube', // どのサービスを使うか指定します
  youtube: { // youtubeの設定です。オプションはyoutubeのapiドキュメントを参照してください。
    autoplay: 1,
    cc_load_policy: 1,
    color: null,
    controls: 1,
    disablekb: 0,
    enablejsapi: 0,
    end: null,
    fs: 1,
    h1: null,
    iv_load_policy: 1,
    list: null,
    listType: null,
    loop: 0,
    modestbranding: null,
    origin: null,
    playlist: null,
    playsinline: null,
    rel: 0,
    showinfo: 1,
    start: 0,
    wmode: 'transparent',
    theme: 'dark'
  },
  ratio: '16:9', // ビデオの比率を指定
  vimeo: { // vimeoの設定です。オプションはvimeoのapiドキュメントを参照してください。
    api: false,
    autopause: true,
    autoplay: true,
    byline: true,
    callback: null,
    color: null,
    height: null,
    loop: false,
    maxheight: null,
    maxwidth: null,
    player_id: null,
    portrait: true,
    title: true,
    width: null,
    xhtml: false
  },
  allowFullScreen: true, // フルスクリーンの許可設定
  animationSpeed: 300, // モーダルのトグルアニメーションスピード(ms)
    classNames: { // モーダルコンポーネントのクラス名
      modalVideo: 'modal-video',
      modalVideoClose: 'modal-video-close',
      modalVideoBody: 'modal-video-body',
      modalVideoInner: 'modal-video-inner',
      modalVideoIframeWrap: 'modal-video-movie-wrap',
      modalVideoCloseBtn: 'modal-video-close-btn'
  },
  aria: { // スクリーンリーダーメッセージ
    openMessage: 'ビデオを開きました。',
    dismissBtnMessage: 'ここをクリックするとビデオを閉じます。'
  }
}

OpenStreetMap

OpenStreetMapがVer.2.9から利用可能になりました。js-open-street-mapというclass属性を適用すれば、簡単に好きなページで利用できます。

さらに、data属性を指定することで経度、緯度、zoom値を指定できます。



属性 入力する値
data-lat属性 緯度
data-lng属性 経度
data-zoom属性 zoom値
<div class="js-open-street-map" data-lat="35.18531791793727" data-lng="136.89938921481374" data-zoom="14" style="width: 100%; height: 300px;"></div>

また、data-multipleという属性にtrueを設定し、data-markers属性に対してピンを立てたい位置情報を|区切りで記述します。そうすることで下のように複数ピンを表示することが可能になります。

<div class="js-open-street-map"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  style="width: 100%; height: 400px;"
></div>

さらに、data-messagesという属性を使えばpin一つ一つにコメントをつけることも可能です。メッセージを区切りたい場合は、[[:split:]]このような記号を使って分割します。

<div class="js-open-street-map"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  data-messages='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  style="width: 100%; height: 400px;"
></div>

アダプティブ・イメージ【非推奨】

picture要素やsrcset属性がブラウザで実装されたことからこの機能は非推奨になりました。picture要素やsrcset属性をa-blog cmsで使う方法に関しては「レスポンシブイメージでユーザーの閲覧環境に最適な画像を表示しよう」をご覧ください。

a-blog cmsバージョン1.5.0からスマートフォンで閲覧したときはエントリーの画像を小さいサイズで表示する機能が追加されました。.js-adaptive_imageについて解説します。.js-adaptive_imageはPCサイトでは通常サイズの画像を表示し、ウィンドウ幅の狭いスマートフォンで閲覧したときは小さいサイズの画像を表示します。ページの容量を少なくできます。

小さいサイズ・通常サイズ・大きなサイズの画像生成について

エントリー作成画面から画像を投稿すると、小さいサイズ(tiny)・通常サイズ・大きなサイズ(large)の画像が生成されます。

生成する画像サイズについて

画像サイズは管理画面 > コンフィグ > 編集設定から設定します。 通常サイズは「サイズセレクト」から、小さいサイズ(tiny)と大きなサイズ(large)はイメージ編集の項目から設定します。



1. 設定の編集

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

//-----------------------
// adaptive image sizing
adaptiveImageMark : 'img.js-adaptive_image',
adaptiveImageSize : 500,

2. HTMLの編集

themes/system/include/unit.htmlのファイルをベースに、自分のカスタマイズしているフォルダ内に themes/ご利用のテーマ/include/unit.html をコピーし、のあたりを以下のように変更します。 に.js-adaptive_imageを追加してtiny画像を読み込んでください。

<!-- BEGIN column#image -->
<!-- 画像 -->
<div class="column-image-{align}" ><!-- BEGIN link#front -->
<a href="{url}"{viewer}[raw]><!-- END link#front -->
<img class="columnImage js-adaptive_image" src="%{ROOT_DIR}{tinyPath}" alt="{alt}" width="{tinyX}" height="{tinyY}" data-width="{x}" data-height="{y}" /><!-- BEGIN link#rear -->
</a><!-- END link#rear --><!-- BEGIN caption:veil -->
<p class="caption">{caption}</p><!-- END caption:veil -->
</div>
<!-- END column#image -->

スライドショー(bxSlider)【非推奨】

現在では便利なスライダーのプラグインが世の中にたくさんリリースされており、a-blog cms の公式テーマでも現在はbxSliderを採用していないことから非推奨になっています。

a-blog cmsでは、画像のスライドショー(bxslider.js)が標準で実装されています。(Ver. 1.6.0より)

1. 設定の編集

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

//----------
// bxslider
    bxsliderMark : '.js-bxslider',
    bxsliderConf : {
    mode : 'horizontal', // horizontal | vertical | fade
    speed : 800,
    captions : true,
    auto : true,
    pause : 6000
},


bxsliderMark bxsliderを適用させるHTMLの要素・属性
bxsliderConf bxsliderの表示設定(bxslider.js

2. HTMLの編集

config.jsで指定した要素・属性をHTMLに記述します。以下のソースコードではバナーモジュールで画像リストを用意してbxsliderでスライドショーを作っています。

<!-- BEGIN_MODULE Banner id="topImage" -->
<ul class="js-bxslider"><!-- BEGIN banner:loop -->
  <li><!-- BEGIN banner#src -->
    {src}[raw]<!-- END banner#src --><!-- BEGIN banner#img -->
    <a href="{url}" target="{target}"><img src="%{ARCHIVES_DIR}{img}" width="{x}" height="{y}" alt="{alt}" /></a><!-- END banner#img -->
  </li><!-- END banner:loop -->
</ul>
<!-- END_MODULE Banner -->