Highslide JS のギャラリーモード

Highslide JS のギャラリーモード

Posted at July 7,2009 12:03 AM
Tag:[HighSlide, JavaScript]

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 でサムネイル画像を拡大表示する」の2項までの作業を事前に行なってください。

また、このカスタマイズが有効な Highslide JS のバージョンは、4.1 以降です。4.0.x にはこのエントリーで紹介する機能はありません。

1.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]-->

2.オプションの設定

スライドショーの設定のために、下記の内容を1項で追加した内容の直後に追加します。

<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:キャプションとして使用する属性を指定します。

注意点は、

3.スライドショー表示用のXHTML設定

ブログ記事やテンプレートに、下記のXHTMLを設定します。1つめの div 要素の中に、4項に示す画像リンクを記述し、それらが、2つめの div 要素の位置に表示されます。

<div class="hidden-container">
(4項の内容を記述)
</div>
<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver"></div>

2つめの div 要素の id 属性 gallery-area は、2項で設定した、下記の赤色部分と一致している必要があります。

...前略...
// 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 増やした値であれば揃うと思います。

4.画像リンクの設定

1番目の画像リンクは次のように記述します。

<a id="thumb1" class='highslide' href='画像のURL' onclick="return hs.expand(this, inPageOptions)"><img src='画像のURL' alt='Two cabins'/></a>

id 属性の thumb1 は、2項で設定した次の赤色部分と一致している必要があります。

...前略...
// 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>
...以下同様...

画像ファイル名に制約はありません。

5.注意事項

サムネイルをクリックして元の画像ファイルが見つからない場合、ローディング画像が表示され続け、クリック等が効かなくなります。その場合、リロードして、元画像のURLが間違ってないことを確認してください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)