WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
Easy FancyBox Auto-Popup Issues (2 posts)

  1. mintertweed
    Member
    Posted 9 months ago #

    'Allo, I'm having several issues using the auto-popup feature. Here is my website and here is the code I am using:

    <a id="fancybox-auto" href="#fancyboxID-1" class="fancybox-inline"></a>
    <div style="display:none" class="fancybox-hidden">
    	<div id="fancyboxID-1" class="hentry" style="width: 300px; height: 100px; overflow: visible;">
    		<div class="fb-like" data-href="http://www.facebook.com/feelgoodcandy/" data-send="true" data-width="450" data-show-faces="true"></div>
    	</div>
    </div>

    Now, it's popping up just fine (that's not the problem), but I have two issues I need fixed. This is the CSS I have applied on anchor tags for my website:

    a {
    	border-bottom: 1px dashed;
    }

    Since it is applied to all anchor tags, the "X" button in Easy FancyBox also has a dotted white line below it on the auto-popup. What do I need to target so I can remove the one pixel dashed line from the "X" button and still keep it applied to all of my other anchor tags?

    The other issue has something to do with overflow: hidden. Somewhere in the Easy FancyBox code, overflow: hidden is applied and this is causing some issues with what I want to do with the auto-popup. Basically, after liking Feel Good Candy, I'd like the Facebook comment box to go beyond the FancyBox. Also, I wanted to add an image in the content of the auto-popup that goes beyond the FancyBox as well.

    Any and all suggestions will be greatly appreciated. Cheers!

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

  2. mintertweed
    Member
    Posted 9 months ago #

    I changed the location of the auto-popup, here, and the code is a little different now:

    <a id="fancybox-auto" href="#fancyboxID-1" class="fancybox-inline"></a>
    <div style="display:none" class="fancybox-hidden">
    	<div id="fancyboxID-1" class="hentry" style="width: 368px; height: 220px;">
    		<div class="fb-like-box" data-href="https://www.facebook.com/feelgoodcandy/" data-width="393" data-show-faces="true" data-stream="false" data-show-border="true" data-header="false"></div>
    	</div>
    </div>

    I still have the issue with the "X" button, but there is no Facebook comment box with the new code.

Reply

You must log in to post.

About this Plugin

About this Topic