同じような名前のプラグインがあるみたいだけど…
今回使ってみたのは、こちらです。
http://www.portalzine.de/index?/Horizontal_Accordion–print
なかなか難関でしたな。
使い方は、とりあえず、上記のダウンロードページからファイルをダウンロードしたら、「lib」フォルダの中に入っている、「jquery.easing.1.3.js」と「jquery.hrzAccordion.js」ファイルを読み込みます。（jQuery本体も、もちろん読み込みます。）
後、「ｃｓｓ」フォルダから「jquery.hrzAccordion.defaults.css」を読み込んで、とりあえず準備完了。
後は、
$(document).ready(function() {
$(“.test”).hrzAccordion(
{eventTrigger:”mouseover”,
openOnLoad:”",
cycle: true
});
こんな感じで、プラグインを有効にすればよいです。（青文字はオプション）
ただ、何点か注意点があります。
まず、htmlですが、
<ul class=”test”>
<li>
<h6><img src=”images/ke_01.gif” width=”90″ height=”120″ />テキスト1</h6>
<p>テキスト1</p>
</li>
<li>
<h6><img src=”images/ke_02.gif” width=”90″ height=”120″ />テキスト2</h6>
<p>テキスト2</p>
</li>
<li>
<h6><img src=”images/ke_03.gif” width=”90″ height=”120″ />テキスト3</h6>
<p>テキスト3</p>
</li>
<li>
<div class=”handle”></div><h6><img src=”images/ke_04.gif” width=”90″ height=”120″ />テキスト4 </h6>
<p>テキスト4</p>
</li>
</ul>
上記のように、<ul>タグにクラスを付けます。
で、一つ目の注意点が、オレンジ文字で書いた空divなんですが…
サンプルをそのまま改造して作ってしまうと、アコーディオンに使用する為の文字だけのpngファイル（ダウンロードファイルのimagesフォルダにある）のheightを計算するように、jsが組まれているらしく、クラスhandleを指定しておかないとエラーで動きませんでした…
多分、オプション（このプラグインは、指定できるオプションが多めです。）か、jsのコードを直せば何とかなる気がするけど、そこまでは試してません…
二つ目の注意点は、cssです。アコーディオンに使用している画像は、cssのbackgroundで指定しています。「jquery.hrzAccordion.defaults.css」の48行目、51行目、54行目の画像のパスを直しましょう。
とりあえず、注意点はこんなところかな？多分、上記に気をつければきっと動くはず。わからなかった部分は、又今度勉強しましょう。
後、アコーディオンに使用されている画像は、透過pngになっているので、そのままではie6等のブラウザでは見れません。その辺の攻略法は、この記事とは、別記事を用意します。
Comments