iframe中的lightBox

今天中午吃了5两的老友粉，撑了……

周五去成都！

晚上帮朋友实现个效果，就是在一个iframe里有一个相册，点击之后用lightbox展示，但是希望这个lightbox能展示在父页面里。 想了下，可以把那个iframe里的图片复制到主页面里，当点击iframe里的图片时，同步的找到主页面里的对应图片，然后用lightbox展示，iframe里面就不用lightbox了。

边想边改，折腾了两个多小时，下面是主要的代码，其实也就几行。

$(function() {
	if(top != self){
		var p = window.parent;
		var $tgt = p.$('#gallery');
		if(!$tgt.length){
			p.$('body').append( $('#gallery') );
			p.$('#gallery a').lightBox();
		}

		$('#gallery a').click(function(event){
			var i = $('#gallery a').index(this);
			p.$('#gallery a').eq(i).trigger('click');
			return false;
		});
	}else{
		$('#gallery a').lightBox();
	}
});

iframe里的相册部分html代码如下：

<div id="gallery">
<ul>
	<li><a title="Jean Muller ? 2011" href="photos/image1.jpg">
<img src="photos/thumb_image1.jpg" alt="" width="148" height="99" />
</a></li>
	<li><a title="Jean Muller ? 2011" href="photos/image2.jpg">
<img src="photos/thumb_image2.jpg" alt="" width="148" height="99" />
</a></li>
</ul>
</div>