Posted 1 year ago #
I can't for the life of me figure out how to have Easy FancyBox open up a web link in an iFrame via the main menu. In other words making a custom menu link open up as an iFrame with Easy FancyBox.
I thought via the "CSS Class" option would do the trick, but nope.
Any suggestions?
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.
Posted 1 year ago #
Yea, I ended up having to hardcode it in for it to work! Which is a bit of a bummer, but its still pretty damn cool!
Thanks for the quick response man!
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!
UPDATE: it is in the development release!
See a demo on http://test.4visions.nl/easy-fancybox-sandbox (click the menu item "FancyBox iFrame")
Posted 1 year ago #
Awesome! I'll test it out! Thanks for the work on this!! So great.
Posted 1 year ago #
Wow, works great! At least on the few themes I tested it on!! Great work man!
Posted 1 year ago #
Awesome! This is JUST what I was looking for!
Thank you so very much!
this feature is now in the main/stable release :)
Posted 1 year ago #
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!
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>Then place a link anywhere you want on the same page (but not inside the hidden content div) to open that inline content in a FancyBox overlay:
<a href="#UniqueID-1" class="fancybox">Read me</a>If you want it to open automaticaly on page load, use:
<a href="#UniqueID-1" class="fancybox-auto"></a>Hope that helps :)
Posted 1 year ago #
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!
I don't know about that theme but if it is coded correctly, it should allow the plugin to take care of all the header script stuff for you. you need only to edit post, page or text widget content... put the code in any of those places and you should be fine.
Don't worry about 3.0.5 the plugin is tested on 3.1 already.
There is nothing wrong with those other plugins. But as far as I know they concentrate on the display of images and no other media like inline, iframe, PDF or flash (video) that FancyBox can handle these days.
Posted 1 year ago #
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" 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!
sorry, i have NO idea what you are talking about... but as long aas you have it working :)
however, whatch out with mixing scripts that are meant to do the same thing like fancybox and thickbox ! be sure to stick to just ONE and remove anything that is left from the other...
Posted 1 year ago #
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!
Hi goldenimage, what you are quoting there is about inline content (where you can replace the ... inline content here ... with anything like text or html) not about anyting that needs an URL like an image or html files...
And no, you do not need to use UniqueID-1 literally. Use any ID you like as long as it is unique (get it? ;) )
Posted 1 year ago #
Thanks for the quick reply. I am trying to have a page from another url appear on page load.
I need a remedial lession because this doesn't work:
<div class="fancybox-hidden"><div id="UniqueID-711">
http://anotherdomain.com/schedules</div> </div>
<a href="#UniqueID-711" class="fancybox-auto"></a>I don't know why ">" is popping up in there....
You are confusing inline content (a div or anything else on the page itself) with iframe content (another page).
Dump that div and just use the link. Make it look like this:
<a href="http://anotherdomain.com/schedules" id="fancybox-auto" class="fancybox-iframe"></a>
Posted 1 year ago #
<a href="http://anotherdomain.com/schedules" id="fancybox-auto" class="fancybox-iframe"></a>
This is the only code on my page. Obviously, I replaced anotherdomain.com with the correct url. It isn't working.
Edited to add: would it make any difference that I am previewing a draft version?
Make sure the option "Auto-trigger" is set to "Manual" on Settings > Media under FancyBox / Global settings.
Posted 1 year ago #
RavanH,
Could you please pass the code on you used to get the iframe linked directly from custom menu as you have on your test site? I have tried everything and cannot get it to work
See a demo on http://test.4visions.nl/easy-fancybox-sandbox (click the menu item "FancyBox iFrame")
Hi P,
It's not code, it's a trick:
1. Enable the iFrame option on your Settings > Media page
2. Go to your Appearance > Menus page and open the tab Screen options in the top right hand corner. Enable 'CSS Classes' and close the panel again.
3. Open the link in your menu for editing and notice the new field 'CSS Classes (optional)' there. Fill it with fancybox-iframe and hit Save Menu.
Now, that link will be opened in FancyBox :)
Posted 1 year ago #
perfect -worked like a charm!! Thanks
This topic has been closed to new replies.
