Is it possible to load a landing page with a fancybox iframe opened up onload?

  • 24 July 2012
  • 6 replies
  • 35 views
Michelle_Moore

I have a landing page which currently uses the fancybox script on a button to open up a catalogue flipbook.
I’d like to link from an e-shot campaign directly to read the flipbook. I thought if I cloned my page I might be able to trigger the fancybox script to open the flipbook ‘onload’ on this page clone, but is this possible?

6 replies

WestgateOwnersReward

Yes you can. You’ll need to simulate the click using javascript. This is somewhat easy for a javascript developer, but explaining it to someone that doesn’t know javascript or jQuery is hard to do. I’ll give it a go though… In the edit area of your page, select the button, so you can see it’s properties on the right-hand side. Locate the ID property. The code below will assume that the button ID is “my-button-7” although it will definitely be something else. Just replace “my-button-7” with your button ID in the code below.

jQuery.(document).ready(function(){ 

  jQuery('#my-button-7').click(); });

The code above should be added as a script, and placed before the closing body tag.

Michelle_Moore

Thanks for the suggestion but it doesn’t seem to work with my set up.

I think I have confused matters by describing my trigger as a button - it’s not actually a button it is an image.

The original FancyBox script is triggered by having a style applied to the a tag - so my ‘button’ is actually embedded as a custom html element:

[![]([MyImage] border=)]([MyLink])

I inserted:

jQuery.(document).ready(function(){   
jQuery('#flipbutton').click();   
});

Before the end body tag but it’s not doing anything.

WestgateOwnersReward

You need to put the ID on the anchor (“a” stands for “anchor”, in case you didn’t know), not the image.

[![]([MyImage])]([MyLink])   

jQuery.(document).ready(function(){   
jQuery('#flipbutton-link').click();   
});
Michelle_Moore

No luck i’m afraid. Even with the id on the anchor tag I’m still getting nothing.
Thanks for trying!

J

So, you’re trying to get your fancybox to launch onload (as soon as a visitor loads the page)?

Try something like this:

  1. Create a HIDDEN anchor with something like ``````
  2. Add this as a script located in the header:
  $(document).ready(function() { <br />
      $("#hidden_link").fancybox().trigger('click'); <br />
  }); <br /> </script>```   
 
I don't have fancybox on any of our unbounce pages, but maybe this will work for you.
Elysium_Nguyen

the solution provided doesn’t work on my end. specially the last one with the fancybox function. the error log says there is no fancybox function. but also the click solution is not triggering.
instead, this works for me:

jQuery.(document).ready(function(){

  jQuery('#my-button-7')[0].click(); });

Reply


Terms & ConditionsCookie settings