サムネイルクリックで別ウィンドウに拡大画像表示
- 初心者でも簡単に実現できる、サムネイルクリックで拡大画像を別ウィンドウで表示する方法を紹介します。
- ページAの画像をクリックすると別ウィンドウで拡大画像とその他のサムネイルが表示され、観覧が可能です。
- 共通のページBを利用して、拡大画像と画像に関連した文を表示させることもできます。
- ベストアンサー
サムネイルクリックで別ウィンドウに拡大画像表示
javascriptにて画像のようなな形を作りたいのですが初心者で困っています。 ページAの画像をクリックすると別ウィンドウで拡大画像とその他のサムネイルが 表示され、そのウィンドウで各画像を切り替えて観覧できるようにしたいです。 元のページでの画像切替はよくありますが、別ページを開いて観覧する場合がわからず困っています。ページAと同じようなページを複数つくり、拡大のページBは共通で使えるようにしたいと思っています。 ページAのhtml部分は <li><a href=><img src="test.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_a.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_b.jpg" title="拡大時に表示する文"></a></li> この画像をクリックでページB拡大画像を表示し、画像と一緒にtitleに入れた文章を表示させたいと思っています。 用意する画像は各拡大画像1枚で、サムネイルのところはcssで小さくしています。 このような形は実現可能でしょうか？ よろしくお願いします。
- eeiina
- お礼率50% (27/54)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 サブウィンドウを開く形で簡単にですが作ってみました。 jQueryというものを併用していますので各ページの<head>内に <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="./jquery.subwinthumbnail.js"></script> <script type="text/javascript"> $().ready ( function() { $('#thumbnail').subwinthumbnail ({ title:'サムネイル別ウィンドウ', // サブウィンドウのタイトル(デフォルト:'') wid:480, // メイン画像の横サイズ(デフォルト:480) hei:360, // メイン画像の縦サイズ(デフォルト:360) winW:710, // サブウィンドウの横サイズ(デフォルト:800) winH:700, // サブウィンドウの縦サイズ(デフォルト:600) winS:false, // スクロールバーの表示(デフォルト:false trueで表示,falseで非表示) twid:200, // サムネイル画像の横サイズ(デフォルト:120) }); }); </script> を入れます。 <body>内には以下の構成で入れます。 構成を崩すと動かなくなってしまいますのでデザインはcssにて変えてください。 <li>の増減は問題ありません。 <div id="thumbnail"> <div class="main"><img src="./images/a.png" width="480" height="360" alt="サンプルAです。" /></div> <ul> <li><img src="./images/a.png" width="120" height="90" alt="サンプルAです。" title="拡大されたサンプルAです。拡大されたサンプルAです。拡大されたサンプルAです。拡大されたサンプルAです。" /></li> <li><img src="./images/b.png" width="120" height="90" alt="サンプルBです。" title="拡大されたサンプルBです。" /></li> <li><img src="./images/c.png" width="120" height="90" alt="sampleCです。" title="拡大されたsamnpleCです。" /></li> <li><img src="./images/d.png" width="120" height="90" alt="sampleDです。" title="拡大されたsamnpleDです。" /></li> </ul> </div> こんな感じでどうでしょうかという突貫工事なサンプルですので参考まで見てみてください。 急いで作ったのでバグとかあったらすみません。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7350326/ 上記URLのソースを参考に実装してみてください。
その他の回答 (4)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 最初の大きな画像を選択しても動くようにしました。 試してみてください。
お礼
たびたびのご回答頂きありがとうございました。 希望の通りの動作で大変感謝しております。 世界が広がりますね、初心者なりに理解できるように 勉強していこうと思います。ありがとうございました。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 確かにこちらでもIE6にて確認し、 その点を修正したら動くようになりましたのでそれが原因だったようです。
お礼
何度もご回答いただき本当にありがとうございます。 たびたびで申し訳ありません、先に質問すればよかったのですが 最初にある大きい画像もサムネイルと同様クリックできるようになりますでしょうか？
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 IEにて作っていましたので大丈夫なはずですが、バージョンがあまりに低いと動かないかもしれません。 (IE8にて確認) Firefoxは確かにタイトルが切り替わりませんでした。 その点は修正しておきました。 IEのバージョンはいくつでしょうか。
お礼
ありがとうございます。IEは6と8です。 ソースを比較していて、以下の部分を直したら動きました。 twid:200,// サムネイル画像の横サイズ(デフォルト:120) ↓ twid:200// サムネイル画像の横サイズ(デフォルト:120) カンマを取っただけなのですが、これが原因でIEが動かなかったのでしょうか。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 別ウィンドウとはサブウィンドウが開くイメージでしょうか。 またはページ遷移するイメージでしょうか。
補足
ご回答ありがとうございます。 700px×700px固定サイズのサブウィンドウが開くイメージです。
関連するQ&A
- サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について
お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述４の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述１+２+３と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか？ ■記述１(html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js"> </SCRIPT> </head> <body> <table width="400"> <a href="#" target="_blank"> <img src="http://test.com/img/01.jpg" name="imgSample"></a> <div> <div> <script language="JavaScript" type ="text/javascript" src="http://test.com/01.js"> </script> </body> </html> ■記述２(js00) //画像の名前を配列に代入していきます。 strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg"); function SetPicture(nVal) { document.imgSample.src = strPictureName[nVal]; } ■記述３(js01) //サムネイル画像をオンマウスで拡大表示 img_num="8"; if( img_num == "" ){img_num='5';} for ( cnt = 1 ; cnt <= img_num ; cnt++ ) { cnt2 = cnt-1; document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ; } ■記述４(js02) // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; jmp[5] = "http://google.com/"; jmp[6] = "http://google.co.jp/"; jmp[7] = "http://news.yahoo.co.jp/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "http://test.com/01.jpg"; img[1] = "http://test.com/02.jpg"; img[2] = "http://test.com/03.jpg"; img[3] = "http://test.com/04.jpg"; img[4] = "http://test.com/05.jpg"; img[5] = "http://test.com/06.jpg"; img[6] = "http://test.com/07.jpg"; img[7] = "http://test.com/08.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); ■完成イメージ |￣￣￣￣￣￣￣| | 拡大画像 | |＿＿＿＿＿＿＿| |￣||￣||￣||￣| |＿||＿||＿||＿|←サムネイル ・サムネイル画像をオンマウスで拡大画像を表示 ・サムネイル画像、拡大画像それぞれに指定リンクを入れる ・可能であればリンクページは target="_blank" で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。
- ベストアンサー
- 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
- サムネイル画像の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での画像表示について
どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- アメブロで画像が拡大表示できません。
アメブロで記事を作成して画像を載せましたが、画像をクリックしても拡大表示できません。 人のブログの写真はクリックすると拡大できます。 HTML表示では <a href="http://***.jpg"><img border="0" alt="*" src="http://***.jpg" width="*" height="*" /></a> となっています。 よろしくお願いします。
- 締切済み
- ブログ
- HPの画像の拡大表示について
現在ＨＰを作成しています。 小さい画像を並べて、クリックすると新しいウインドウに 拡大写真が表示されるようにしたいのですが。 winのペイントで画像を２枚用意して、(縮小画像と拡大画像) 01と１にファイルしました。 <A href="img\1.jpg" target="_blank"><IMG src="img\01.jpgL"></A> としたのですが、拡大画像は表示されても、縮小画像は×になっています。何か間違っているのでしょうか? 教えてくださいお願いします。 超初心者ですので、わかり易くお願いします。
- ベストアンサー
- HTML
- サムネイル画像が表示されない
以前質問しましたがもう一度お願いします。 HPビルダー7 でサムネイル画像の大きい画像がネット上で表示されません。（プレビューでは表示されます。）ISPのぷららに聞くとアップロードされてないらしいのですが、ソフトの問題なのでそれ以上答えてくれません。ちなみに、HTMLソースは <TD align="center" valign="middle" width="128" height="128"><A href="IMG_0597.JPG"><IMG src="IMG_0597_thumb.JPG" width="128" height="96" border="1"></A></TD> です。なぜ、小さい画像をクリックしても大きい画像が表示されないか分かりません。なにかヒントでもいいですからお願いします。
- 締切済み
- その他(ソフトウェア)
- サムネイルをクリックすると画像が拡大表示されるようにするには？
下記のページの「SAMPLE」を、サムネイルをクリックすると、選択した画像が真ん中の段の陰付き白枠の中に拡大表示されるようにしたいです。 インラインフレームは使いたくないのでJavaScriptでできないかと思っています。 ちなみに当方はJavaScript初心者です。 白枠はcssで#subcon2というボックスの背景に設定しています。 画像については、サムネイルの画像はs01.jpg、s02.jpg・・・という名前で、拡大表示用の画像はサムネイルの名前からsを取って、01.jpg、02.jpg・・・と、名前を付けて、このhtmlと同じ階層にある「images」フォルダの中の「sample_nail」フォルダに入ってます。 この情報で足りますか？ どのようにすればいいでしょうか？よろしくお願い致します。 http://www.ac.auone-net.jp/~mrs/sample.html
- ベストアンサー
- JavaScript
- サムネイル画像の表示途中でそのサムネイル画像をクリックすると後から表示されるサムネイルが表示されない。
winXP PRO IE6.0SP1です。 とあるHPを作成していますが、サムネイル画像（約100画像）をクリックすると別ウィンドウが出る様にしています。 サムネイルが全部表示される前にクリックすると小窓が出て画像は表示されますが、そこから後に出るサムネイルが表示されずフリーズしてしまいます。 <a href="javascript:void(0);" onclick="window.open('./******/***.jpg','win1','width=400,height=400');" menubar=no toolbar=no locaction=no status=no><img src="./small/***.jpg" height=50 border=0></a> 他のPCで確認しても同じ状態です。 サムネイル画像が出ている途中でその画像をクリックしてもフリーズしない方法の解除方法はありますでしょうか？ 宜しくお願い致します。
- ベストアンサー
- HTML
- 画像をクリックすると別ウインドウに拡大画像を表示する。
アパレルのショッピングサイトの運営をしております。クライアントから「自社デザインを真似たものや盗用したものを頻繁に見かけるようになったため右クリック禁止で商品写真の画像をコピーされないようにしたい」との依頼がありました。 右クリック禁止は気休め程度と説明しましたが、残念ながら理解を得られませんでした。 私のJava Scriptの知識は読むことができる程度です。浅薄な知識ではどうにもすることができず、こちらに投稿させていただきました。どうぞよろしくお願いいたします。 実現したい内容は、▼次のとおりです。 ┌───── │商品画像 │A0101.jpg └───── ↓↓クリックで別ウインドウが開く ┏━━━━━━━━ ┃ ┃ 商品拡大画像 ┃ A0101L.jpg（末尾の'L'はLサイズの意味） ┃ ┃ ×閉じる ┗━━━━━━━━ １．商品画像をクリック。ファイル名A0101.jpgを変数に記憶。 ２．A0101.jpgの末尾に’L'を加える。（A0101L.jpg） ３．別ウインドウを開き、拡大画像を表示。 ４．拡大画像の横幅を調べ、別ウインドウを、高さ（600px）、横幅( 拡大画像＋左右余白10px）にリサイズ。 ５．画像上での右クリック禁止（<IMG SRC="A0101L.jpg" oncontextmenu="alert('画像コピー禁止');return false;">） ▼イメージに近いサイト 「ノードストローム」 （商品画像の下、＞LARGE VIEWをクリック） http://store.nordstrom.com/product/product_brandboutique.asp?styleid=2874130&boutique=lacoste&category=2376776~2374325~2378463~2383145~2378114&NextStyleID=2874128&PrevStyleID=none ▼現在はtarget="_blank"で別ウインドウを開かせています。 <A href="picture/A0101L.jpg" target="_blank"><IMG src="picture/A0101.jpg"></A>
- ベストアンサー
- JavaScript
お礼
サンプル拝見しました、ありがとうございます。 想像していた通りの動作で感激しました！！ 実際に動かしてみたのですが、こちらはIEやFirefoxでは動作しないのでしょうか？ IEだと動作せず、Firefoxだとサブウィンドウ内のtitle文が切り替わりません(><) 図々しい質問で恐縮なのですが何か解決する手段はありませんでしょうか？ そもそもブラウザの問題上しかたないのでしょうか？