• 締切済み

jQueryのプラグイン（画像処理）を探していま

下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ １）メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 ２）サムネイルはマウスオーバーで画像と文字が切り替わるようにしたい ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 参考になるサイト等、ご存知でしたら教えていただけば幸いです。

  • _rin
  • お礼率71% (25/35)

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

回答がないみたいなので… 両方同時に満たすものはないかも。（あるかも知れません） １）、２）をそれぞれ満たすものか、１）を満たすものなら比較的簡単に見つかると思われますので、それに２）の機能だけ追加すればよろしいのではないでしょうか？ とりあえず、それっぽいサンプルを。 あくまでもサンプルなので、最低限の内容だけにしています。 全体のサイズを変えたり、ボタンの種類を変えたり、切り替わりの効果とかは適当に修正・追加してください。 （全角空白は半角に） <!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>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQuery：マウスオーバーで画像が切り替わる

    下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ １）メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 （スライドショーはなし） ２）メイン画像にはテキスト（説明文）も入れられる ３）メイン画像の下には、サムネイル画像も表示できる ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 参考になるサイト等、ご存知でしたら教えていただけば幸いです。

    • 締切済み
    • CSS
  • マウスオーバーで横に反転するjqueryについて

    マウスオーバーで横に画像が反転するjqueryのプラグインを探しています。 http://lab.smashup.it/flip/ このサイトのように画像Aから画像Bに反転するのですが、下のサムネイルをクリックするのではなく、画像自体にマウスオーバーすることでその画像が反転するものを探しています。 ※左から右にスライドするものは省きます。 もし同様のものがあるのであれば、jqueryに限らず情報をお待ちしています。 お力添えよろしくお願いします。

  • WordPressのプラグインとjQueryのそれ

    jQueryの存在を知り、WordPressでスライド画像表示なんかが簡単に実現できることを知りました。さらには、WordPressのプラグインとして直接実装も可能なようですが、両方可能な場合、どちらを選べばよいのでしょうか？ Nivo Slider, ColorBox, FancyBoxを手始めに候補としています。 例えば、jQueryプラグインとして実装したほうが重くならない、などといった違いがあるのでしょうか？比較しつつ教えていただけると助かります。

  • jQueryのプラグイン「Skitter」について

    下記サイトで配布されているjQueryのプラグイン「Skitter」について、 質問させて下さい。 http://thiagosf.net/projects/jquery/skitter/ スライドショー用にjQueryの良いプラグインはないかと探して見つけたのが、 このSkitterで、実装も簡単だしアニメーションのエフェクトも多彩で、お気に入りです。 質問は、スライドショーが無限にループしてしまうのを、 最後の画像がきたところで、ストップさせる、 というカスタマイズが出来ないかという事です。 ファイルの中身を見たり、検索エンジンも使ってみましたが、 答えが見つけられず、思い切って質問してみました。 わかる方いらっしゃいましたら、ぜひお教え願いたいと思ってます。 よろしくお願いしますm(_ _)m

  • jqueryプラグインを探しています。

    ttp://akaitaro.com/ 上記のサイトのように、画像の部分にマウスオーバーすると画像の上にテキストが表示できるようなプラグインを探しています。 探してみたのですがなかなか見当たらないのですが、どなたかご存知の方がいれば教えていただけないでしょうか。

  • jQueryスライドプラグイン

    jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか？ http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。

  • jqueryのプラグインdroppy.jsについて

    WEBデザイン初心者です。 グローバルナビ部分を、ドロップダウンリストにしたいなと思い、jqueryで実装しようと思っています。 調べてみたところ、よく使われているプラグインにdroppy.jsというものがありましたが、 どの紹介サイトでもjQueryのサイトにリンクされています。 ただ、そこから、ダウンロードファイルが見つかりません。 もしかして、jQueryサイトでは取り扱わなくなったプラグインなのでしょうか。 あまりにもdroppyの事例が多いので、できれば導入したいのですが、分かる方いれば、よろしくお願いします。

  • jQueryのスライドショーのカスタマイズについて

    仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。 皆様のお力をお貸しいただけないでしょうか。 ■galleriaのプラグインを使ってカスタマイズする内容 galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。 ■自分でうまくできないところ このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。 モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。 その他に、もっと簡単にできる方法など教えていただければ助かります。 よろしくお願いいたします。

  • jQueryでふたつの動作をさせたいのですが？

    jQueryでふたつの動作をさせたいのですが、適用のしかたがわかりません。 詳しい方、教えてください。 ■その１：ページのトップに戻す http://iuser.jp/webjin/archives/2009/11/jquery-scroll-to-top-control.html この動作単独では動きました。 ■その2：マウスオーバーで画像を変更 http://www.webcreatorbox.com/tech/jquery-tips20/ その１で、プラグインのscrolltopcontrol.jsで指示する矢印画像：scrollup.gif に、 その2のマウスオーバーをかけたいのです。 その2のマウスオーバーは、<body>内に実存する画像に対応するようになっていて、 scrolltopcontrol.js内に書かれている画像に、指示すにはどうしたら良いのかわかりません。 また、この方法ではできないのなら、「その１：ページのトップに戻す」を生かして、そのボタンに マウスオーバーをかける他の方法を教えてください。

  • jqueryについて

    サムネイルをマウスオーバーすると#targetに拡大画像を表示するものなのですがマウスオーバーで 切り替わりマウスアウトで元に戻るとこまではいいのですがフェードが全く効きません。 いろいろ試したところ$(".thumbnail a img")に変えるとフェードはするのですが今度は画像が 切り変わらなくなってしまいす。両者実装するにはどのように書き換えればいいのでしょうか？ $(document).ready(function() { var originSrc = $("#target").attr("src"); $(".thumbnail a") .fadeTo(1,1) .hover( function() { var changeSrc = $(this).attr("href"); $("#target").attr("src", changeSrc); $(this).fadeTo(200, 0.5); }, function() { $("#target").attr("src", originSrc); $(this).fadeTo(500, 1); } ) });

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する