Close lightbox

[Billywiz]

I have a page that opens in a lightbox that I want to automatically close after a period of time (5 secs)
is there a parameter I can add to the code below to make that happen or is there something in page properties that I need to action.

'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':2000,
'speedOut':1000,
'overlayShow':true,
'overlayColor':'#000000',
'width':360,
'height':650

Cheers

[BaconFries]

What lightbox are you using? Have you tried using a event timer? The following url describes how to implement if using fanybox.
https://stackoverflow.com/questions/944 ... -x-seconds

[Billywiz]

Thanks BF, I am using Fancybox.
Do I use the timer and set an event within the timer and if so which one, or set an event in page properties and again which event would close the page after a certain time

Cheers

[Billywiz]

Anybody out there have a solution ?
Let me explain what I'm trying to achieve. On my main paige I have a link to a basic survey form that opens in a lightbox, when a visitor completes the survey either a succes or failure page opens within that lightbox if it is the success page then I would like that to close the lightbox/page after a certain amount of time but each event I have tried doesn't do this. I tried placing a timer on the success page with an event that closes the window through the javascript option window.close()., but no luck.
Is there something I can do within web builder that will close the lightbox from the success page.

Cheers

[Pablo]

Maybe this will be helpful?
https://stackoverflow.com/questions/182 ... n-fancybox

[Billywiz]

Thanks Pablo, it looks like those are all click functions and I want it to close the success page when it opens on a set time of 4 seconds.
Also coding and its placement are not any of my strong points and thought there may be a solution within web builder.

On edit:- I tried this javascript within the timer event, no luck. window.setTimeout(function(){$.fancybox.close()},10);

Cheers

[Pablo]

In that case, I also do not know how to do this.

[rogerl]

If you are using the built in fancybox then just putting your settings in the "lightbox", "fancybox", settings button should suffice then add the last bit. As far as I can see BaconFries has already given you direction, you just need to apply in a way that works, which is often the problem. No I haven't tested it but experimentation gets results especially with fancybox.

Code: Select all

'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':2000,
'speedOut':1000,
'overlayShow':true,
'overlayColor':'#000000',
'width':360,
'height':650,
'onComplete': function(){
    setTimeout( function() {$.fancybox.close(); },4000); // 4000 = 4 secs
  }

[rogerl]

Also just looking at that code, the placement of the single quotes I would query. I helped someone last year on something similar and after much experimentation that is what made the difference to the option commands working.

[lac8383]

BillyWiz

The code posted by Rogerl that incorporates the following to your Fancybox settings should close the Lightbox after 4 seconds. You can adjust the timing to suit your requirements.
I tested the code setting up a Slideshow with a picture, changed options to "Lightbox Gallery" and type was "Fancybox". Clicked "Settings" button and entered the code. When previewed and clicking the picture to display, it worked exactly the way you wanted closing automatically after 4 seconds.
Hopefully, all you need to add is that last piece of code that is bold highlighted.

'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':2000,
'speedOut':1000,
'overlayShow':true,
'overlayColor':'#000000',
'width':360,
'height':650,
'onComplete': function(){
setTimeout( function() {$.fancybox.close(); },4000); // 4000 = 4 secs
}

Regards,
Leo

[Billywiz]

Thank you Leo and Roger for your replies.
In my original message I stated that I wanted to close the lightbox but was not totally clear on what I wanted to happen.
On my index page I have a link for visitors to click that opens a form in a lighytbox, when they fill in the form and send it an error or success page opens within the lightbox. If the success page opens then I want that page within the lightbox to close after a period of time thereby closing the the success page and the lightbox then the visitor will just see the index page. I hope this has made my query clearer.
The website in question is my signature below and the link to click is near the bottom of the page.

Cheers

[rogerl]

you could use the afterClose function. Not sure if this works with early versions of fancybox

Code: Select all

afterClose: function(){
    parent.location.href = "page.name"; // i.e. Index.html
},

or something similar to load up the page of your choice.

[lac8383]

Not sure this would work in your setup since you are using a lightbox pop-up for your form but you could use a timer set for a number of seconds on your success page. I have set up a form page in the past with a success and failure page, each one having a timer to re-display the form page when completed. This isn't just closing the lightbox but re-displaying the main page again.

Timer
type: timeout
interval: 5000

Events
Event: ontimer
Action: link
Link to: Page in this project
Page: "your main page to be displayed"

Regards,
Leo

[Billywiz]

Thanks for trying guys but neither work for me.

Leo, that code you gave me just opens the index page within the lightbox, I want the lightbox to close.

I think I will leave it to the visitor to click the "X" at the top to close the lightbox window

[rogerl]

Following up on my earlier hint you could play with the quotes and try:

Code: Select all

'afterClose': function(){
    parent.location.href = "page.name"; // i.e. Index.html
},

