Making a responsive lightbox.

[Nicetalleuropean]

Is it possible to have lightboxes scale to fit the viewport? I can't seem to get any settings to stick on my fancybox lightbox. I found the api for fancybox earlier but am not sure how to apply anything into wysiwyg web builder. If you could point me somewhere that shows me exactly how to do this or if you could even show me that here that would be fantastic.

Thank you!

[Pablo]

There are several (third party) lightboxes available, they all have different behvaior.
Some of them scale, others are static. Note that this is not specific to WWB, these are all third party scripts.

See also:
https://www.wysiwygwebbuilder.com/lightboxes.html

[Nicetalleuropean]

Pablo, I cannot get any lightboxes to work at all. There is a large offset in the zoomed image that appears. If I used a slideshow, and select lightbox gallery, pressing next loads the next image even lower.

[BaconFries]

Without seeing what you have done is is difficult to say. Please provide a simple "Demo" not a url but a copy of the project .wbs file so it can be checked for what you have done or have not done. Before sharing please read the following
https://wysiwygwebbuilder.com/forum/vie ... hp?t=82134

[Pablo]

Do the examples in the tutorial work for you?
If no, then it may be a browser related issue.
If yes, then it most likely related the configuration or images.

[Nicetalleuropean]

Hi , thank you for your responses. At the bottom of this reply I will have a demo project showcasing these things.

Lightbox

The examples in the tutorial work just fine for me. My issues are consistent across different browsers, so this must be related to something with the configuration like you said. When I create a new blank site to test lightboxes on, they work just fine. This issue occurs regardless of the lightbox selected. For the sake of demonstrating this in our demo project, I made it so that clicking the main two product images at the top open a lightbox instead of linking to the (pruned) product page.

Fixed Header-

When using a fixed header, the initial top of the page is inappropriately covered. I understand a sticky header has to be able to cover things but it would be nice if when using one, the page would come natively with padding that matches the height of the header so that I'm not covering my website banner or any other things at the top of the page. If I add filler at the top it does not always work well from device to device.

1


2


3 (in editor)


Above are a few pictures of the website as it is previewed, versus the editor. You can see in images 1 and 2 that putting spacing isn't always wise because of how that header can change size.

It would be great if there's a way to have that automatically offset so that our header isn't covering content. It would also be great if this offset was automatically applied to bookmarks as well so that they aren't placed underneath a fixed header when linked.

Padded Buttons

For some reason, when applying padding to buttons the button images generated by the web builder are very broken or inconsistent. This isn't super major and we've decided to make our own button images as a solution, but we figure this is something you might be interested in knowing about and is included in the demo project below. This is not perfectly replicated inside of the demo, but the button is totally different from the editor all the same.

In Editor


Preview


Download the project file here:
https://drive.google.com/drive/folders/ ... drive_link

We want to thank you in advance for your assistance. We highly appreciate you making a tool like this available that allows us to have full control over our website locally. As you can see we've put a lot of time and effort into building a beautiful website for our business (feel free to point to VirtualPinball.com for your marketing needs.) But if we cannot get it to work with the basic functionality mentioned above it will become useless to us. We REALLY need your assistance to finalize our project. I'm sure that many other customers of WYSIWYG web builder are encountering the same issues.

[Pablo]

The link does not work for me: Access Denied.

It is logic behavior that if you make the page header fixed that it will overlap the content.
To prevent this you can set the top margin of the first element.

The offset of bookmark can be set in the bookmark settings.

[Nicetalleuropean]

Apologies. Here is a share enabled link https://drive.google.com/drive/folders/ ... sp=sharing

I will go ahead and give those things a try. Thank you

[Pablo]

Thanks for sharing the project.
However, can you please tell me exactly where I need to look?

See also the forum rules:
viewtopic.php?f=10&t=82134

Note: For the index page, you can add the top margin to 'LayoutGrid11'

[Nicetalleuropean]

Hi Pablo, thank you for your reply on Friday.

Everything should be on that index page, you should be able to view the issue with the lightbox and the buttons upon previewing the project in a browser. If you click on either the Ultra VP or the Vertigo NXT product image it should open a lightbox and then you will see what I mean with the placement/size of the lightbox. The buttons that are gonna generate differently from the editor will be the ones under the main products that say order and info.

I was able to get the header working correctly as a fixed element, thank you for your advice on that.

[Pablo]

I'm sorry, but I cannot find the lightbox on the index page.
Where did you configure this exactly?
Can you please be more specific or simplify the project so it's immediately clear what to do?

See also the forum rules:
viewtopic.php?f=10&t=82134

Also, in the project you have shared, the buttons are images, they look correct for me.
Did you share the right project?

Another note: you should not add code at the start of the page. This breaks the HTML structure!
You will need to fix this first otherwise things will not work correctly.