I am giving myself fits trying to do something which I am not even sure is possible.
using a link in an iframe on a page, I want to open a fancyzoom box on the parent (so that the box isn’t obscured by the frame edges). I assume that the fancyzoom box content div must live in the parent, but I am unable to get it to open there. I have included the fancyzoom code on the parent only, child only, parent and child, to no avail. I have tried calling the parent frame from the child by adding .parent before and in the code, to no avail.
Any ideas?
Here is the (current broken) state of the parent page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>iframe zoom test</title>
<link href="nstyle.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!--
fancyzoom
-->
<script type="text/javascript" src="fancyzoom.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#medium_box_link').fancyZoom({width:400, height:300});
});
</script>
</head>
<body>
<a href="#medium_box" id="medium_box_link">Alaska</a>
<div id="medium_box">
<h2>All about Alaska</h2>
<p><strong>Here is some info about my time in Alaska</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>
<iframe src="iframetest.html" width="85" height="700" scrolling="no" FRAMEBORDER="0" name="frame" />
</body>
</html>
and here is the child frame:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>iframe zoom test</title>
<link href="nstyle.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!--
fancyzoom
-->
<script type="text/javascript" src="fancyzoom.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#medium_box_link').fancyZoom({width:400, height:300});
});
</script>
</head><body><a href="#medium_box" id="medium_box_link"'>Alaska</a>
<div id="medium_box">
<h2>All about Alaska</h2>
<p><strong>Here is some info about my time in Alaska</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>
</body>
</html>
I have tried modifying
$('#medium_box_link').fancyZoom({width:400, height:300});
to be
window.parent$('#medium_box_link').fancyZoom({width:400, height:300});
or even
$('#medium_box_link',window.parent).fancyZoom({width:400, height:300});
but to no avail. Is what I am trying to do even possible?
Thanks in advance for any help or pointers!
No one seemed to be able to make this work, so I moved to another solution using floatbox (here). Although it cost 20 bucks, it does exactly what I need with a minimum of hassle. Zoom works from any element inside or outside an iframe, with lots of options, and smoothly.