イメージビューアー（Highslide JS）
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が適用されます。