小粋空間  -  a cheap joke and a play on words site

Highslide JSの動作やスタイルを簡単に設定できる「Highslide Editor」の徹底解説

ウェブサイトに掲載するサムネイル画像の拡大には「Highslide JS」が非常に便利ですが、多機能なせいか、動作やスタイルの指定が結構面倒です。 それらを解消するための「Highslide Editor」がいつの間にかリリースされていたので、利用方法を本エントリーでがっつり紹介します。 Highslide Editor １．概要 ここでは「Highslide Editor」の使い方に関するおおざっぱな流れを説明します。詳細な機能については２項で説明します。 「Highslide JS」の左メニューにある「Editor」をクリック。 「Welcome to the Highslide Editor」の画面が開くので、下にある「Get started!」か右上の×印をクリック。 左ペインで各種設定を行います。左ペイン上部のタブで設定項目を切り替えます。左ペイン上部の「Get link」は現在... ［続きを読む］

Highslide JSのキャプションのスタイルを調整する

Highslide JSのキャプションのスタイルを調整するカスタマイズです。ご質問を頂きましたので本エントリーで紹介致します。 カスタマイズ内容はピンポイントですが、「Highslide JS でサムネイル画像を拡大表示する」の「White 10px border and drop shadow（ボーダー・角・影つき）」のキャプションの高さの調整です。修正後はキャプションの上下の空白を狭くします。 修正前 修正後 修正したHighSlide JSのバージョンは4.1.9です。 １．スタイルシートの修正 highslide/highslide.cssの441行目の「.wide-border .highslide-caption」のpaddingを変更します。 変更前 .wide-border .highslide-caption { padding: 0 10px 10px 10px... ［続きを読む］

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 でサムネイル画像を拡大表示する（設定方法の変更）

以前紹介した、「Highslide JS でサムネイル画像を拡大表示する」ですが、あれからバージョンアップが行われ、設定がかなり簡単になっていました（気がつくのが遅すぎかもしれません）。 細かい手順は省略して、変更点と思われる内容についてとりあえず記載しておきます。これから利用される方は、冒頭の元記事とあわせて参考にして頂ければと思います。 １．div要素の設定 以前は、body要素の直後に次のような空の内容のdiv要素の設定が必要でしたが、不要になっています。 <div id="highslide-container"></div> ２．キャプションの対応 以前は、ひとつのページにキャプション付きの画像を設定する場合は、次のようにid属性の対応が必要でしたが、不要になり、a要素の直後に記述した要素にclass="highslide-caption"が設定されていれ... ［続きを読む］

HighSlide JS と prototype.js の競合を解消する

サムネイル画像を拡大させる HighSlide JS（関連記事「Highslide JS でサムネイル画像を拡大表示する」）には、 ブラウザのウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示） という機能があり、この場合、拡大した画像の右下に最大化するアイコンが表示されます。 このアイコンをクリックすると、ブラウザのウィンドウサイズに関わらず画像が最大化されます。最大化された画像は最大化前と同じようにドラッグや縮小することができます。 １．問題点 この最大化をすると別のページにジャンプをして元画像が表示されてしまうケースがあります。 ２．原因 Highslide JS と prototype.js を同時に利用している場合、prototype.js が Array に対して拡張を行っているため、Highslide JS で使用している配列が汚染され、 fo... ［続きを読む］

HighSlide JS の onclick 属性を JavaScript で登録する

サムネイルをポップアップ表示する HighSlide JS で onclick 属性および onkeypress 属性を JavaScript で自動的に登録する方法です。 ここでは Movable Type と WordPress プラグインを例に説明します。 １．概略 HighSlide JS を有効にするには、「Highslide JS でサムネイル画像を拡大表示する」の５項で説明した通り、a 要素に class="highslide" に加え onclick="return hs.expand(this)" を設定する必要があります。また配布サイトでは言及されていませんが onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。 つまり、HighSlide JS に対応させるためには下記の青色部分を記述する必要... ［続きを読む］

Highslide JS でサムネイル画像を拡大表示する

サムネイル画像をクールに拡大表示する Highslide JS を利用する方法を紹介します。内容は Movable Type をサンプルにしていますが、他のブログ等でも応用できると思います。 WordPress ではプラグイン WPJ-Highslide 0.2 が利用できるみたいです。 とりあえず下記のサンプル画像をクリックしてください。拡大表示された画像の上でクリックすると元に戻ります。 拡大ツールでは、当サイトでも紹介している Lightbox JS が有名ですが、この Highslide JS は下記の特徴があります。 拡大画像の下にキャプション（タイトル）の挿入が可能 ウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示） 拡大画像のドラッグが可能 以下、カスタマイズ方法です。ここではダウンロード時のバージョン 2.2.74.0.6 で話を進めます... ［続きを読む］