2011年4月15日

クリックで画像を大きくしたい(Highslideのすすめ)

 Highslideは、ページにある小さい画像をクリックしたとき、大きい画像を「ぺろ~ん」と飛びだして表示してくれるJavaScriptのライブラリです。

 インストール&使用法はかんたんな方だと思います。
 なお「Highslide」で検索すれば、使い方を書いたページがたくさん見つかるので、わからなかったらそちらをみましょう。。

 1. ダウンロードしてきて、解凍、フォルダごとサイトにコピーします。
 ダウンロードページ→ http://highslide.com/download.php

 2. "highslide.config.js "などといった好きな名前で、設定ファイルを用意して、サイトにコピーしたHighslideのフォルダに入れます。メッセージの日本語化とか、大きい画像の表示の装飾などをここで指定しています。

hs.graphicsDir = '/highslide/graphics/';
hs.outlineType = 'rounded-white';
 
hs.lang = {
       cssDirection:     'ltr',
       loadingText :     'Loading...',
       loadingTitle :    'クリックでキャンセル',
       focusTitle :      'クリックで手前に表示',
       fullExpandTitle : '元のサイズで表示 (f キー)',
       fullExpandText :  '元のサイズ',
       creditsText :     'Powered by Highslide JS',
       creditsTitle :    'Go to the Highslide JS homepage',
       previousText :    '戻る',
       previousTitle :   '戻る (← キー)',
       nextText :        '進む',
       nextTitle :       '進む (→ キー)',
       moveTitle :       '移動',
       moveText :        '移動',
       closeText :       '閉じる',
       closeTitle :      '閉じる (esc キー)',
       resizeTitle :     'リサイズ',
       playText :        '再生',
       playTitle :       'スライドショー開始 (スペースキー)',
       pauseText :       '停止',
       pauseTitle :      'スライドショー停止 (スペースキー)',   
       number :          'Image %1 of %2',
       restoreTitle :    'クリックで閉じます。ドラッグで動かせます。矢印キーで前後の画像へ移動します。'
    };

 3. ヘッダ部に4つのファイルの読み込みの指定を書き加えます。
 これで準備はOK。





 4. 使い方はこんな感じ。
 1行目に大きい画像。
 2行目に小さい画像(サムネイル)。
 4行目に画像の説明文。


  
  
画像の説明

 画像の説明文の入れ方には別パターンもあります。
 Highslideの公式サイトで調べてみてください。Editorのページでいろいろ試せます。

ギャラリー

 サンプルをこちらに作成→ここをクリック
 コミPo!でつくった4コマの画像をみることができます。
 公式にあるのと同じなのでほとんど参考にはなりませんが。
 スタイルシートとJavascriptもベタに書き込んでありますが、実際には別ファイルにして読み込んだ方がよいです。(2011/5/8)

トラブルシューティング

 * 画像をクリックしたときに"Loading...."と表示されたままで大きな画像が表示されないときは、たいがいURLの指定がまちがっています。チェックしなおしましょう(設定ファイルの hs.graphicsDir も忘れずに)。

 * 公式サイトのEditorからソースをコピペすると、Javascriptのところの hs.outlineType が 'custom' になっていますが、こののままだと画像をクリックしたとき "Loading..."と表示され停まってしまいます。ここはポップアップ画面の枠の画像の指定です。/highslide/graphics/outline/に入っている画像のどれかの名前を指定します(拡張子の.pngは省く)。たとえば、白枠だとrounded-whiteです。

コメントする