常常用到iframe内嵌另一个页面,而这个页面里显示图片,当点击这个内嵌页面中的图片,让他在父级页面显示colorbox的效果
1.首先iframe内页面额代码
js: function colorBox() { var url = document.getElementById("bigPic").src; window.parent.showBigPic(url); } html: <img id="bigPic" src="<%=BigPic %>" ondblclick="colorBox()" alt="" style="300px;height:200px;" />
2.外面大页面
引用: <script type="text/javascript" src="/public/js/jquery-1.4.4.min.js"></script> <link href="http://www.cnblogs.com/public/ColorBox/colorbox.css" rel="stylesheet" type="text/css" /> <script src="http://www.cnblogs.com/public/ColorBox/jquery.colorbox-min.js" type="text/javascript"></script> js: //显示图片 function showBigPic(url) { $.colorbox({ html: "<div><img src='" + url + "'></div>" }); $('div#cboxLoadedContent').css({ "border-bottom": "none", "background": "transparent" }); }
3.大功告成!