www.webdeveloper.com
Results 1 to 3 of 3

Thread: Fancybox Timeout on 1 box only

  1. #1
    Join Date
    Dec 2008
    Posts
    130

    Fancybox Timeout on 1 box only

    I have one fancybox message that launches on page load. I also want this message to timeout after so many seconds. I use the below script the launch on page load works but the timeout also apply to all the other fancybox that I am using to hold forms. Is it posible to make the timeout only apply to just the fancybox that launches on page load?
    To launch on page load
    Code:
    jQuery(document).ready(function ($) {
    $.fancybox({
    href: "message.png", 
        beforeShow: function(){
    $(".fancybox-skin").css("backgroundColor","transparent");
         },
    afterLoad: function(){
     setTimeout( function() {$.fancybox.close(); },10000); 
    },
    
    });});

    Script to launch all fancybox images, forms, etc.

    HTML Code:
    $(".fancybox").fancybox({
        afterLoad: function () {
            if (this.type == "iframe") {
                this.width = this.element.data("width");
                this.height = this.element.data("height");
            };}});
    iframe: {
            }

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Was reading the fancybox documentation, but couldn't confirm what I thought would be possible (http://fancyapps.com/fancybox/#docs). So here is my shot in the dark, as I've never used any of these JS tools :P

    If you inserted the following code, what does the console show?
    Code:
    jQuery(document).ready(function ($)
    {
    	$.fancybox({
    		href       : "message.png", 
    		beforeShow : function()
    		{
    			$(".fancybox-skin").css("backgroundColor","transparent");
    		},
    		afterLoad  : function()
    		{
    			console.log(this);
    			setTimeout(function() 
    			{
    				$.fancybox.close(); 
    			}, 10000); 
    		}
    	});
    });
    If by some miracle that it's the current fancybox instance, and depending on what functionality they pass, you could hypothetically do this:
    Code:
    jQuery(document).ready(function ($)
    {
    	$.fancybox({
    		href       : "message.png", 
    		beforeShow : function()
    		{
    			$(".fancybox-skin").css("backgroundColor","transparent");
    		},
    		afterLoad  : function()
    		{
    			var self = this;
    			setTimeout(function() 
    			{
    				self.close(); 
    			}, 10000); 
    		}
    	});
    });
    Depending on if I missed the mark the first time and by some chance they pass functionality back from another point, here is the only other place I can think of:
    Code:
    jQuery(document).ready(function ($)
    {
    	var self = $.fancybox({
    		href       : "message.png", 
    		beforeShow : function()
    		{
    			$(".fancybox-skin").css("backgroundColor","transparent");
    		},
    		afterLoad  : function()
    		{
    			setTimeout(function() 
    			{
    				self.close(); 
    			}, 10000); 
    		}
    	});
    });
    Otherwise, sorry :P
    Last edited by bionoid; 04-20-2014 at 08:17 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Dec 2008
    Posts
    130
    That doesn't work but thx for trying. I just found out that it was continuing the time. As soon as the time (ie. 20 sec) runs out it doesn't timeout on the other box. So it will be fine for me.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles