Close lightbox

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
User avatar
Billywiz
 
 
Posts: 231
Joined: Thu Jul 17, 2008 3:32 pm
Location: UK
Contact:

Close lightbox

Post by Billywiz » Mon Jun 15, 2020 7:49 am

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
The Cheapest Car Hire, Worldwide.

Summit Car Hire

User avatar
BaconFries
 
 
Posts: 5051
Joined: Thu Aug 16, 2007 7:32 pm

Re: Close lightbox

Post by BaconFries » Mon Jun 15, 2020 8:12 am

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

User avatar
Billywiz
 
 
Posts: 231
Joined: Thu Jul 17, 2008 3:32 pm
Location: UK
Contact:

Re: Close lightbox

Post by Billywiz » Mon Jun 15, 2020 9:55 am

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
The Cheapest Car Hire, Worldwide.

Summit Car Hire

User avatar
Billywiz
 
 
Posts: 231
Joined: Thu Jul 17, 2008 3:32 pm
Location: UK
Contact:

Re: Close lightbox

Post by Billywiz » Thu Jun 18, 2020 7:30 am

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
The Cheapest Car Hire, Worldwide.

Summit Car Hire

User avatar
Pablo
 
Posts: 22140
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Close lightbox

Post by Pablo » Thu Jun 18, 2020 7:34 am


User avatar
Billywiz
 
 
Posts: 231
Joined: Thu Jul 17, 2008 3:32 pm
Location: UK
Contact:

Re: Close lightbox

Post by Billywiz » Thu Jun 18, 2020 11:38 am

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
The Cheapest Car Hire, Worldwide.

Summit Car Hire

User avatar
Pablo
 
Posts: 22140
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Close lightbox

Post by Pablo » Thu Jun 18, 2020 12:09 pm

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

User avatar
rogerl
 
 
Posts: 299
Joined: Tue May 03, 2016 8:24 am

Re: Close lightbox

Post by rogerl » Fri Jun 19, 2020 10:56 pm

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
  }

User avatar
rogerl
 
 
Posts: 299
Joined: Tue May 03, 2016 8:24 am

Re: Close lightbox

Post by rogerl » Fri Jun 19, 2020 11:09 pm

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
 
 
Posts: 27
Joined: Sun Mar 24, 2019 6:34 pm

Re: Close lightbox

Post by lac8383 » Sat Jun 20, 2020 2:08 am

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

User avatar
Billywiz
 
 
Posts: 231
Joined: Thu Jul 17, 2008 3:32 pm
Location: UK
Contact:

Re: Close lightbox

Post by Billywiz » Sat Jun 20, 2020 7:15 am

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
The Cheapest Car Hire, Worldwide.

Summit Car Hire

User avatar
rogerl
 
 
Posts: 299
Joined: Tue May 03, 2016 8:24 am

Re: Close lightbox

Post by rogerl » Sat Jun 20, 2020 9:04 am

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
 
 
Posts: 27
Joined: Sun Mar 24, 2019 6:34 pm

Re: Close lightbox

Post by lac8383 » Sat Jun 20, 2020 1:30 pm

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

User avatar
Billywiz
 
 
Posts: 231
Joined: Thu Jul 17, 2008 3:32 pm
Location: UK
Contact:

Re: Close lightbox

Post by Billywiz » Sat Jun 20, 2020 2:28 pm

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
The Cheapest Car Hire, Worldwide.

Summit Car Hire

User avatar
rogerl
 
 
Posts: 299
Joined: Tue May 03, 2016 8:24 am

Re: Close lightbox

Post by rogerl » Sat Jun 20, 2020 10:55 pm

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.

Post Reply