javascriptの併用について

質問

web初心者です。

[fancybox]
http://fancybox.net/

[Swish]
http://thefinishedbox.com/freebies/plugins/jquery-zoom-plugin/

このふたつのjavascriptをひとつの画像に対して適用することは可能でしょうか？
画像ホバーした時にSwishが、クリックした時にfancyboxが、という具合に動作させたいです。

今このような状態で画像にSwishを適用させています。

<a href="#" class="zoom" id="1"><img src="image/sample.jpg" alt="thumbnail" /></a>

ここにfancyboxを

<a id="example1"></a>

という形で入れたいのですが、どのようにしたら両方とも動作するでしょうか？？
初心者なので言葉が足りなくて恐縮ですが、よろしくお願いします。

回答No.1

metametamu · ベストアンサー

先に断っておきますが両方適用してチェックしたわけではないので適用方法だけの回答です。

まずhtml側のaタグに付けるid名を統一しましょう。
現状のid="1"というのはid名としてオススメしません。アルファベットで付け直してておく方がよいですよ。
ここでは仮にExample1とします。
<a href="#" class="zoom" id="Example1"><img src="image/sample.jpg" alt="thumbnail" /></a>

Swishに関しては現状は設定で

$('#1').hoverZoom();

みたいにして書いていると思いますので、とりあえずこれを

$('#Example1').hoverZoom();

にします。
これで1ではなくExample1に適用してくれます。(ちなみ頭に付いている#はidという意味になっています)

ここからfancyboxを設定していきますが、Swishと同じでfancyboxもjQueryというものを使っていますので、設定で適用する対象の呼び出しは基本的に同じような形で指定してあります。

$('#example1')　←この形です

http://fancybox.net/ の場合　<script type="text/javascript" src="/js/web.js?m=20100203"></script>　で設定ファイルを読み込んでいます。

http://fancybox.net/js/web.js?m=20100203
このリンク先に適用させたいidへの指定サンプルがあるので適用させたいエフェクトのテンプレを同じようにExample1に書き換えてください。
書き換えたら必要そうな部分だけをコピーしてSwishの設定をしてあるhtml側のscript要素内の最後にでもペーストしておきます。

あとはfancyboxのライブラリをlink要素で読み込めば動くはずです。jqueryのライブラリは２つ書く必要は無く、1つ記述があれば大丈夫です。

お礼

できました！たいへん分かりやすく丁寧な説明をしていただいたおかげで、思ったよおりの効果を得ることができました。

id名も数字は避けたほうがいいのですね。勉強になりました。

ありがとうございました！