Support » Plugin: Easy FancyBox » Size for inline content

  • Resolved staffanlandin


    Hi great plugin. Why can’t I set the size for the fancybox when using inline content?

    I want to show the same content on a page as inline content in a fancy box. When I do that it is impossible to get set the size right. Why can’t I sue this tag:

    <a class="fancybox {width:600,height:400}" href="#reader" >LINK TO CONTENT</a>
    <div id="reader">INLINE CONTENT. Lorem ipsum dolor sit amet (...)</div>

    I have seen your solution on setting a size for the “reader-div” which could work if it weren’t for the the fact that I would like the content on my page to follow my templates width of 400p but when I open in a fanxybox to be displayed at 600p

    If I set the “reader-div” to 600p it will overflow the normal page, see here:

    How come I cane set size for IFRAME, images and swf but not for Inline contents, what do i do wrong?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Michael


    Forum Moderator

    are you possibly trying to do:

    <a class="fancybox style="width:600px;height:400px;" href="#reader" >LINK TO CONTENT</a>

    Yes probably but that line will only result in a box 90% of the page, not 600px wide.





    Forum Moderator

    i now understand what you are trying to achieve – this won’t work with in line styles.

    have you tried to change the settings under:

    dashboard -> settings -> media -> fancybox: window size

    although this will probably change the settings globally.

    Thanks, I figured that would do it, but no. No matter what I set as window size, the box keeps the same size, I can’t change the border size in there either. In those sittings there are similar window size settings for swf-files this works when showing flash-content, but for inline contents I can’t seem to change it.

    Now for example, the settings says 200 wide 100 height and 10 border. See for yourself:

    I read somewhere that the fancybox class doesn’t allow changed size settings, why I can’t for my life understand. Images, iframe, and flash works. There must be a way, no?

    To simplify what I want: When I click on LINK TO CONTENT in the example above, I want the box to open with 600px width.

    (I use Easy Fancybox plugin. I have upgraded to the latest WP-version and use Barista 1.0.5 Theme.)

    Plugin Author RavanH


    Hi Staffan, if you download the latest development version, you will have a new option ‘Try to adjust size to inline/html content.’ which is checked by default but if you uncheck it, you will be able to set dimensions via the {width:600,height:400} jquery.metadata method for inline content too.

    But this will have an unexpected disadvantage: because you are using inline content that is normally already visible on your page to pop up in an overlay, giving it different dimensions will result in the inline content keeping those dimension after closing the overlay. FancyBox works like this with inline content. It takes the content and moves it to the overlay wrapper. It will visibly disappear from the background to the overlay foreground. Then, on closing the overlay, the inline content will be put back in its original location. But this time with new dimensions… Likely breaking your page layout.

    What’s the point of popping up content that’s already visible in an overlay again anyway?

    FancyBox works best (read: is designed for) with inline content that is normally not visible on the page, wrapped in a hidden div. Like that, you can give the inline content div (inside the hidden div) any dimensions you like and FancyBox will adapt accordingly.

    Create link and (hidden) inline content like this:

    <a class="fancybox" href="#reader" >LINK TO CONTENT</a>
    <div class="fancybox-hidden">
    <div id="reader" style="width:600,height:400">INLINE CONTENT. Lorem ipsum dolor sit amet (...)</div>

    Hope that clears things up a bit 😉

    Hi RavanH, thanks for your answer (and to the same question on the plugin site).

    I’m sorry to hear that you can see no obvious solution. The point of opening the same content is to get a more readable format very much like the new reader mode in Safari. On the site that I am working with there is to many menus and banners that the customer need to have, however they are interfering with the clarity and focus I want to have on the pages I am working with.

    I therefore would like to be able to have a small icon for “Reader mode” next to “Print-mode” and since I already use the fancy box plugin for special Flash-features on the site I thought it would be neat to use it for this too.

    Are you sure you can’t think of a way around this, I am sure that more people that me would like to have this.

    The site I am working with is the Swdedish National site for the Millennium Development Goals, so if you could help me find a way, you would also do a good cause a big favor 🙂

    Ps. I also noted that I can’t scroll with my trackpad inside the popup, is that my fault? In that case using fancy box as readers mode might not be such a good idea.

    Plugin Author RavanH


    hi Staffan, a possible solution would be to generate the content twice. Once visible on the page and a copy inside a hidden div.

    You would need to edit your page.php and/or single.php. I’m not sure if simply adding a second output like this would work:

    <div style="display:none"><div id="reader" style="width:600;height:400;"><?php the_content(); ?><div></div>

    If that does not work, you need to use $content = get_the_content(); to be able to generate the output twice.

    See for parameters like $strip_teaser which might allow you to ‘strip the part before the <!-- more --> quicktag in the second (hidden) output.

    Just to give you some ideas to work with 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Size for inline content’ is closed to new replies.