Using Easy FancyBox to open iFrame from the Main Menu

That’s an interesting idea… But at this point, it can only work if you are able to give the specific menu link that you want opened in FancyBox the class “fancybox-iframe”.

So your menu in the resulting page source would have to look something like this

<ul>
<li class="current_page_item"><a href......</li>
<li><a href......</li>
<li class="fancybox-iframe"><a href......</li>
<li><a href......</li>
</ul>

In this menu, the 3rd link should open in a FancyBox overlay.

But to achieve something like that, you would have to either hard-code your menu in a text widget OR your theme header.php OR find some cunning if-else PHP way to get that instance of fancybox-iframe to appear on the right menu item.

Too bad the new WordPress internal CMS-type menu configuration system does not allow you to define custom classes 🙁

Anyway, you can try to test with a link (and later a full menu) in a text widget and see if you can make that fit on your site.

Well, I just learned the Menu (internal WP) system DOES allow custom classes! I just had to open the Screen Options (top right corner on Appearance > Menus ) and place a checkmark at ‘CSS classes’ … Shows you can learn every day 😉

Anyway I tried adding the class fancybox-iframe to one of the menu items but on the page source code, that class is assigned to the li tag, not the a tag. I mistakenly did that in the example code in my previous post as well. But FancyBox needs to be attached to an a tag (or else be called via some click() trickery) so that is why it won’t work.

Not out of the box anyway.

But I can tell you how to make it work if you are using Custom Menus:
1. Enable the possibility to apply CSS classes and add the class fancybox-iframe to the menu item you want in an iframe.
2. Open your theme header.php and add just before ‘</head>’ the code:

<script type="text/javascript">
jQuery(document).ready(function($){
$('li.fancybox-iframe a').fancybox( $.extend(fb_opts, { 'type' : 'iframe', 'width' : '70%', 'height' : '90%', 'padding' : 0, 'scrolling' : 'auto', 'autoScale' : false, 'titleShow' : false, 'titlePosition' : 'float', 'titleFromAlt' : false, 'transitionOut' : 'fade', 'easingIn' : 'swing' }) );
});
</script>

Adjust the parameters like width, height and such. Now the iframe overlay should work 🙂

I quite like this… I might bake this right into the next release, even as a hidden feature. I can not promise anything but it is likely you can remove that addition to your header.php after upgrading 😉

Thanks sethneal, for this brilliant idea!

Awesome! This is JUST what I was looking for!

Thank you so very much!

how do I go about getting inline stuff in my wordpress, i got the plugin called

fancybox-for-wordpress plugin
and I also have fancy-box plugin

I have fancy-box plugin disabled right now
But, i’m trying to make an html page that will be inline with my site.

and I’m so freaking lost, Im on here
http://fancybox.net/howto
trying different codes but I can’t understand it, anyone can help??

I was planning on downloading the fancybox from that site and seeing if I can do something with it!

hmm.. do i put that code into my index / header page?

cause, I’m using TAKTEEK01

http://wordpress.org/extend/themes/takteek01

And it has two side bars, and I’d like to have one of the sidebars to have a link to say Merch, and when a user clicks on it they will be an overlay pop up of a shirt and under that a description on how to order a shirt, and stuff.

I’m also on the new version of wordpress Version 3.0.5 will it work!
what’s wrong with those other plugin’s I mention!

actually i got it to work from this

http://jquery.com/demo/thickbox/

replaced the name to “fancybox” since i have the wordpress plugin and it works, odd

<img src=”http://i48.tinypic.com/bhhb8y.png&#8221; width=”64″ height=”64″ border=”0″ alt=”Merch” />

it should be reading “thickbox” but I guess you really just need to change thick to fancy!!!

So, I take it that I can use pretty much any other lay then right? as long as I change the NAME!

Install Easy FancyBox, activate it and edit your page in the HTML tab to wrap your inline content like this:

<div class="fancybox-hidden"><div id="UniqueID-1">
 ... inline content here ...
</div></div>

For those of us not caught up with the class (or even enrolled LOL),
is “inline content here” the url I want to open?

If you want it to open automaticaly on page load, use:

<a href="#UniqueID-1" class="fancybox-auto"></a>

And since this is the only instance I an trying this, I literally use =”#UniqueID-1 ?

Or should I be replacing some info here?

Thank you!