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>

質問が分かりづらいかもしれませんが、よろしくお願いします。

回答No.2

fujillin · ベストアンサー

ANo1様のおっしゃるように同じドキュメント内での処理の方がいろいろと都合が良さそうな気がしますが、

＞クリックデータをサブウィンドウにもっていく方法がわかりません
とりあえず、別ウィンドウを開くなら
　https://developer.mozilla.org/ja/DOM/window.open

画像を表示するだけでよければ、URIに対象とする画像を直接指定してあげれば表示されます。
その他のオプションなどは、リンク先をご覧ください。
ほかにもいろいろ表示するのであれば、別ウィンドウに表示する内容（html）を生成するか、別途用意しておくかになるでしょう。

お礼

別ウィンドウでhtml生成し、その中で画像切替を考えていました。
まずは別ウィンドウを作るところからやってみたいと思います。

ありがとうございました。

回答No.3

神崎 渉瑠（@taloo）

window.open()の戻り値がサブウインドウオブジェクトです。
サブウインドウからはwindow.openerが親ウインドウオブジェクトです。

ドキュメントの直接操作が出来なくなってるようですし、
（openしたページがabout:blankなら直接操作できるようです。
書き換えた後の再書き換えができるかどうかまではわかりません。）
参考URLのような、ラッパー関数を置いておけばいいと思います。

参考URL：

http://okwave.jp/qa/q7430522.html

お礼

ご回答ありがとうございます。
自分が無知のため、どう使っていけばいいのわかりません。
それぞれの意味など調べて勉強しようと思います。

ありがとうございました。

回答No.1

utun01

擬似的にフローティングウィンドウでサブウィンドウチックにやるのしかやったことありませんが、
以下の様な感じでできるのではないでしょうか。

http://d.hatena.ne.jp/piro_suke/20100825/1282667228

お礼

こういったタイプもあるんですね。
考えてみたいと思います。

ありがとうございます。