jquery - call Fancybox in parent from iframe -
jquery - call Fancybox in parent from iframe -
i have 2 pages, index.html , social.html. cleaned out index , left jquery code need fancybox trying have images within social.html , when clicked on it, open fancybox , show in index.html not within iframe. error comes is:
uncaught typeerror: property 'showimage' of object [object domwindow] not function (anonymous function)social.html:103 onclick
this index.html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" /> <script type="text/javascript" src="js/video.js"></script> <script type="text/javascript"> function showimage(image) { $.fancybox('<img src="img/' + image + '" alt="" border="0" />'); }; </script> </head> <body> <iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe> </body> </html>
in iframe page:
<img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showimage('picture1.jpg');"/>
ps: both pages on same domain... edit: video.js -> fancybox didn't create this.
jquery(document).ready(function() { $(".video").click(function() { $.fancybox({ 'padding' : 0, 'autoscale' : false, 'transitionin' : 'none', 'transitionout' : 'none', 'title' : this.title, 'width' : 640, 'height' : 385, 'href' : this.href.replace(new regexp("watch\\?v=", "i"), 'v/'), 'type' : 'swf', 'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } }); homecoming false; }); });
first, should using fancybox v2.x seamlessly (patching fancybox v1.3.x doesn't worth effort)
second, need have in both pages, parent page , iframed page, loaded jquery , fancybox css , js files in order transcend fancybox properly,
so in both pages should have @ to the lowest degree like:
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
and
<script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
then in iframed (child) page script same (but right fancybox options v2.x ... check documentation here)
$(".video").click(function() { $.fancybox({ 'padding' : 0, // more options (v2.x) etc
but instead of this
$.fancybox({
do this:
parent.$.fancybox({
then fancybox show in parent page out of boundaries of iframed page
update: demo page here
jquery html iframe fancybox
Comments
Post a Comment