Auto Popup on home page – Pro ver.

Hi @webworks, for Pro support you can go to the Pro forums on https://premium.status301.net/support/forum/easy-fancybox-pro/ ??

That said, I’ll try to help you here because this is something that can help the free version users too…

The code snippet you gave above is correct except for two things:

1. It is missing the “trigger” link that you probably removed, expecting it to not be needed anymore with the auto-popup. But that was a false assumption ?? I’ll explain below.

2. The id="fancybox-auto" does nothing there on the hidden content wrapper. It needs to be on a trigger link.

I’ll give two examples, the first with a visible trigger (link or button) and the second with an invisible one.

<a id="fancybox-auto" class="fancybox-inline button">Let's stay in touch!</a> 

<div class="fancybox-hidden" style="display: none;">
<div class="hentry" style="width: 460px; max-width: 100%;">
<h1 style="text-align: center;"><strong><span style="font-size: 26pt; color: #ff00ff;">VIP</span></strong></h1>
<p style="text-align: center;"><span style="font-size: 16pt;">Stay connected to us for all the latest happenings</span></p>
[gravityform id="1" title="false" description="false"]

</div>
</div>

The trigger link needs to remain in the source code for the light box to fire. To hide it from sight, you can do two things: remove the anchor text (but this may result in the post editor removing it completely) or hide it with the “fancybox-hidden” class.

<a id="fancybox-auto" class="fancybox-inline fancybox-hidden">Let's stay in touch!</a> 

<div class="fancybox-hidden" style="display: none;">
<div class="hentry" style="width: 460px; max-width: 100%;">
<h1 style="text-align: center;"><strong><span style="font-size: 26pt; color: #ff00ff;">VIP</span></strong></h1>
<p style="text-align: center;"><span style="font-size: 16pt;">Stay connected to us for all the latest happenings</span></p>
[gravityform id="1" title="false" description="false"]

</div>
</div>

Hope this helps ??

Oww, I now notice that you do have a visual button on your site, called “Join VIP List” but it’s made with Visual Composer. Is it possible to set a custom class name and ID to that link? If so, it depends on which element that class and ID?are attributed to (the actual link element or one of the nested or wrapping elements) if that is going to work at all.

If it doesn’t, you might want to try replacing the VC?button block with a HTML block (does Visual Composer have that?) and try pasting this adapted copy:

<a id="fancybox-auto" class="fancybox-inline ubtn-link ult-adjust-bottom-margin ubtn-center ubtn-custom " href="#vip" ><button type="button" id="ubtn-8991"  class="ubtn ult-adjust-bottom-margin ult-responsive ubtn-custom ubtn-fade-bg  ulta-push  ubtn-center   tooltip-5bfc4b8316189"  data-hover="#ffffff" data-border-color="#636363" data-bg="#cb2377" data-hover-bg="#984b9d" data-border-hover="#636363" data-shadow-hover="" data-shadow-click="none" data-shadow="" data-shd-shadow=""  data-ultimate-target='#ubtn-8991'  data-responsive-json-new='{"font-size":"desktop:16px;","line-height":""}'  style="font-family:'Josefin Sans';font-weight:normal;width:200px;min-height:62px;padding:7px 7px;border-radius:0px;border-width:1px;border-color:#636363;border-style:double;background: #cb2377;color: #ffffff;"><span class="ubtn-hover" style="background-color:#984b9d"></span><span class="ubtn-data ubtn-text " >JOIN VIP LIST</span></button></a></div>

Let me know ??

I’m afraid I’m not getting either to work ??

Whether I have fancy-box-hidden class or not, wordpress keeps putting this ahead of the link. (I’m not sure if that’s the cause)

<a id="fancybox-auto" class="fancybox-inline fancybox-hidden"></a>Let's stay in touch!

Can you see it on the link, and what might be holding it up? I was sure to clear the server side cache, and viewed incognito….also another browser.

I tried removing any possible optimization, but it didn’t fix it
<!--noptimize-->

just noticed your add’l post – fingers crossed – stay tuned –

VC Options are:

Extra class
Rel Attribute
Advanced on click action

I’ll see if I can place the right things in the right place. In the meantime, if you have answers for each of those 3 I’ll be so very grateful ??

(I don’t see an ID – that’s unusual because most VC features have ID option)

• This reply was modified 6 years, 3 months ago by webworks.

I used the class (on the existing button) and fancybox-auto in Rel Attribute and it didn’t work.

I don’t understand why the regular link is not working. Because I’ve been successful with linking to another page (opens in lightbox). Maybe I can try it that way and the auto pop-up will work. I’ll stand by first and see if you have any other ideas.

BTW – The button I was going to leave as an anchor link that goes to the bottom. They want to keep the form at the bottom, but also want auto popup.

Thanks so much for your help.

I added a simple text link at the bottom. Then I created a separate page and used the iframe method. The auto works for that as well. I was able to get the size we wanted too.

I never could get the other methods working – but as long as the iframe works, I’m good with it ??

Again – many thanks.

• This reply was modified 6 years, 3 months ago by webworks.

Hi, just checked the site and saw you made it work. Excellent ??