Delay opening

[Jonathan Canfield]

How can I delay the opening of a fancybox?
Say for example 1 or 2 seconds.

[JFK]

setTimeout( function() {$('.fancybox').fancybox().trigger('click'); },5000); // 5 seconds

you can put this inside a function and call it when you need it

[Chris King]

Is this right? To delay fancybox? 

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 

jQuery(document).ready(function() {

$("#fancybox-overlay").unbind();

$.fancybox(

{

        'autoDimensions' : false,

        'closeBtn' : false,

'width'         : '600',

'height'         : '450',

'transitionIn' : 'elastic',

'transitionOut' : 'none',

'border' : '0',

'href' : 'blank.html',

}

);

setTimeout( function() {$('.fancybox').fancybox().trigger('click'); },5000); // 5 seconds

});

</SCRIPT>

[JFK]

do you mean on page load of after click?

[Chris King]

on page load.

I am trying to get the fancy box to popup after 10 seconds.

That is the coding that I have. I don't know what to add. I tried for a long time...

[JFK]

setTimeout( function() {$('.fancybox').trigger('click'); },20000);

[Chris King]

It doesn't work.

I have fancybox 1.3.4 and I use this script to activate fancybox as a popup.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 

jQuery(document).ready(function() {

$("#fancybox-overlay").unbind();

$.fancybox(

{

         'autoDimensions' : false,

         'closeBtn' : false,

'width'          : '600',

'height'         : '450',

'transitionIn' : 'none',

'transitionOut' : 'none',

'border' : '0',

'href' : 'blank.html',

}

);

});

</SCRIPT>

where would I put that code that you just gave me?

[RavanH]

Try:

jQuery(document).ready(function() {
$('#fbpopup1').fancybox(

         {
         'autoDimensions' : false,
         'closeBtn' : false,
         'width'          : '600',
         'height'         : '450',
         'transitionIn' : 'none',
         'transitionOut' : 'none',
         'border' : '0'
         }

     ).delay(2000).trigger('click');
});

And create a link like this

<a href="blank.html" id="fbpopup1"></a>

By the way, what's that line:

$("#fancybox-overlay").unbind();

for?

Op zaterdag 22 december 2012 18:50:55 UTC+1 schreef Chris King het volgende:

[JFK]

OK, I just noticed you are calling the manual method so there is the list of things you need to fix in your script:

- use lowercase in your html tags ... <SCRIPT TYPE= ...> should be <script type= ....>

- don't need a trigger click

- if you use jQuery(document).ready() then don't use "$" inside your methods but "jQuery" instead.

- Boolean (true/false) as well as integers go without quotes so 'width' : '600', should be 'width' : 600 for instance

- closeBtn is not a valid option for v1.3.4 but v2.x

- border is not a fancybox option for any version

- if you are opening external pages 'href': 'blank.html', as in your example, then you need to specify 'type' : 'iframe',

...so your full code should look like (I commented out unnecessary lines) :

<script type="text/javascript">
jQuery(document).ready(function() {

    // $("#fancybox-overlay").unbind(); // No idea what you use this for
    setTimeout(function() {
        jQuery("#fancybox-overlay").unbind();
        jQuery.fancybox({
            'autoDimensions': false,
        //  'closeBtn': false, // not valid for v1.3.4
            'width': 600,
            'height': 450,

            'transitionIn': 'none',
            'transitionOut': 'none',

        //  'border': 0, // not a fancybox option in any version
            'type' : 'iframe',
            'href': 'http://fancybox.net' // last option should not have trailing comma
        })
    }, 5000); // 5 seconds
});
</script>

A prepared a working demo that opens a html page after 5 seconds on page load so you don't have to say it doesn't work ... but first open fancybox.net in your browser so jsfiddle can cache fancybox scripts

Here is the DEMO : http://jsfiddle.net/APCZq/

[Valdet SHEHU]

JFK,

I would also like to ask you about the delay in loading the fancybox popup.

Below is the code that I use to show fancybox popup on page load. I tried your method above (from jsfiddle) but it does not work.

<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}


  function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}


jQuery(document).ready(function() {
    var show = getCookie("newsletter");
       if(show==null || show=="") {
          $.fancybox(
                  {
                        'type'                        : 'iframe',
                        'href'                        : '/popup/',
                        'autoDimensions'        : false,
                        'width'                        : 475,
                        'height'                : 250,

                        'transitionIn'          : 'none',
                        'transitionOut'          : 'none'
                  }

        );
        setCookie('newsletter','1',1);
       }
  });
  </script>

On current settings, tthefancybox shows up immediately on the pageload.

Could you please show me where or how should I use the setTimeout variable in order to show the popup after 5 seconds.

Additionally, do you know if there's a way if I can show the fancybox popup not on first pageview but rather on second/third pageview?

Let me know if you need the URL.

Many many thanks.

Val.

[JFK]

check http://stackoverflow.com/a/8305703/1055987