クリックで画像を大きくしたい(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です。



コメントする