メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」
FLASHのナビゲーションでみる、メニューにマウスオーバーするとメイン画像が切り替わるやつ。探しても思ったようなものがなかったので、jQueryで作成してプラグイン化しました。
こんな動作をします
- ナビゲーションにマウスオーバーすると対応するイメージ画像に切り替わります。
- エリアの外にマウスがあるときは、自動で次のナビゲーションに進みます。
- ロールオーバー前後でナビゲーションの画像が切り替わります。
設置方法
プラグインを下のボタンよりダウンロードします（ダウンロードファイルにはサンプルファイルが含まれています）
このプラグインはjQueryが必要です。
head内
「#image-navigation」の部分はプラグインを適応させたい場所を任意で指定できます。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imageNavigation.js"></script>
<script type="text/javascript>
$(function() {
$(#image-navigation).imageNavigation();
});
</script>
body内
メニューに表示する画像と対応するイメージ画像を記述します。
<div id="image-navigation">
<div class="navi">
<ul>
<li><a href="#"><img src="images/menu.jpg" /></a></li>
<li><a href="#"><img src="images/menu.jpg" /></a></li>
<li><a href="#"><img src="images/menu.jpg" /></a></li>
<li><a href="#"><img src="images/menu.jpg" /></a></li>
</ul>
</div>
<div class="navi-image">
<a href="#"><img src="images/photo1.jpg" /></a>
<a href="#"><img src="images/photo2.jpg" /></a>
<a href="#"><img src="images/photo3.jpg" /></a>
<a href="#"><img src="images/photo4.jpg" /></a>
</div>
<div style="clear:both;"></div>
</div>
これで動作します。
オプション
オプションで色々な設定ができます。
（数字の単位はミリ秒です）
$(function(){
$("#image-navigation").imageNavigation({
time:2000,
animationTime:500,
rolloverTime: 0,
rolloutTime: 500
});
});
time
スライドショーで次の画像に移動する時間です。
animationTime
スライドショーで次の画像に切り替わるフェードの時間です。
rolloverTime
ナビゲーションのロールオーバーが完了する間の時間です。
rolloverTime
ナビゲーションのロールアウトが完了する間の時間です。
autoPlay
falseにすると自動切り替えしません。
rolloverImage
falseにすると画像ナビゲーションを使用しません。テキストでナビゲーションを表示したい場合に。
画像ナビゲーションのロールオーバーの際のファイル名について。
ロールオーバーの画像はファイル名に「_on」をつけた画像が使われまず。用意してください。
例えば「menu01.jpg」という画像のロールオーバー画像は「menu01_on.jpg」になります。
最後に
プラグインに不備があるかもしれませんが、分からない点や不具合などありましたらコメントください。
40 Comments
→
おお。素晴らしいですね。
確かに、このライブラリありませんでしたね。
機会があれば利用させて頂きます♪
ひでまんさん、ありがとうございます。
そうなんです、同じようなライブラリがあるだろうとネット探していたんですが、結局なくて自作しました。
日本だとありがちなインターフェイスなんですけどね。
こんにちわ、このようなインタフェースを探していました。
質問なのですが、スライド画像を、文字や画像を組み合わせたコンテンツを表示させたいのですが、可能でしょうか？
リストメニューやタブメニューを探していたのですが、
探している効果では無く、ImageNavigationが近いと思いました。
よろしくお願いします。
Mixさん、
スライド部分を画像と文字の組み合わせにすることは可能ですよ。
ソースでスライド部分の画像をそのように置き換えてみてください。
<a href=”#” ><div class=”panel”>スライド１</div></a>
こんな感じでしょか。上のようにした場合、panelクラスに横幅と高さを指定するのをお忘れなく。
とってもいいですね！このプラグイン。
早速使わせていただきます。
切り替えるイメージを内包するブロックのクラス名が
JS側に書いてありますが(１０ヶ所くらい)、
これもHTML側で指定できるとありがたいかもです。
ご検討よろしくお願いいたします。
こんばんわ、とってもイイですね！
是非使わせていただきたいと思うのですが、
ワードプレスでも利用は可能でしょうか？
>norikさん
ありがとございます。今後の更新に検討します。
>guildsmanさん
試していませんがワードプレスでもテンプレートに記述すれば動作するはずです。使ってみてください。ニーズがあればワードプレスのプラグイン化も考えます。
こんにちは。
ダウンロードさせていただきました。素晴らしいプラグインですね！
ただ、著作権等について記述がありませんでしたので、質問させてください。
個人利用のほかに商用利用する場合において、
(1)商用利用は可能か、(2)その場合何か記述が必要か、(3)改変は可能か
なお、前提として、販売（転売）目的ではなく、画像も流用しません。
以上です。よろしくお願いします。
>lilithさん
著作権について記述しないといけないと思っていて遅れていました。
商用利用は可能です。
ソースコードの著作者情報の記述を削除しなければ、画面上の記述は必要ありません。
改変は可能です。改変したものの再配布は認めません。
このような感じです。
よろしくお願いします。
助かりましたありがとうございますー
必死で探してたんですがこういうの無くて。
自作できるほど知識も無いので、あきらめかけてました。
ものすごく助かりました☆
こんにちは。
素晴らしいプラグインなので、早速ダウンロードさせて頂きました！
一点質問なのですが、画像の切り替えで1から4に行ったところでまた1に
戻るようですが、4でストップさせるといったことは可能でしょうか？
よろしくお願いします。
素晴らしいですね！質問ですが、最初の自動で動くナビゲーションをなくすにはどうすればいいのですか？
>rjktさん
４でストップさせるにはソースの書き換えが必要です。
var $active = $(‘.navi-image a.active’, option.elem);
の次の行に
if(!$active.next().length) return;
の1行を加えると理想の動作をするのでないでしょうか。
>cccさん
ありがとうございます。
オートプレイをしないようにするには
オプションで autoPlay に false を指定してください。
ご回答ありがとうございます！できました！
初心者みたいな質問で申し訳ないです。
すみません、もう1つ質問です。
右のメイン画像なんですがメニューにマウスオーバーにしないときは常にＡという画像が表示されるようにできますか？
最初はＡという画像が表示されていて、メニューにカーソルを乗せると切り替わり
メニューからカーソルを外すとＡが表示されるような。
もし可能なら教えて頂けないでしょうか？
何度も申し訳ございません。
度々すみません。このままで大丈夫だったのでご回答頂かなくてけっこうです。
ありがとうございました。
ご回答頂きありがとうございます！
var $active = $(‘.navi-image a.active’, option.elem);
は何行目の部分でしょうか？53行目で間違いありませんか？
また、度々の質問で申し訳ありませんが、1→2→3→4→1でストップさせることは可能なのでしょうか？
>rjktさん
var $active = $(‘.navi-image a.active’, option.elem);
は２行ありましたね。
最初の９行目にあるほうです。
10行目に
if(!$active.next().length) return;
を追加してみてください。
1→2→3→4→1はソースの書き換えが必要で難しいですね。
Firefoxのみ、同サイト内の他のページから戻ってくると、over時の画像が下にずれてしまいます。
リロードすると直ります。
他にも読み込んでいるjsを全部削除してみても同じでした。
修正した方が良さそうな箇所がわかりましたら、ご教授いただけませんでしょうか。
すみません、最初からフェードで浮かびあがることって可能でしょうか？
例えば、そのページを開いた瞬間にぼんやり出てくるような。。。
はじめまして。このようなプラグインを探しました。
早速使わせていただいています。
質問なのですが、IEでは動作しないのでしょうか？
firefoxやsafariなど他のブラウザでは問題なく動いているのですが
IEだと動きませんでした。(IE8で確認)
よろしくお願い致します。
とっても素敵な切替ですね。
是非使わせていただきたいです。
質問なのですが、イメージ画像（photo1.jpg）を横長に大きく使いたいので「MENU A（menu1.jpg）」「MENU B（menu2.jpg）」「MENU C（menu3.jpg）」「MENU D（menu4.jpg）」をメイン画像の下に横並びで配置したいのですが、教えていただけないでしょうか？
宜しくお願い致します。
素晴らしいプラグインですね。早速使わせていただいています。
ひとつ質問させていただきたいのですが、
CCCさんも質問されていました、
右のメイン画像なんですがメニューにマウスオーバーにしないときは常にＡという画像が表示されるようにできますか？
最初はＡという画像が表示されていて、メニューにカーソルを乗せると切り替わり
メニューからカーソルを外すとＡが表示されるような。
もし可能なら教えて頂けないでしょうか？
よろしくお願いいたします。
はじめまして、とても良いスクリプトに感動です。
しかし、複数設置しようとしてもふたつめが動かない不具合がありました。
今後の参考になればと投稿させていただきます。
素晴らしいプラグインです。ありがとうございます。
以前より使わせていただいていますが、jQueryを1.6.1に
アップグレードしたら動かなくなってしまいました。
もし解決策をご存知でしたらご教授いただけないでしょうか？
どうぞよろしくお願いします。
お世話になります。
素晴らしいプラグインです！FLASHでよく作成してたのですが
Ipadで表示されないのが困ってまして。
これだと表示されてうれしいです！
一つ質問が。
実際ボタンは4つですが2つにへらして表示しようかと思います。
この場合はそのままナビとイメージを2つにすればよいのでしょうか？
実際そのようにカスタマイズしてみたのですが、
無事動いたものの、ページを表示させると２つ目の画像を
最初読み込んでから１枚目の画像を表示してしまうのです。
この場合の対策があればぜひ教えてください。
Katieさん
cssのボタンのaタグに
position:relative;
をいれれば解決しましたよ
シンプルでいいプラグインです！探してました！
…それで1つ質問があるのですが…。
今現在製作中のウェブサイトに組み込んでテストし、組み込みはうまくできました。が、選択メニュー、表示画像共にマウスオーバーするとクリックできる状態で、実際にクリックすると、同ページのトップまでジャンプしてしまいます。これをマウスオーバーのみで、クリック出来ないようにすることは可能でしょうか？
初心者なのですが、教えてください。
画像名や、画像の大きさを変えるにはどのようにすればいいのでしょうか？
探していたトップページのナビゲーションにぴったりでした。早速利用させて頂きます。ありがとうございました。
素晴らしい & そして美しい。
デモを見て、これは使わせて頂きたいと思いました。
こういうプログラムが組める方って尊敬します。
スクリプトをダウンロードさせて頂きました。
質問なのですが、ボタンやメイン画像からマウスカーソルを外したときに最初の状態（デモではMENU A）へ戻す設定はできますか？
非常に興味深い、ありがとう
お世話になります。
このようなサイト運営されているということ
とても尊敬いたします。
次回ぜひ使わせてください。
ところで、オンクリックで画像が切り替わるという事は可能でしょか。
探していたスクリプトが見つかりました。
以外にこの動きをするものなく、是非、ご利用させていただきたく思います。
当方、JQueryの知識がないので、あるものを組み込むことしかできないのですが
ちなみにこのスクリプトに矢印画像をつけて、次の画像、前の画像に戻る機能をつけたいのですが、どのようにしたら宜しいでしょうか？
もしよろしければお仕事として発注してもいいのですが、是非、ご連絡いただけますと助かります。それでは宜しくお願いいたします。
素晴らしいです！。
まさに探していたスクリプトです。
使わせていただきます。
ありがとうございます。