WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
How to create a pop-up link like the one on the demo page (8 posts)

  1. cloudfe
    Member
    Posted 2 years ago #

    Here's the demo page of Easy Fancybox: http://demo.4visions.nl/easy-fancybox-sandbox/
    At the very beginning there's a pop-up link that show in a pop-up window the first paragraph of the page. Unfortunately it doesn't say how to do that.

    Could someone help please?

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

  2. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    On http://wordpress.org/extend/plugins/easy-fancybox/faq/ you can find the usual instructions under "Can I display INLINE content in a FancyBox overlay ?" and (just below that) "Can I make an image or hidden content to pop up in FancyBox on page load?" about showing inline content in FancyBox and making it pop up on page load.

    What you are seeing on the demo page is a combination of the two with this exception: the wrapping <div style="display:none" class="fancybox-hidden" is not used so that the content is also visible on the page itself.

    Hope that clears it up :)

  3. cloudfe
    Member
    Posted 2 years ago #

    It works on Firefox, but not on Chrome...
    Thinking about it, an iFrame would be better. But I don't understand the instructions: how to add a class to a link? Can I still decide the portion of the frame?

  4. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    It works on Firefox, but not on Chrome...

    The auto popup on http://demo.4visions.nl/easy-fancybox-sandbox/ should work in Chrome just fine...

    Thinking about it, an iFrame would be better. But I don't understand the instructions: how to add a class to a link?

    Adding a class attribute to a normal text link in WordPress is not possible when editing your post in the View tab. You'll have to switch to the HTML tab. Sorry about that, it's just the way it is in WordPress currently. I hope that will change in a future version.

    When you have a thumbnail image that links to its larger version (for example, it can link to anything really) then you can select the thumbnail in the View tab and click the Edit icon. Choose the Advanced tab in the dialog window and scroll down to the link attributes section. There you can ad a class name to the link.

    Can I still decide the portion of the frame?

    Not sure what you mean. An iframe showing only part of the linked page content? That's not possible with modern day HTML.

    You could link with a hash tag to an anchor tag (with name attribute) on the linked page and then limit the size of FancyBox so that the rest of the page outside the frame...

  5. cloudfe
    Member
    Posted 2 years ago #

    Now I have this:
    <a class="fancybox-iframe" href="http://grazieadiosonoateo.org/title/"><img class="size-full wp-image-1712 alignnone" title="tab Newsletter" src="http://grazieadiosonoateo.org/wp-content/uploads/2012/06/tab-Newsletter.jpg" alt="" width="150" height="80" /></a>
    and just a white windows appears (in Firefox. In Chrome nothing happens at all...).

  6. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    OK, so if I understand this correctly, you have this image on http://grazieadiosonoateo.org/title/ that is linked to and should open http://grazieadiosonoateo.org/title/ inside fancybox... As far as I can see, FancyBox tries to do this but it is confusing the browser. It's a browser issue.

    And why would you want to show the same page embedded in an iframe inside itself anyway? I see the logic in a browser skipping that content.

    Link to any other page (like http://grazieadiosonoateo.org/contatti/ or even outside your wordpress site) and it will work just fine. But if you want to include a form that is inside the same page, you are better off displaying it as Inline content in FancyBox.

  7. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    For (test) example:
    <a class="fancybox" href="#comments"><img class="size-full wp-image-1712 alignnone" title="tab Newsletter" src="http://grazieadiosonoateo.org/wp-content/uploads/2012/06/tab-Newsletter.jpg" alt="" width="150" height="80" /></a>

  8. cloudfe
    Member
    Posted 2 years ago #

    I was using that post as a test, the iframe will be on the homepage.
    But you were right: as soon as I put it there, it worked (also in Chrome).

    Thank you very much!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic