qtipの使い方について

質問

qtipのデモを参考に画像の表示まではできたのですが複数の画像を指定する事ってできないでしょうか？
http://craigsworks.com/projects/qtip/demos/content/images

具体的には・・・

<div id="content" class="default">
<ul>
<li><a href="#">1の画像</a></li>
<li><a href="#">2の画像</a></li>
<li><a href="#">3の画像</a></li>
</ul>
</div>

<script type="text/javascript">
$(document).ready(function() {
$('#content a[href]').qtip({
// ここで1の画像、2の画像、3の画像を指定したいのですが方法がわかりません。試しに
以下のようにしてみましたが当然の事ながら3の画像が適応されます。
content: '<img src="1.jpg" alt="1の画像" />'
content: '<img src="2.jpg" alt="2の画像" />'
content: '<img src="3.jpg" alt="3の画像" />'
});
});
</script>

<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.js"></script>

#content内でそれぞれの画像を指定するにはどうすればいいでしょうか？宜しくお願い致します。

回答No.2

fujillin · ベストアンサー

No1です。
こんな感じでいけると思うけど？
（CSSその他は適宜設定してください。）

◆1番目の方法なら
<script type="text/javascript">
$(document).ready(function() {
$('#L1 a[href]').qtip({content: '<img src="1.jpg" />'});
$('#L2 a[href]').qtip({content: '<img src="2.jpg" />'});
$('#L3 a[href]').qtip({content: '<img src="3.jpg" />'});
});
</script>

<div>
<ul>
<li id="L1"><a href="#">1の画像</a></li>
<li id="L2"><a href="#">2の画像</a></li>
<li id="L3"><a href="#">3の画像</a></li>
</ul>
</div>

◆2番目の方法なら
<script type="text/javascript">
$(document).ready(function() {
$('#content a[href]').each(function() {
$(this).qtip({
content: '<img src="' + $(this).attr('tooltip') + '" />'
});
});
});
</script>

<div id="content" class="default">
<ul>
<li><a href="#" tooltip="1.jpg">1の画像</a></li>
<li><a href="#" tooltip="2.jpg">2の画像</a></li>
<li><a href="#" tooltip="3.jpg">3の画像</a></li>
</ul>
</div>

お礼

画像が結構多いので2の方法で試したところ問題なく動作させることができました！
詳しく教えて頂きまして本当にありがとうございました！

回答No.1

fujillin

実験で確認してませんが…

◆数が3個程度なら、idを変えるなどして、それぞれ個別に指定してあげればいいのでは？

◆数が多いときは、srcをタグ内に記しておいて（適当な属性を利用、altでもtooltipでも）、それを参照するようにしてあげれば、わざわざ個別にする必要もなさそう。　以下の例の定義方法が参考になると思うけど…
　http://craigsworks.com/projects/qtip/demos/content/attributes

お礼

お返事ありがとうございます。参考にしながらやってみたのですがどうもうまくいきません。
tooltip="<img src="画像のパス">"としてみましたが思うような動作にはならない状態です。
全くわからない状態でとりあえず試しているような状態なのですがどのようにすればいいものか
おわかりになりますでしょうか？