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

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -