HI Victor - and anyone else who wants the code:
I've figured (I hope) out how to do this without the need for a plugin, for anyone who needs the code. Give this a try:
1. Copy this code into a post:
<div id="test">
<button type="button">Show external page in overlay</button>
<div class="apple_overlay" id="overlay">
<div class="contentWrap"></div>
</div>
</div>
2. Put this line in, BEFORE the wp_head() command in the header:
wp_enqueue_script('jqtools', 'http://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js');
3. Put this in, immediately AFTER the wp_head() call:
<link rel="stylesheet" type="text/css" href=
http://static.flowplayer.org/tools/css/overlay-apple.css"/> <style>
#overlay { background-image:url
http://static.flowplayer.org/img/overlay/transparent.png); color:#efefef; height:450px; }
div.contentWrap { height:441px; overflow-y:auto; }
</style>
<script type="text/javascript">
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("#test a[rel]").overlay({
mask: 'darkslateblue',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
Hopefully this will give you a working overlay - it will not open files outside of your domain if you are working locally, but this is a feature of IE/FF not jQuery Tools. If you upload it online, hopefully this will allow you to point to an external page.
Give the above a try - it may not be perfect, but it seems to work for me under Wordpress 3.01
