画像の先読みと拡大表示
- 画像の先読みと拡大表示を実装していますが、動作が不自然です。
- クリックするとフェードインした後、切り替わる前の画像が1秒表示されます。
- キャッシュの問題かと思いましたが、どのように対処すれば良いでしょうか。
- ベストアンサー
画像の先読み
画像の先読み 拡大画像の表示場所とサムネイルの表示場所がありサムネイルをクリックすると拡大画像の場所にクリックしたサムネイルが拡大表示されるものを作っています。 以下のソースで試しており動作は問題ないのですが動作がぎこちないです。 具体的にはサムネイルをクリックすると拡大画像の場所がフェードアウトしフェードインします。 ※ここまでは正常 フェードインしたかと思いきやクリックする前の画像が1秒程表示されその後クリックした画像に切り替わる感じでフェードの効果が全く無意味になってしまいます^^; 事情があり画像の出力をphpで行っているのが原因かと思ったのですが単純にキャッシュの問題かとも思い画像の先読みなどを組み込めればいいのですがどのようにすれば可能でしょうか？ [html] <p id="imgMain"><img src="resize.php?file=/imgimg01.jpg" alt="" id="target" /></p> <ul id="gallery"> <li><a href="resize.php?file=/img/img01.jpg" ><img src="resize.php?file=/img/img01.jpg&x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img02.jpg"><img src="resize.php?file=/img/img02.jpg&x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img03.jpg"><img src="resize.php?file=/img/img03.jpg&x=173" alt="" /></a></li> </ul> [js] $(document).ready( function() { $("#gallery a img") .fadeTo(1, 1) .hover( function() { $(this).fadeTo(200, 0.5); }, function() { $(this).fadeTo(500, 1); } ) $("#gallery a").click(function() { var changeSrc = $(this).attr("href"); $("#target").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); });
- dcx147
- お礼率33% (214/636)
- JavaScript
- 回答数1
- ありがとう数9
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
使う可能性のある画像を、imageオブジェクト（←表示しない）に先に読込んでおけば良いだけです。 実際に使用するときにはキャッシュが利用されるので、速いという仕組み。 ぐぐればたくさん情報が見つかるはずです。 http://www.bing.com/search?q=%E7%94%BB%E5%83%8F%E3%80%80%E5%85%88%E8%AA%AD%E3%81%BF&go=&form=QBRE&filt=all 確認はしてませんが、スクリプトを使わなくても、画面上の見えないところに通常のHTMLで表示させておいても（←実際には見えない）、同様のことが可能かと思います。
関連するQ&A
- サムネイル画像のclass切替がうまく動かない。
すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして class="current" を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryサブウィンドウにて画像切替サブ画像表示
質問お願いします。 元ページのサムネイル画像をクリックすると サブウィンドウが開き、この中でクリックした先ほどサムネイルの拡大画像を表示、他のサムネイル画像も表示し、サムネイルをクリックで拡大画像を切り替え、それぞれの画像に応じたサブ画像も表示させたいと思っています。 一番はクリックデータをサブウィンドウにもっていく方法がわかりません。 イメージで元ページ内での切替をやってみました <style> li img{width:100px;height:100px;} </style> ----jquery----- <script type="text/javascript"> $(function(){ $('li img').click( function(){ $('#main img').attr('src',$(this).attr('src')); $('#sub').text($(this).attr('title')); var postfix = '_on'; var src = $(this).attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('#sub2 img').attr('src',src_on); }); }); </script> ---html---- <ul> <li><img src="red.jpg" title="赤"></li> <li><img src="blue.jpg" title="青"></li> <li><img src="winter.jpg" title="冬"></li> <li><img src="green.jpg" title="緑"></li> </ul> <div id="main"><img src="red.jpg" id="mainimg"></div> <p id="sub">赤</p> <p id="sub2"><img src="red_on.jpg"></p> 質問が分かりづらいかもしれませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
- 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); } ) });
- 締切済み
- JavaScript
- 画像ギャラリー
画像ギャラリー 単純な画像ギャラリーをつくっています。treeのメニューをクリックするとリンクされている画像がtargetに切り替わり表示されるものです。 $(function() { $("#tree a").click(function() { $("#tree a").removeClass("current"); $(this).addClass("current"); var src = $(this).attr("href"); $("#imgMain img:first").fadeOut("normal", function() { $(this).attr("src",src).fadeIn(); }); return false; }); }); <ul id="tree"> <li><a href="../img/gallery/01/img01.jpg" class="current">画像01</a></li> <li><a href="../img/gallery/01/img02.jpg">画像02</a></li> <li><a href="../img/gallery/01/img03.jpg">画像03</a></li> <li><a href="../img/gallery/01/img04.jpg">画像04</a></li> <li><a href="../img/gallery/01/img05.jpg">画像05</a></li> </ul> <p id="imgMain"><img src="../img/gallery/01/img01.jpg" alt="画像" id="target" /></p> これで動作はするのですが「次の画像」や「前の画像」とした別のリンクでも切り替わりの操作を行うにはどうすればいいでしょうか？ img01.jpgがtargetにある場合に「次の画像」をクリックするとimg02.jpgに切り替わり「前の画像」をクリックするとimg05.jpgに切り替わるようにしたいと思っております。 画像の枚数は不特定なので枚数が何枚であろうが汎用性のあるものであれば助かるのですが詳しい方がいらっしゃいましたら実行方法を教えてください。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- こんにちは、javascriptにてボタンを押すと画像が透明度が下がる
こんにちは、javascriptにてボタンを押すと画像が透明度が下がる動きを作っています。 ボタンを押すとフェードアウトはできるのですが、フェードアウトした画像を 元の透明度にフェードインすることが出来ません。 if文のclassに書かれている変数の扱いがよくわからないので、質問させて頂きました。 forで回してカウントから取得してみようかと,すべての画像に<p class＝"fade1">のような タグをすべての画像に付けて、javascript記述できればと思っていましたが、classの指定が $(".fade+i img")等と指定してみましたが、動きませんでした。 適切な方法がありましたら、教えてください。よろしくお願いします。 【html】 <div class="thumbnail"> <img src="g_images/IMG_1470.jpg" alt="画像1" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02564.JPG" alt="画像2" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02227.JPG" alt="画像3" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02555.JPG" alt="画像4" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02558.JPG" alt="画像5" class="item-image" hspace="5" vspace="3" /> </div> 【javascript】 $(document).ready( function(){ $(".thumbnail img").click(function(){ if($(".thumbnail img").css("opacity")!=1.0){ $(".thumbnail img").fadeTo("normal", 1.0); // マウスオーバーで透明度を60%にする } $(this).fadeTo("normal", 0.4); // マウスオーバーで透明度を60%にする }); });
- ベストアンサー
- JavaScript
- jQueryのfadeToの動きが変（サーバ上）
サムネイル画像をクリックするとメイン画像にそれを映し出し そのメイン画像が指定した時間で薄っすらと表示されるような効果のイメージギャラリーをjQeryを使って制作しています。 jQueryバージョン：jquery-1.7.2.min.js ※（薄っすらと表示される効果：jqueryにてメイン画像のopacityを0→1)に変化させて実現しています 【問題点】 ローカルＰＣ上でテストすると意図する動作をするのにサーバ上にデータをアップしてテストすると メイン画像の移り変りにブラウザ起動後、初回サムネイルをクリックしたときのみ遅延が発生し、JqeryのfadeToも効きません。 何かjQueriのfadeto関係などソースに問題があるとか、これはキャッシュの問題で仕方ないとかあればご指導のほどよろしくお願いします。 【問題点詳細】 しかし、自分のパソコン内（ローカル環境）で動作させてみると意図したとおりになるのですが、 データをレンタルサーバ上にアップし、確認してみると、サムネイルをクリックすると jqueryのfadetoの（opacityを０から１にする部分）動作がおかしくなります。 ブラウザを起動し初回サムネイルをクリックしたときのみ、メイン画像が前の残像が残り（遅延発生）し、fadetoの（opacityの変化）が聞かなくなります。 【状況整理】 １．どのＰＣでもローカル環境（自分のＰＣ内）でテストすると意図する動作をする。 ２．レンタルサーバ上だと、ブラウザを起動後、初回サムネイルをクリックしたときのみおかしい動作をする。（メイン画像の切り替わりに遅延が発生する（fadetoも効かない）） ３．ブラウザを閉じない状態で、同じサムネイルをクリック（２回目）すると意図する動作をする。 ※２．３を考えますと２回目以降クリックしたときに大丈夫なのは１回目クリックしたときに取得したメイン画像のキャッシュがブラウザに保存されているからだと思います。 またローカルだと大丈夫なのはメイン画像取得する時間（ダウンロードがない）から じゃないかな？とも思います。 メイン画像に使っているそれぞれのファイルサイズは80KBと軽いです。 またIE 8/9でもfirefox12でも同じ状況です。 ■HTMLソース（XHTML) <div id="carousel"> <!--メイン画像--> <div><img src="img/main.jpg" alt="" class="main_img"/></div> <!--サムネイル画像--> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thumb.jpg" alt="" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thumb.jpg" alt="" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thumb.jpg" alt="" /></a></li> </ul> </div> </div> ■Javascript(jQuery) $(function() { $("#carousel .anyClass a").click(function(){ $("#carousel .main_img").css("opacity",0); ←いったんメイン画像のopacityを０に落とす $("#carousel .main_img").attr("src",$(this).attr("href")); ←メイン画像のＵＲＬにセット $("#carousel .main_img").fadeTo("normal",1); ←メイン画像のopacityを１に変化 return false; }); });
- ベストアンサー
- CSS
- jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。 別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています） やりたいことは以下の２つです。 ・Div要素には元画像の大きさで表示させたい。 ・できれば、フェードイン・アウトで画像を切り替えたい。 色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。 お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
- 二重の画像切り替え
以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 （ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。） 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、 更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←Ａ（Ｂの拡大画像） └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←Ｂ（車の各方向からの写真画像） └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←Ｃ（車のカラーバリエーション） └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--Ａ（Ｂの拡大画像）--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--Ｂ（車の各方向からの写真画像）--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--Ｃ（車の各方向からの写真画像）--> <div class="color"> <ul> <li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト--> ・ ・ ・
- 締切済み
- JavaScript
- jqueryで画像切り替え
この場をお借りして教えて頂ければ幸いです。 jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、 メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。 ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、 またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたら そこの画像から順にsetIntervalが開始されるようにしたいと思っております。 そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。 今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。 <body> <div id="wrap"> <div id="sec1"> <div id="photoBox"> <ul id="photo"> <li><img src="img/plan1.jpg" alt="食1" /></li> <li><img src="img/plan2.jpg" alt="食2" /></li> <li><img src="img/plan3.jpg" alt="食3" /></li> </ul> <ul id="thumb"> <li class="first"><img src="img/plan1_s.jpg" alt="" /></li> <li><img src="img/plan2_s.jpg" alt="" /></li> <li><img src="img/plan3_s.jpg" alt="" /></li> </ul> </div> </div> </div> </body> -------------------------------------------------------------------- div#wrap{ width:394px; margin:0 auto; } div#photoBox{ width:394px; height:391px; padding:40px 0; border-bottom:1px solid #CCC; } div#photoBox ul#photo{ width:394px; height:295px; padding-bottom:5px; position:relative; } div#photoBox ul#photo li{ width:394px; height:295px; display:block; position:absolute; top:0; left:0; } div#photoBox ul#thumb{ width:394px; height:91x; position:relative; } div#photoBox ul#thumb li{ float:left; padding-left:5px; } div#photoBox ul#thumb li.first{ padding-left:0; } --------------------------------------------------------- (function(){ var photo = $('#photo').find('li'); var thumb = $('#thumb').find('li'); photo.hide().eq(0).show(); thumb.hover(function(){ $(this).stop().fadeTo('fast', 0.6); photo.stop().fadeTo('fast', 0) .eq($(this).index()) .stop().fadeTo('fast', 1); }, function(){ $(this).stop().fadeTo('fast', 1); }); })
- ベストアンサー
- JavaScript
- 画像をフェードアウト＆フェードインで切り替えたい
jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){ $("#cat-list a").click(function(){ $("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text()); $("p#cat-name").text($(this).text()); return false; }); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list"> <li><a href="images/cat01.jpg">ネコ1</a></li> <li><a href="images/cat02.jpg">ネコ2</a></li> <li><a href="images/cat03.jpg">ネコ3</a></li> <li><a href="images/cat04.jpg">ネコ4</a></li> <li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。
- ベストアンサー
- JavaScript
補足
お返事ありがとうございます。 >スクリプトを使わなくても・・・ jsがわからなかったので考えた手ではあるのですが cssでdisplay:noneを設定しておくという事でしょうか？