These things have been tried, just need to find the right combination.

[Billywiz]

Thanks Roger,
Let me run through what I have done and you can tell me if its correct.
On the success page that opens in the lightbox I have added a timer set to 4 seconds, in events within the timer I have selected "On timer" run javascript and placed the code you gave me but it doesnt close the lightbox.
If you go to https://www.summitcarhire.com/test and click the link at the bottom of the page "Can we improve, let us know" a lightbox pops up, just tick the recaptcha and a success page comes up thanking the visitor for the feedback, I then want that lightbox to close after 4 seconds so that all the visitor sees is the original index page that they clicked the link on.
Thanks for your input.

Cheers

[rogerl]

The lightbox you open for success has a settings button.
Try this code in there:

Code: Select all

'onComplete': function(){
    setTimeout( function() {$.fancybox.close(); },4000); // 4000 = 4 secs
  }

and remove the event / timer stuff then preview and see what happens. You could upload your test project (.wbs file) and give me alink to it so I can have a play. It's one step at a time till it all comes right.

[Billywiz]

Hi Roger, I think there may be some confusion here, there is only 1 lightbox and that opens from the link on ther index page, all other pages open in that lightbox, not seperate lightboxes. If I alter any settings then I can only do it in the link on the index page by choosing the "open in a lightbox"

Cheers

[rogerl]

Yes, do it there then. If I could see your project file I would know better how to help.

[Billywiz]

Hi Roger, I have done the project with only the problem elements remaining.
You can see the altered website at https://www.summitcarhire.com/testing
You can download the zip at https://www.summitcarhire.com/wbs/june2020.zip
When the page with "Thankyou for your feedback" appears I want that to close after 4 seconds so that all that's visible is the index page.

Cheers

[rogerl]

Far easier to see what's happening with the project file, thanks for that. I think this is best handled in the "success" page that could execute a script after page load in the light box. Will have a play later today.

[lac8383]

Guys,
This seems to be harder than expected to resolve. From all the searches I looked at over the weekend regarding closing pop-ups, parent processes from a main page that kick off child processes such as opening a lightbox which open another page (e.g. success page) is another child process. Trying to do windows.close(), windows.parent.close() functions and similar haven't worked in my testing.

From what I read in an article or two "Scripts may not close windows that were not opened by script" (https://medium.com/javascript-in-plain- ... eec56344bb) and (https://developer.mozilla.org/en-US/doc ... ndow/close).
In testing using a timer in the Success page to run javascript to do say a windows.close() function, pressing F12 in the browser would give the results: "Scripts may close only the windows that were opened by them".

I would guess that knowing the parent and child process ID's and being able to do a close function on the desired one would work. For example, the main page with the survey link would be the parent, the child would be the lighbox, and another child would be the success page.

I'm sure closing the lightbox automatically can be done but may require some additional javascript coding to make it functional. Unfortunately, I don't have javascript experience to help in this matter.
If you find a solution, I would love to see how it was done.

Regards,
Leo

[rogerl]

Hi Guys,
I believe I have had success!
Couple of things to start:
In page properties for "Survey.php" the default lightbox is not fancybox
In error and success pages it does not have access to jquery or fancybox scripts and there is the complication of child verses parent as outlined above.
I found a script which appears to do the job and this should be inserted in page html, Between <head> and </head> tags on the "error" and "success" pages. Have timeout set to 2 seconds here:

Code: Select all

<script>
 
  (function(){
  
    // Your URL
    var url = 'index.html';
  
    // Delay before the redirect takes place, in seconds
    var delay = 2;
    
    window.setTimeout(function() {
     window.open(url, '_parent');
    }, delay * 1000);
  
  })();
 
</script>

On my test site I have set up for the success page only. Please see:
-- Link removed --
What do you think?
Regards
Roger

[Billywiz]

Hi Guys,
Leo, Roger has cracked it, Happy Days !!

Roger, thank you for your hard work figuring out this task, it works like a dream. I tweaked the code on the error page so that the visitor is taken back to the survey within the lightbox by changing _parent to _self.
Thanks again, it has saved me from opening the survey in a popup which I was reluctant to do.

Cheers

[rogerl]

Enjoyed the challenge, not the frustration!
Thanks for the other update for the error page, that will be useful for something I'm working on as well.

[rogerl]

Hi Guys,
A further to as I had a play the other night knowing this would be useful for my site.
I have a common error page called from multiple forms so needed to adapt the script to accommodate that and use your "_self" amendment. So ended up with this:

Code: Select all

<script>
 
  (function(){
  
    // Your URL
    var url = document.referrer;
  
    // Delay before the redirect takes place, in seconds
    var delay = 4;
    
    window.setTimeout(function() {
     window.open(url, '_self');
    }, delay * 1000);
  
  })();
 
</script>

Works great!