- 締切済み
jQueryのプラグイン（画像処理）を探していま
下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ １）メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 ２）サムネイルはマウスオーバーで画像と文字が切り替わるようにしたい ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 参考になるサイト等、ご存知でしたら教えていただけば幸いです。
- _rin
- お礼率71% (25/35)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… 両方同時に満たすものはないかも。（あるかも知れません） １）、２）をそれぞれ満たすものか、１）を満たすものなら比較的簡単に見つかると思われますので、それに２）の機能だけ追加すればよろしいのではないでしょうか？ とりあえず、それっぽいサンプルを。 あくまでもサンプルなので、最低限の内容だけにしています。 全体のサイズを変えたり、ボタンの種類を変えたり、切り替わりの効果とかは適当に修正・追加してください。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- .main_view { position:relative; width:600px;} .main_view img { width:600px; height:300px; } .main_view button.arrow { display:block; position:absolute; width:20px; height:100px; } .main_view button.next { top:100px; right:0px; } .main_view button.prev { top:100px; left:0px; } .thumbnail { position:relative; } .thumbnail ul, .tumbnail ul li{ list-style-type:none; padding:0; margin:0; } .thumbnail ul { position:absolute; top:0; left:0; } .thumbnail ul.normal { z-index:5; } .thumbnail ul li{ float:left; width:150px; height:75px; overflow:hidden; } .thumbnail ul.normal li img { border-style:none; width:100%; height:100%; } //--> </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1.5.0");</script> <script type="text/javascript"> <!-- var sample = function(id){ // 初期設定 var target = $("#"+id); var ul = $("ul.normal", target); var show = $(">li.active", ul); show = show.length?show.get(0):$("li:first-child", ul); setImage(show); // 矢印クリック処理 $(".arrow", target).click(function(){ var show = $(".active", ul); show = $(this).hasClass("next")?show.next():show.prev(); if(show.length) setImage(show); }); // サムネイルホバー処理 $(">li>img", ul).hover( function(){ setImage($(this).parent("li").css("opacity", 0)); }, function(){ $(this).parent("li").css("opacity", 1); } ); // 画像表示処理 function setImage(node){ $(">li", ul).removeClass("active"); node = $(">img", $(node).addClass("active")); $("div.main_view>img", target).attr({ "src" : node.attr("src"), "alt" : node.attr("alt") }); } }; $(function(){ sample("hoge"); }); //--> </script> </head> <body> <div id="hoge"> <div class="main_view"> <img src="img/photo01.jpg" alt="photo01"> <button class="arrow next" type="button">→</button> <button class="arrow prev" type="button">←</button> </div> <div class="thumbnail"> <ul class="normal"> <li><img src="img/photo01.jpg" alt="photo01"></li> <li class="active"><img src="img/photo02.jpg" alt="photo02"></li> <li><img src="img/photo03.jpg" alt="photo03"></li> <li><img src="img/photo04.jpg" alt="photo04"></li> </ul> <ul> <li>111画像と切り替わる文字列111</li> <li>222画像と切り替わる文字列222</li> <li>333画像と切り替わる文字列333</li> <li>444画像と切り替わる文字列444</li> </ul> </div> </div> </body> </html>
