WordPress.org

Forums

Easy FancyBox
[resolved] Using Easy FancyBox to open iFrame from the Main Menu (24 posts)

  1. sethneal
    Member
    Posted 4 years 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?

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    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.

  3. sethneal
    Member
    Posted 4 years 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!

  4. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    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!

  5. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    UPDATE: it is in the development release!

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

  6. sethneal
    Member
    Posted 4 years ago #

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

  7. sethneal
    Member
    Posted 4 years ago #

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

  8. sweetrobot
    Member
    Posted 4 years ago #

    Awesome! This is JUST what I was looking for!

    Thank you so very much!

  9. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    this feature is now in the main/stable release :)

  10. YOUAREtehSCENE
    Member
    Posted 4 years 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!

  11. RavanH
    Member
    Plugin Author

    Posted 4 years 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>

    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 :)

  12. YOUAREtehSCENE
    Member
    Posted 4 years 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!

  13. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    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.

  14. YOUAREtehSCENE
    Member
    Posted 4 years 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!

  15. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    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...

  16. goldenimage
    Member
    Posted 4 years 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!

  17. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    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? ;) )

  18. goldenimage
    Member
    Posted 4 years 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 "&gt" is popping up in there....

  19. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    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>

  20. goldenimage
    Member
    Posted 4 years 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?

  21. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    Make sure the option "Auto-trigger" is set to "Manual" on Settings > Media under FancyBox / Global settings.

  22. pwhitelaw
    Member
    Posted 4 years 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")

  23. RavanH
    Member
    Plugin Author

    Posted 4 years ago #

    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 :)

  24. pwhitelaw
    Member
    Posted 4 years ago #

    perfect -worked like a charm!! Thanks

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic