ホーム > サポート・マニュアル > チュートリアル > 組み込みのJavascript > サムネイル画像を拡大表示させるイメージビューワー（Highslide JS）を利用する

サムネイル画像を拡大表示させるイメージビューワー（Highslide JS）を利用する

ドキュメント最終更新日時：2010/05/20 17:24

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

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

サムネイル画像を拡大表示させるイメージビューワー（Highslide JS）を利用する

1. 設定の編集

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

    // イメージビューワー ( 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が適用されます。

このドキュメントと関連している内容のエントリー

関連度 2 : 画像にロールオーバー効果を付ける
関連度 1 : https関連のリンクを書き換える機能
関連度 1 : post includeの結果をキャッシュさせない方法
関連度 1 : 活用編第2回 : JSバリデーターを利用してみよう
関連度 1 : カスタムフィールドでGoogle Mapsの入力インターフェースを実装する

ドキュメントの内容に関するお知らせフォーム

内容に誤り・現行バージョンと異なる部分がありましたら、下記のフォームよりお知らせください。

サポート情報検索

組み込みのJavascript

リストの続きを表示

組み込みのJavascriptの一覧に戻る