Highslide JS のギャラリーモード
Highslide JS の新しいバージョンではスライドショー機能がいくつか組み込まれており、その中のサンプルにある「With Gallery - Gallery in the parent page without Highlslide popping up at all」に関して設定方法のご質問を頂いたので、分かる範囲で解説します。
サンプルの具体的な動作については、下のリンク先でお試しください。
Gallery in the parent page without Highlslide popping up at all のサンプル
以下、設定方法を紹介します。なお、本記事の設定を行なう前に、Highslide JS 本体のダウンロードとインストールについて、「Highslide JS でサムネイル画像を拡大表示する」の２項までの作業を事前に行なってください。
また、このカスタマイズが有効な Highslide JS のバージョンは、4.1 以降です。4.0.x にはこのエントリーで紹介する機能はありません。
１．script 要素と link 要素の設定
head 要素の終了タグの前に、Highslide のJavaScript ライブラリと CSS をインクルードするための、下記の内容を追加します。
<script type="text/javascript" src="[highslideディレクトリまでのURL]/highslide/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="[highslideディレクトリまでのURL]/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="[highslideディレクトリまでのURL]/highslide/highslide/highslide-ie6.css" />
<![endif]-->Movable Type の場合であれば、次のように設定すると良いでしょう。
<script type="text/javascript" src="<$mt:BlogURL$>highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="<$mt:BlogURL$>highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="<$mt:BlogURL$>highslide/highslide-ie6.css" />
<![endif]-->２．オプションの設定
スライドショーの設定のために、下記の内容を１項で追加した内容の直後に追加します。
<script type="text/javascript">
//<![CDATA[
hs.graphicsDir = '../highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
overlayOptions: {
position: 'bottom right',
offsetY: 50
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});
// Options for the in-page items
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: false,
wrapperClassName: 'in-page controls-in-heading',
useBox: true,
width: 600,
height: 400,
targetX: 'gallery-area 10px',
targetY: 'gallery-area',
captionEval: 'this.thumb.alt',
numberPosition: 'caption'
}
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
document.getElementById('thumb1').onclick();
});
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
if (/in-page/.test(this.wrapper.className)) return hs.next();
}
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
var i, exp;
hs.page = hs.getPageSize();
for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;
// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
// calculate new popup position
x.pos = x.tpos - x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos - y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);
// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});
//]]>
</script>hs.addSlideshow の主なオプションの意味は次の通りです。
- interval：自動切換え時のインターバルです。単位はmsで、1000より小さいと正常に動作しない可能性があります。
- repeat：自動切換え時に繰り返す場合は true、繰り返さない場合は false を設定します。
- useControls：「再生・進む・戻る」のコントローラーを表示する場合は ture、表示しない場合は false を設定します。
- overlayOptions：useControls が true の場合、コントローラーの表示位置を設定します。position は水平方向・垂直方向の位置を top/bottom および left/right で設定します。offsetY は垂直方向のオフセット、offsetX は水平方向のオフセットを数値で設定します。マイナス値も利用可能です。
- thumbstrip：サムネイル画像の表示位置を設定します。position は上下の表示位置を above/below で設定します。mode は水平・垂直を horizontal/vertical で設定します。
inPageOptions の主なオプションの意味は次の通りです。
- allowSizeReduction：全体の表示サイズを変更する場合は true、変更しない場合は false を設定します。false を設定すると、元画像のサイズは最適化されず、原寸で表示します。
- width：表示領域の幅を指定します（=表示する画像の最大幅）。
- height：表示領域の高さを指定します（=表示する画像の最大の高さ）。
- targetX：表示領域の id 属性を指定します。
- targetY：表示領域の id 属性を指定します。
- captionEval：キャプションとして使用する属性を指定します。
注意点は、
３．スライドショー表示用のXHTML設定
ブログ記事やテンプレートに、下記のXHTMLを設定します。1つめの div 要素の中に、４項に示す画像リンクを記述し、それらが、2つめの div 要素の位置に表示されます。
<div class="hidden-container">
（４項の内容を記述）
</div>
<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"></div>2つめの div 要素の id 属性 gallery-area は、２項で設定した、下記の赤色部分と一致している必要があります。
...前略...
// Options for the in-page items
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: false,
wrapperClassName: 'in-page controls-in-heading',
useBox: true,
width: 600,
height: 400,
targetX: 'gallery-area 10px',
targetY: 'gallery-area',
captionEval: 'this.thumb.alt',
numberPosition: 'caption'
}
...後略...style 属性は特に記述する必要はありません（サンプルの内容を流用しているだけです）。そのまま利用してサイズを変更したい場合、width の値は、上に示した inPageOptions の中にある width より 20px、height の値は 120px 増やした値であれば揃うと思います。
４．画像リンクの設定
1番目の画像リンクは次のように記述します。
<a id="thumb1" class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>id 属性の thumb1 は、２項で設定した次の赤色部分と一致している必要があります。
...前略...
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
document.getElementById('thumb1').onclick();
});
...後略...2番目以降の画像リンク（青色）は、1番目の画像リンクに続けて記述してください。2番目以降には id 属性は不要です。
<a id="thumb1" class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>
<a class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>
...以下同様...画像ファイル名に制約はありません。
５．注意事項
サムネイルをクリックして元の画像ファイルが見つからない場合、ローディング画像が表示され続け、クリック等が効かなくなります。その場合、リロードして、元画像のURLが間違ってないことを確認してください。
- Highslide JSの動作やスタイルを簡単に設定できる「Highslide Editor」の徹底解説
- Highslide JSのキャプションのスタイルを調整する
- CommentCustomField プラグイン + HighSlide JS
