WordPress.org

Support

Support » Plugins and Hacks » Easy FancyBox » [Resolved] Using Easy FancyBox to open iFrame from the Main Menu

[Resolved] Using Easy FancyBox to open iFrame from the Main Menu

Viewing 15 replies - 1 through 15 (of 23 total)
  • Plugin Author RavanH

    @ravanh

    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.

    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!

    Plugin Author RavanH

    @ravanh

    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!

    Plugin Author RavanH

    @ravanh

    UPDATE: it is in the development release!

    See a demo on http://test.4visions.nl/easy-fancybox-sandbox (click the menu item “FancyBox iFrame”)

    Awesome! I’ll test it out! Thanks for the work on this!! So great.

    Wow, works great! At least on the few themes I tested it on!! Great work man!

    Awesome! This is JUST what I was looking for!

    Thank you so very much!

    Plugin Author RavanH

    @ravanh

    this feature is now in the main/stable release 🙂

    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!

    Plugin Author RavanH

    @ravanh

    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 🙂

    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!

    Plugin Author RavanH

    @ravanh

    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.

    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!

    Plugin Author RavanH

    @ravanh

    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…

    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!

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘[Resolved] Using Easy FancyBox to open iFrame from the Main Menu’ is closed to new replies.
Skip to toolbar