WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Fancybox inline content? (4 posts)

  1. madguy000
    Member
    Posted 3 years ago #

    would it be possible to use Fancybox-iframe for inline HTMl content? Ideally the inline content can be hidden behind the fancybox enabled link. Would that be a feature worth developing?

  2. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    It is already in development...

    Take a look at http://test.4visions.nl/easy-fancybox-sandbox, close the auto-popup overlay scroll down to Features in the development release and click the link at point 3.

    This is actually already possible in the current version, with some extra CSS rule or even without it if you can give a div in post content the tag style="display:hidden" without WP KSES filtering that out again.

    What you need is:
    1. a hidden div wrapping a div with ID containing your inline content
    2. a link to trigger that inline content to open in an overlay

    First an example using style="display:hidden":

    <a href="#InlineDivID" class="fancybox">Link to open inlince content</a>
    
    <div style="display:hidden">
    <div id="InlineDivID" style="width:400px;height:400px">your inline content</div>
    </div>

    And here is what you could do if you find that the tag style="display:hidden" gets filtered out after saving the post/page...
    Add to your theme stylesheet (style.css) a new line with:

    .fancybox-hidden{display:none}

    And in your post/page content:

    <a href="#InlineDivID" class="fancybox">Link to open inlince content</a>
    
    <div class="fancybox-hidden">
    <div id="InlineDivID" style="width:400px;height:400px">your inline content</div>
    </div>

    These are just examples but it should give you an idea what you need. Note that the div with your inline content has a style="width:400px;height:400px". This will tell FancyBox what size overlay window it should use. If you leave that out, the size will revert to the default width on Settings > Media > FancyBox and if you only use style="width:...px" then it will use that width and automatically scale the height to the inline content.

    Good luck! :)

  3. madguy000
    Member
    Posted 3 years ago #

    amazing! but what happens if the "id" in the <div id="xxx"> gets filtered out as well?

  4. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    It does? Hmmm... Then you're bogged. I don't think FancyBox can do it without ID :(

    Try to edit your post with the Rich Text Editor (TinyMCE) switched OFF or only use the HTML tab instead of Visual. Maybe it's TinyMCE that strips ID stuff... Would not surprise me a bit, but I don't know since I never use the rich text editing mode.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic