Colorbox learning notes-IFRAME embedded page call parent page colorbox

IFRAME is often used to embed another page, and an image is displayed on this page. When you click an image on this embedded page, the colorbox effect is displayed on the parent page.

1. First, IFRAME internal page denominationCode

JS: function colorbox (){VaRUrl = Document. getelementbyid ("Bigpic"). SRC; window. Parent. showbigpic (URL);} HTML:<IMG id ="Bigpic"Src ="<% = Bigpic %>"Ondblclick ="Colorbox ()"Alt =""Style ="Width: 300px; Height: 200px;"/>
 

2. large external page

Reference: <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:  //  Show Image  Function showbigpic (URL) {$. colorbox ({HTML:  "  <Div>  " + URL + "  '> </Div>  "  }); $ (  '  Div # cboxloadedcontent  ' ).Css ({ "  Border-bottom  " : "  None  " , "  Background " : "  Transparent  "  });} 

3. Success!