WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] iFrame from menu item with specific width (5 posts)

  1. Arathol
    Member
    Posted 5 months ago #

    Hi,

    I am trying to use an iframe to load a site directly from a menu item.
    The menu is built using the wordpress menu system.

    I have set the class on the menu item to "fancybox-iframe {width:1000}" (without quotes)
    But when i save the menu, it then cleans up the class names and removes the braces and colon (fancybox-iframe width1000)

    How can i get the size of this iframe the way i want it?
    This is the site... http://www.theharrington.com/prana/
    The link is the "schedule" menu item on the left menu.
    This is the code

    <li id="menu-item-2310" class="fancybox-iframe width1000 menu-item menu-item-type-custom menu-item-object-custom menu-item-2310">
        <a href="http://clients.mindbodyonline.com/ws.asp?studioid=49435&stype=-7" onclick="javascript:_gaq.push(['_trackEvent','outbound-menu','http://clients.mindbodyonline.com']);">Schedule</a>
    </li>

    Any ideas? or does this have to be done with javascript?
    https://wordpress.org/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 5 months ago #

    Hi Arathol, this 'cleaning up' by WordPress cannot be prevented, I'm afraid. If you go to Settings > Media then you can change the width to 1000 (just the number, no %) under the iFrame settings. It will restrict the frame width to a 1000px.

  3. Arathol
    Member
    Posted 5 months ago #

    Thanks for the reply RavanH.

    I've set it to 1000 but it doesn't seem to make any difference on an iPad (iPad 2 fyi).
    Also, i suppose this targets ALL iFrames on the site.

    Is it possible to use a javascript snippet to target just this iFrame and set the width to minimum 1000px wide?

  4. RavanH
    Member
    Plugin Author

    Posted 5 months ago #

    Also, i suppose this targets ALL iFrames on the site.

    Yes, except those that are given different size parameters via the metadata method using {width:...}

    Is it possible to use a javascript snippet to target just this iFrame...

    In theory, yes.

    ...and set the width to minimum 1000px wide?

    Switch the window Autoscale option off.

    __
    By the way, you are loading two different versions of the jQuery library now. It's not causing any errors at this point but it seems a bit silly. Remove the line

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    And move the lines

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.theharrington.com/v4/wp-content/themes/harrington/assets/js/header.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

    to right after the <?php wp_header(); ?> ... Or do it The Right Way (TM) as described on http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  5. Arathol
    Member
    Posted 5 months ago #

    Haha, thanks. Yep, i did notice that already. (about the jquery)
    Still optimising the site.
    Due to time constraints it had to go live like this.

    If i turn that autoscale option off, then all the images will not open correctly though, so i cant do that.

    Ill have to come up with another option for now that doesn't use fancybox.
    or figure out how to do this with javascript.

    Thanks

Reply

You must log in to post.

About this Plugin

About this Topic